Hey there! In this series we will be creating a Tinder (Dating App) Clone. We're going to make a really good looking and efficient web app using the MERN stack, i.e, using MongoDB Express.js React.js & Node.js.
We will also use Material UI Icons and components to make it look and feel awesome & all the tutorials are going to be beginner friendly, while this project could shine as a badge on your portfolio!

I'm totally pumped up to start working on this, So, without further adieu let's get started!

Requirements

Make sure that you have the following installed and setup :

• Node.js (For NPM)
• Any Text-Editor
• A cup of coffee/Tea (whichever you prefer) 😉

If at any point you get stuck or if you wanna follow along with my code, then clone/fork this repository into your system.
With that done let's move on to setting things up!

Project Setup

1. Make an empty folder and name it whatever you want. I'll be naming it TinderClone.

2. Open up your terminal inside the directory and create a new react app using CRA by :

   npx create-react-app tinder-front
   

3. Wait For the the process to complete as it takes quite a bit of time. as soon as you can see Happy Hacking in your terminal that means project setup was complete and we can start our project to check if it runs.

4. Now, lets get inside out tinder-front directory and run our project to see if everything went fine :

   npm start
   

   And this should start a development server at localhost:3000

5. If everything went fine, this is what you should see in your browser :

Yipee!! You've completely setup the boilerplate for the frontend part of your project! 🎉🎉

Next Up

In the next tutorial, which will be coming really, soon, (i mean it!), we will start building the Frontend of the application, we'll use Material UI, and other cool stuff to make it look appealing to the eyes. So make sure you stick around and signup for the newsletter so that you get the post as soon as it is out!

Till then.. Happy Hacking! ✨