Build a Dating Application with MERN Stack
Tags: mongodb, express, react, node
Published: 2022-01-01 19:30:02

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

Here is the [github repository](https://github.com/Forchapeatl/MERN-dating-app-frontend) and here is a working [demo on netlify ](https://mern-dating-app.netlify.app/)

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.

```javascript
#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.
```javascript
#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.
```Css
*{
  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.
```javascript
#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.

```javascript
#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.

```Css
#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
```javascript
#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**

```javascript
#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.
```Css
#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.
```javascript
#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**
```javascript
#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.
```Css
#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;
}
```