28
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/iconsNext, 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 HeaderInclude 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-cardNext, 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 DatingCardsAdd 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 SwipeButtonsNext, 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;
}28