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;
    }

    41

    This website collects cookies to deliver better user experience

    Build a Dating Application with MERN Stack