DEV Community

Cover image for Building a Dating App with Mern
Collins Mbathi
Collins Mbathi

Posted on • Updated on

Building a Dating App with Mern


We're going to build a dating app with the MERN stack; the web app has simple functionality (see below for a screenshot of the finished app); all data comes from a MongoDB database, with API endpoints set up in Node.js.
In this article, we will build the front end of our dating app using React.js.

React.js is a popular JavaScript library for building user interfaces. It is fast, efficient, and can be used to build complex and responsive user interfaces.
for the Backend side, we will focus on building it using Node.js. We will use MongoDB to store users & messages, Express to build the API, ReactJs for the web app, and Socket.IO to enable real-time communication between users.

In the following section, we will look at some of the prerequisites for this tutorial.


The following are required to complete this tutorial:

  • Nodejs installed on your system.

  • Expressjs installed on your system.

  • Reactjs installed on your system.

  • Sound knowledge of JavaScript ,Reactjs and Nodejs.

In the following section, we will talk about the technologies we are going to use.


Let's start with the front end of React and then move on to the back end.
Create a dating-app-mern folder in your terminal. Use the following inside it:
To make a new app called dating-app-frontend, use create-react-app. The commands to accomplish this are as follows:

cd dating-app-mern
npx create-react-app dating-app-frontend

Enter fullscreen mode Exit fullscreen mode

React Basic Setup

Return to the React project and navigate to the directory dating-app-frontend. npm start will launch the React app.

cd dating-app-frontend
npm start

Enter fullscreen mode Exit fullscreen mode

Next, remove any files that you no longer require.


Creating a Header Component

Let's start by making a header component. You must first install Material. because it will provide us with the icons we will use

npm i @material-ui/core @material-ui/icons
Enter fullscreen mode Exit fullscreen mode

Next, inside the src folder, make a components folder. Inside the components folder, create two files: Header.jsx and Header.CSS. There are two icons in header.js: a person icon and a forum icon.
The following is the content of the Header.jsx file.

include the Header component in the App.js file

The following information is contained in the header.css file:


Creating the Dating Cards Component

Let's get started on the second component. Inside the components folder, create two files: DatingCards.js and DatingCards.css. Then, in the App.js file, include the DatingCards component.
You must first install the react-tinder-card package before proceeding. This package includes a feature that generates the swipe effect.

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

After that, paste the content into DatingCards.js. You store the names and images of four people inside a people state variable. Import DatingCard and use it as a component next.
The props mentioned in the react-tinder-card documentation are used here.
The functions swiped and outOfFrame are required. Use the imgUrl background image and display the name in the h3 tag when looping through each person.



Creating the Swipe Buttons Component

Let's now make the Swipe component, which is the footer button.
These buttons complement the app's design. Because it is a simple app, they will not function.
Inside the components folder, create two files: Swipe.jsx and Swipe.css. It must also be included in the App.js file.

Swiper.jsx contains content.


The following step is to style the buttons, and the code for doing so is provided below.


We have completed the frontend portion.

Initial Back-End Setup

Let's get started with the Node.js code on the back end. Make a new folder and call it API.

Then, in the terminal, type npm init -y to create a package.json file.

After that, you must install two packages before proceeding. Install Express and Mongoose in the API folder using the terminal.

npm i express mongoose
Enter fullscreen mode Exit fullscreen mode

After that, launch MongoDB and copy the link to our project.

Install the nodemon in the API folder before proceeding. Any changes to the code in the index.js file cause the Node server to restart immediately.

npm i nodemon
Enter fullscreen mode Exit fullscreen mode

Initial Route Setup

Let's start with the first route, which checks to see if everything is in order. The Node.js Express package allows you to create routes, which is how the majority of the Internet works. Most back-end languages, such as Node.js and Java, provide the ability to create these routes that interact with databases. The first route does not interact with the database and simply returns a text when accessed via a GET request.

In the API folder, create an index.js file. First, import the Express and Mongoose packages. Then, using Express, create a port variable that will run on port 5001.

const express = require('express');
const mongoose = require('express');
//App Config
const app = express()
const port = process.env.PORT || 5001
//DB Config
//API Endpoints

app.listen(port, () => console.log(`Listening on localhost: ${port}`))
Enter fullscreen mode Exit fullscreen mode

Database User and Network Access

You must create a database user and grant network access in MongoDB.


MongoDB Schema and Routes

MongoDB stores data in JSON format rather than the traditional table structure found in traditional databases such as Oracle. You create the schema file that MongoDB requires. It describes how fields in MongoDB are stored.
Cards are regarded as a collection name in this context, and a value such as cardSchema is stored in the database. It consists of a named object and imgUrl keys. These are the names used in MongoDB. Make a Cards.js file with the following content.


You now use the schema to create the endpoint that adds data to the database. The
MVC pattern is followed here; it is the traditional flow of a web application.

