DEV Community

Cover image for Build a Dating Application with MERN Stack
FORCHA
FORCHA

Posted on

Build a Dating Application with MERN Stack

#mongodb #express #react #node

*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')
);
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

*{
  margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

npm i react-tinder-card
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (6)

Collapse
 
lastreaction22 profile image
lastreaction •

Who wants to share here their experience of dating on the Internet. A friend here advised me a dating site on the Internet read the full info here now I won't get out of it. Here is a free registration and a very convenient interface, and artificial intelligence will easily find a pair for you. An excellent choice of girls who are just waiting for a normal guy to write to them. Now it's hard for a girl to find a normal guy, because there are a lot of drug addicts and drunks everywhere. Simple decent guys are worth their weight in gold.

Collapse
 
kriss23132 profile image
kriss23132 •

More and more people believe in online dating and the chance to meet a soul mate on a dating site. There is nothing strange in this. All over the world, people are facing the same problem - they do not have enough time even for personal happiness. And recently I came across an article that helped me newswatchtv.com/2019/06/27/discover-ladadate-resource- joining-love-seeking-people-together/ it describes a new service in order to find a mate on the Internet and evaluate an active audience there

Collapse
 
groodydee profile image
Info Comment hidden by post author - thread only accessible via permalink
GRoodyDee •

I want to understand one truth that everyone seems to know except me. Where to look for hot women? Such frank, seductive, who are looking for sexual adventures and a man only for one night? Recently I learned that it is not really difficult to find a hot woman if you know what to look for in communication and in the behavior of women. A popular place to find hot women are pubs and nightclubs. I will not write long, here is an article on this topic Where to find horny women and I promise that after reading it you will know everything about what a hot woman looks like, where to look for her, and what to do to attract her attention.

Collapse
 
daniel33312 profile image
daniel33312 •

It reminded me that the site that I used and still use for like 5 months is one site for discreet hook ups. And since I have been using it for a long time, I can say that this platform is really worthy of your attention. And if you are tired of being lonely or just want to have some fun, you can use this wonderful site.

Collapse
 
amelielewis19 profile image
Amelie Lewis • • Edited

Can't resist suggesting features for a dating app. Namely, adding tips for users of both male and female articles. For example, when people start getting to know each other, a window should appear with a reminder such as: tell something about yourself, be polite or give a compliment. There are many ways to conquer each other's hearts and this article taught me this about online dating No application has done this before, I really hope that someone will be interested in this an idea.

Collapse
 
dasdaad profile image
dasdaad •

And what are ready-made dating sites that you can advise me?

Some comments have been hidden by the post's author - find out more

Read next

jaydevm profile image

Things that I like better in Vue than in React

Jaydev Mahadevan -

mattlewandowski93 profile image

Free online planning poker

Matt Lewandowski -

dongtrien profile image

React Native Login connect with sql server ?

Lam trien dong -

ramunarasinga profile image

Lessons from open-source: Algorithm used to compute error.digest in Next.js

Ramu Narasinga -