Build a Dating Application with MERN Stack

*Full Stack Mongodb, ExpressJs, ReactJs and NodeJs online dating application *

Here is the github repository and here is a working demo on netlify

Open your terminal and create a dating-app-mern folder. Inside it, use create-react-app to create a new app called dating-app-frontend. The following are the commands to do this.
mkdir dating-app-mern
cd dating-app-mern
npm create-react-app dating-app-frontend

Return to the React project and cd to the dating-app-frontend directory. Start the React
app with npm start.
cd dating-app-frontend
npm start
Next, let’s delete some of the files that we don’t need. Navigate to dating-app-frontend > Src and delete the following files

App.test.js , reportWebVitas.js , setupTests.js

Let’s remove all the unnecessary boilerplate code. The index.js file should look like
the following.

#index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
 <React.StrictMode>
  <App />
 </React.StrictMode>,
 document.getElementById('root')
);

App.js contains only the text Dating App MERN. All the content from the App.css
file has been removed.

#App.js
import './App.css';
function App() {
 return (
  <div className="app">
   <h1>Dating App MERN </h1>
  </div>
 );
}
export default App;

In index.css, update the CSS to have margin: 0 at the top.

*{
  margin: 0;
}

Creating a Header Component
Let’s create a header component. First, you must install Material-UI (https://materialui.
com), which provides the icons. You need to do two npm installs, as per the Material-
UI documentation. Install the core through the integrated terminal in the dating-appfrontend
folder.

npm i @material-ui/core @material-ui/icons

Next, create a components folder inside the src folder. Create two files— Header.js
and Header.css—inside the components folder
The following is the Header.js file’s content.

#Header.js
import React from 'react'
import './Header.css'
import PersonIcon from '@material-ui/icons/Person'
import IconButton from '@material-ui/core/IconButton'
import ForumIcon from '@material-ui/icons/Forum'
const Header = () => {
 return (
  <div className="header">
   <IconButton>
    <PersonIcon fontSize="large" 
    className="header__icon" />
   </IconButton>
   <img className="header__logo" 
   src="logo192.png" 
   alt="header" />
   <IconButton>
     <ForumIcon fontSize="large" 
     className="header__icon" />
   </IconButton>
  </div>
 )
}
export default Header

Include the Header component in the App.js file and on localhost. The updated
code is marked in bold.

#App.js
import './App.css';
import Header from './components/Header';
function App() {
 return (
  <div className="app">
   <Header />
  </div>
 );
}
export default App;

The Header.css file contains the following content, including simple styles, which
completes the header.

#Header.css
.header{
display: flex;
align-items: center;
justify-content: space-between;
z-index: 100;
border-bottom: 1px solid #f9f9f9;
}
.header__logo{
object-fit: contain;
height: 40px;
}
.header__icon{
padding: 20px;
}

Let’s now work on the second component. Create two files— DatingCards.js and
DatingCards.css—inside the components folder.

The updated code of App.js is below

#App.js
import './App.css';
import Header from './components/Header';
import DatingCards from './components/DatingCards';
function App() {
 return (
  <div className="app">
   <Header />
   < DatingCards />
  </div>
 );
}
export default App;

Before moving forward let's install this
package has a feature that provides the swipe effect.

npm i react-tinder-card

Next, put the content in DatingCards.js

