Build a Tinder Clone app using React, Material-Ui and Firebase

This week I decided to start working on a few projects that will be to clone a few famous apps. I started with cloning Tinder, which was a fun project especially because I met my wife on this app 6 years ago when I was working in United States. This app is not fully functional, but you can swipe left and right with the cards, go the chat and send a message.

In this blog, I will go over how to set up the app, the React components to create this app and how to connect and deploy with Firebase. I will not cover everything but you can find the full code here.

1. Set up the app.

npx create-react-app tinder-clone

This will give you the structure of the project. Update App.js by removing everything in the header and replacing with a simple <h1> tag just to check if your app is launching. Also remove the logo imported at the top of your code.

Delete some files in ‘src’ folder that you won’t need anymore

2. Set up Material-Ui

On the website, search for the icons that you would like to import and it will give you the full line as shown below for the person icon.

3. Set up Firebase

Once you visit https://firebase.google.com/, get started with a project.

Once the project is created, you need to register the app. Go to the project settings on the top left, then click on the embed </> at the bottom. You will reach this page (see screenshot below) where you will register your app. Make sure you check the box where it says “Also set up Firebase Hosting for this app”.

In the general project setting page, you will find this config code that contains your informations. Copy this and keep it somewhere as you will need it in your app.

In VsCode, create a firebase,js component that will be set up like shown below, using the information that we copied earlier on Firebase:

Once you will app will be set up, you will be able to easily add new cards by filling the attributes name and url, and generate an automatic id, like so:

4. React Components

Basically the app will be broken down in 3 major components: the header, the Tinder cards, and the swipe buttons. I worked on another level with the chat button on the top right that will bring us to a chat component.

a) The header component

Import all icons that you get from Material-Ui. We will import “Link” hook from ‘react-router-dom’, that we will use to direct the user to the proper uri once the button is clicked. ‘useHistory’ hook will gives us access to the History instance that we will use to navigate. In other words it gives us our browser or session history.

b) The tinder cards component

Notice how we used the ‘useEffect’ hook, that replaces the lifecycle component in a class base component. We use ‘onSnapshot’ that takes a ‘picture’ of the database which will give us back all of the documents inside of snapshot. We then loop through this docs that we get back.

c) The swipe buttons component

Here I just set the icons imported from material-ui with no functionalities. I am planning to do this later on.

Conclusion

Very fun app to create, it really made me work on the flow of the components and also practice the styling.