Then, use a POST request to send any data from the user to the database. Any endpoint can be used. If you write an article on and then hit the POST button, your article is saved in the database once the POST request is made.
The GET endpoints retrieve all database data. Again, any endpoint can be specified. When you browse through the posts in, for example, a GET request is sent to the endpoint, which retrieves all posts from the database.

In the routes folder, make a folder called routes. Make a file called Card.js. Create a POST request to the /dating/cards endpoint in Card.js. The load is sent to MongoDB via req.body. Then you send dbCard using create(). If it is successful, you will be assigned status 201; otherwise, you will be assigned status 500. The new content is highlighted in bold.
To get the data from the database, create a GET endpoint to /dating/cards.
You're using find() here and getting a success code of 200. (otherwise, status 500).


As you can see from the image, I used a router. Connect it in the index to make life easier. js
Let's use the postman app to check the routes.

You must first complete two tasks before proceeding with the POST request.
First, enable CORS; otherwise, when you deploy the app, you will encounter cross-origin errors.

Install CORS by opening the terminal.

npm i cors
Enter fullscreen mode Exit fullscreen mode

Import CORS into index.js and use it with app.use (). You must also include the express.json() middleware. It is required because it is required to parse the incoming JSON object from MongoDB in order to read the body.


Bringing the Backend and the Frontend Together

Let's connect the back and front ends. To call from the front end, use the Axios package. Axios is a JavaScript library that sends API requests to REST endpoints. You've just added two endpoints to the back end. Axios is required to access them. Install the client by opening it.

npm i Axios
Enter fullscreen mode Exit fullscreen mode

Then, create a new axios.js file and an instance of Axios. http://localhost:5001 is the URL.

import axios from 'axios'
const instance = axios.create({
 URL: "http://localhost:5001"
export default instance

Enter fullscreen mode Exit fullscreen mode

Remove the hard-coded information in the people's states from DatingCards.js. Then import the local axios and call the /dating/cards endpoint via the useEffect hook. When you receive the data, use the setPeople() function to reset it.

import React, { useState, useEffect } from 'react'
import DatingCard from 'react-tinder-card'
import './DatingCards.css'
import axios from './axios'
const DatingCards = () => {
 const [people, setPeople] = useState([])
 useEffect(() => {
 async function fetchData() {
 const req = await axios.get("/dating/cards")
 }, [])
 const swiped = (direction, nameToDelete) => {
 console.log("receiving " + nameToDelete)

Enter fullscreen mode Exit fullscreen mode


We finished our dating app project, and I hope you enjoyed it and learned a lot.
In our next article, we'll go over how to deploy the app on Heroku.

Top comments (24)

juanfabiorey profile image

Hey there! thanks for this tutorial.
Missing screenshots for Datingcards.css, Swipe.jsx, Swipe.css....
I'm a complete begineer and I need to see detailed screnshots to learn hahaha.
Have a repo for this project?

collins87mbathi profile image
Collins Mbathi

Yeah ...okay will send you the link to the repo soon.sorry for the confusion...

juanfabiorey profile image

Thanks bro

kunward23999591 profile image
Kunwardeep Singh

can you pls send me link of the repo

wambua_5314 profile image
Wambua vee

Nice article

lavig10 profile image
Lavish Goyal

Use prettier vs code extension please! otherwise nice content!

vastris profile image

Hi, I appreciate your tutorial on how to create a dating app with MERN. I think it’s a very cool and practical project. I’m impressed by how you used MongoDB, Express, React, and Node.js to build your app. I’m curious about how you implemented the authentication and the matching functions. Do you have any resources or examples on how to create a dating app with MERN that you can share? I would love to learn more and try it out myself. 😊

gareeb_coder profile image
Info Comment hidden by post author - thread only accessible via permalink
Asish Raz

Why I am feeling, that similar document with similar examples, seeing somewhere else too?
Forgive me for this question, is this your own or you have used some book or online resources?
I hope you don't mind answering that question.

collins87mbathi profile image
Collins Mbathi

I did the project when writing the article dude

paytonmorrison profile image

thanks for providing such informative post.

collins87mbathi profile image
Collins Mbathi

Thanks...i appreciate

cod3kid profile image
Muhamed Sufail

Clever Programmer ✌

collins87mbathi profile image
Collins Mbathi


oshumbleman profile image
Oscar kanangila


rasmusnoq profile image
Amaru Lucas

Hey there... this is just awesome, I'll love a link to the repo if you don't mind!

dewinang profile image
Victor Pavuk

good work

collins87mbathi profile image
Collins Mbathi

Thanks .

collins87mbathi profile image
Collins Mbathi


optimbro profile image

Clever Programmer 😍😊

collins87mbathi profile image
Collins Mbathi


hvetemel profile image

The images for DatingCards.js and Swipe.js is the same

collins87mbathi profile image
Collins Mbathi

Ooh ...some confusion ..but jus follow the notes will do..really sorry

walidessaied01 profile image

Thanks for this tutorial,
Any one have code source ?

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more