#DatingCards.js
import React, { useState } from 'react'
import DatingCard from 'react-tinder-card'
import './DatingCards.css'
const DatingCards = () => {
    const [people, setPeople] = useState([
        { name: "Random Girl", imgUrl: "https://images.unsplash.com/photo-1599842057874-37393e9342df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGdpcmx8ZW58MHx8MHx8&auto=format&fit=crop&w=634&q=80" },
        { name: "Another Girl", imgUrl: "https://images.unsplash.com/photo-1602693130555-a1a37fda607b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGJsYWNrJTIwZ2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=634&q=80" },
        { name: "Random Guy", imgUrl: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80" },
        { name: "Another Guy", imgUrl: "https://images.unsplash.com/photo-1601576084861-5de423553c0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MzF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=634&q=80" }
        ])
    const swiped = (direction, nameToDelete) => {
        console.log("receiving " + nameToDelete)
    }
    const outOfFrame = (name) => {
        console.log(name + " left the screen!!")
    }
    return (
        <div className="datingCards">
        <div className="datingCards__container">
        {people.map((person) => (
            <DatingCard
            className="swipe"
            key={person.name}
            preventSwipe={['up', 'down']}
            onSwipe={(dir) => swiped(dir, person.name)}
            onCardLeftScreen={() => outOfFrame(person.name)} >
            <div style={{ backgroundImage: `url(${person.
                imgUrl})`}} className="card">
                <h3>{person.name}</h3>  
                </div>
                </DatingCard>
                ))}
        </div>
        </div>
        )
}
export default DatingCards

Add the first styles in the DatingCards.css file.

#DatingCards.css
.datingCards__container{
display: flex;
justify-content: center;
margin-top: 10vh;
}
.card{
position: relative;
background-color: white;
width: 600px;
padding: 20px;
max-width: 85vw;
height: 70vh;
box-shadow: 0px 18px 53px 0px rgba(0, 0, 0, 0.3);
border-radius: 20px;
background-size: cover;
background-position: center;
}
.swipe{
position: absolute;
}
.cardContent{
width: 100%;
height: 100%;
}
.card h3{
position: absolute;
bottom: 0;
margin: 10px;
color: white;
}

Creating the Swipe Buttons Component
Create two files— SwipeButtons.js and SwipeButtons.css—inside the components
folder.

#App.js
import './App.css';
import Header from './components/Header';
import DatingCards from './components/DatingCards';
import SwipeButtons from './components/SwipeButtons';
function App() {
 return (
  <div className="app">
   <Header />
   < DatingCards />
   < SwipeButtons />
  </div>
 );
}
export default App;

The content of the SwipeButtons.js

#SwipeButtons.js
import React from 'react'
import './SwipeButtons.css'
import ReplayIcon from '@material-ui/icons/Replay'
import CloseIcon from '@material-ui/icons/Close'
import StarRateIcon from '@material-ui/icons/StarRate'
import FavoriteIcon from '@material-ui/icons/Favorite'
import FlashOnIcon from '@material-ui/icons/FlashOn'
import IconButton from '@material-ui/core/IconButton'
const SwipeButtons = () => {
    return (
        <div className="swipeButtons">
        <IconButton className="swipeButtons__repeat">
                <ReplayIcon fontSize="large" />
        </IconButton>
        <IconButton className="swipeButtons__left">
                <CloseIcon fontSize="large" />
        </IconButton>
        <IconButton className="swipeButtons__star">
                <StarRateIcon fontSize="large" />
        </IconButton>
        <IconButton className="swipeButtons__right">
                <FavoriteIcon fontSize="large" />
        </IconButton>
        <IconButton className="swipeButtons__lightning">
                <FlashOnIcon fontSize="large" />
        </IconButton>
        </div>
        )
}
export default SwipeButtons

Next, style the buttons in the SwipeButtons.css file.

#SwipeButtons.css
.swipeButtons{
position: fixed;
bottom: 10vh;
display: flex;
width: 100%;
justify-content: space-evenly;
}
.swipeButtons .MuiIconButton-root{
background-color: white;
box-shadow: 0px 10px 53px 0px rgba(0, 0, 0, 0.3) !important;
}
.swipeButtons__repeat{
padding: 3vw !important;
color: #f5b748 !important;
}
.swipeButtons__left{
padding: 3vw !important;
color: #ec5e6f !important;
}
.swipeButtons__star{
padding: 3vw !important;
color: #62b4f9 !important;
}
.swipeButtons__right{
padding: 3vw !important;
color: #76e2b3 !important;
}
.swipeButtons__lightning{
padding: 3vw !important;
color: #915dd1 !important;
}

Blog

Build a Dating Application with MERN Stack

FORCHA

Join Our Newsletter. No Spam, Only the good stuff.

Related