TUTORIALS

How to Create a Tinder Clone Dating Web App in Node JS

Hiep Le

View GitHub Repo
October 14, 2021

Dating app development have come a long way over the last few years. People use dating sites like Tinder, Bumble, OkCupid, Hinge, etc. everyday. One of the most widely used app is Tinder. Using the CometChat communications SDK and Node.js backend services, you will learn how to build a fuly functioning dating site with minimal effort. This tutorial will help you to create a dating web app in Node.js.

Follow along the steps to build a Tinder clone with the following functionalities:

1. Users

  • Functionality for end-users to login & register
  • Functionality for users to create their own profiles like Tinder
  • A way for users to look at other user-profiles and either accept or reject (swipe)
  • A way for users to match and communicate

2. Chat

Use CometChat JavaScript SDK and configure it such that-

  • Only matched users can text chat, as well as voice & video, call each other
  • Login the logged-in user to CometChat.
  • Add API call when a user registers so that the user is created in CometChat

Prerequisites

To follow this tutorial, you must have a degree of understanding of the general use of Node.js and MySQL database. This will help you to improve your understanding of this tutorial.

Project Structure

To create a new project, you just need to create a folder which is called “tinder-clone” and then run “npm init”. After following the instruction, you will a brand new Node.js project. The image below reveals the project structure of our Tinder clone application. Make sure you see the folder arrangement before proceeding.

node js tinder clone project structure

Each subfolder and file will be explained in detail in the following section:

  • public: contains all html, css, javascript files for the UI.
  • routes: contains all files that will be used to handle the API requests.
  • screenshots: this folder contains images that are used for README.md file.
  • .env: contains environment variables that will be used in the application.
  • .gitignore: this file contains files that will be ignored when committing the code. In this case, we do not want to commit the “config.js” file because it contains the secret keys of the Javascript chat application.
  • package.json: contains all dependencies of the application.
  • README.md: describes the application and provides steps by steps to run the application.
  • tinder_clone.sql: contains scripts that you need to use to create the database and its tables.

1. Installing the Tinder Clone Dependencies

  • Step 1: You need to have Node.js installed on your machine
  • Step 2: Copy dependencies from the package.json file.
  • Step 3: Run “npm i” to install the dependencies for the application.

*Note:  If your MySQL server is incopatible with the mysql package because while setting up the MySQL server, you chose “Use Strong Password Encryption” instead of “Use Legacy Password Encryption”. You need to use “mysql2” package instead of mysql package.

2. Configuring CometChat

  1. Head to CometChat Pro and create an account.
  2. From the dashboard, add a new app called "chat-widget".
  3. Select this newly added app from the list.
  4. From the Quick Start copy the APP_ID, REGION, and AUTH_KEY, which will be used later.
  5. Also, copy the REST_API_KEY from the API & Auth Keys tab.
  6. Navigate to the Users tab, and delete all the default users and groups leaving it clean (very important).
  7. Create a file called “config.js” in the ”public/js” folder of your project.
  8. Import and inject your secret keys in the “config.js” file containing your CometChat in this manner.
  1. Make sure to include this file in your gitIgnore file from being exposed online.

3. Setting Up Database

As mentioned above, we will use the MySQL database. For this reason, this section describes how to create the database and its table. Before proceeding, you need to make sure that you have installed the MySQL database on your computer already. To create the database and its table, you need to get the SQL here.

The above sql specifies that we need to create tables - “user” and “match_request”. The user table is used to store user’s information for the application:

  • id - id of the user. It will be increased automatically when a new user has been created.
  • user_email - email of the user.
  • user_password - password of the user.
  • user_full_name - full name of the user.
  • user_age - age of the user.
  • user_avatar - avatar of the user.
  • user_gender - gender of the user.
  • user_cometchat_uid - CometChat uid of the user.

On the other hand, the requirement determines that we need a way for users to match and communicate. Therefore, the “match_request” table is created to help us store the match requests in the application.

  • id - id of the match request. It will be increased automatically when a new user has been created.
  • match_request_from - CometChat uid of the user who sent the match request.
  • match_request_to - CometChat uid of the user who will receive the match request.
  • match_request_sender - the sender name.
  • match_request_receiver - the receiver name.
  • match_request_status - status of the match request (0 is pending, 1 is accepted, -1 is rejected).
  • created_date - the date that the match request has been sent.
  • accepted_date - the date that the match_request has been accepted.

Aside from that, we are using Node.js with MySQL database. Hence, we need to connect to the database in our Node.js application, The best practice is to create a .env file and store environment variables. To create the .env file, please follow the below steps:

  • Step 1: Create a file which is call “.env” inside the root folder of your project.
  • Step 2: Replace the below information with your database connection information.
PORT=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx DB_HOST=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx DB_USER_NAME=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx DB_USER_PASSWORD=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx DB_NAME=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx DB_PORT=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx

4. Create a Node.js Server

Inside the root folder of your project, you need to create a file which is called “index.js”. The full source code of the index.js file can be found here. It is the main file that will be ran when running the following statements

node index.js or npx nodemon index.js or nodemon index.js

*Note: In this project, we will use the “nodemon” library because  the application will be reloaded automatically whenever there is any change in your code.

The above code snippet specifies that we are including some libraries to help them create a server. In this case, we need to use the express framework and the multer library for uploading files because we are building a dating site in Node.js. Therefore, the application should allow the user to upload their avatar. Aside from that, the mysql library for connecting with the MySQL database and so on. The database connection information that will be read from the .env file and this file should be included in the .gitignore file.

On the other hand, we are requiring all API routes of the application at line 53. However, we have not define it, yet. Please do not worry about it, we will discuss about it in the following section.

require("./routes")({ app, dbConn, upload, constants });

5. Creating the Routes Folder.

The routes folder will contain API routes in the application. Inside this folder, we need to create another “index.js” file. We will export a function that will take responsibility for combining all API routes, that function accepts an object as a parameter. The object will contain the express app object, the database connector object, the upload object - created by the multer library, and the constants. Those objects will be used in different API routes as you can see in the below code snippet. The full source code of the “index.js” file can be found here.

*Note: We will define three API routes in the application. the “authRoutes” is used for authenticated purpose, the “userRoutes” is used for user management. The last but not least, the “matchRequestRoutes” is used to manage the matching requests in the application. All of them will be discussed in the following section.

6. Creating APIs with Node.js

In this section, we will develop the APIs that will be needed to build our Tinder clone. The below endpoints describes the information about the APIs for the application.

  • /login: check user’s credentials and ensure that the user can login to the application, or not.
Method: POSTExample Request Body:{  "email": "hieptl@gmail.com",  "password": "123456"}
  • /users/create: create a new user in the application.
Method: POSTExample Request Body - Form Data Format:email: hieptl@gmail.compassword: 123456age: 25gender: MaleccUid: uid1fullname: Hiepavatar (file) - jpeg format.
  • /users/recommend: get the recommended users. In this application, the recommended users need to follow some criteria, each user, which is in the list, should not have any matching request with the current user. Following that, the gender of each user should be opposite to the current user’s gender.
Method: POSTExample Request Body:{  "gender": "Female",  "ccUid": "uid1"}
  • /requests/create: create a match requests between 2 users.
Method: POSTExample Request Body:{  "matchRequestFrom": "uid1",  "matchRequestTo": "uid2",  "matchRequestSender": "Hiep",  "matchRequestReceiver": "Jane"}

7. The Login API

The login API will receive the user’s credentials and validate that information. If the user’s information is valid, the user can log in to the application and vice versa. To create the login API, you need to create the “auth.js” file inside the “routes” folder. The full source code of the login API can be found here.

Method: POSTExample Request Body:{  "email": "hieptl@gmail.com",  "password": "123456"}

its method is POST and the request payload should contain the user’s email and user’s password. If the user’s information is valid, the user’s gender and user’s CometChat uid will be returned back as a response object. Following that, a warning message will be returned if the user’s credentials are not valid. Your can refer to the code snippet below for more information.

8. The User API

This section will describe the APIs for user management. Firstly, we need to create the “users.js” file inside the “routes” folder. It will contains two API endpoints such as creating a new user account, recommend users based on the user’s gender and the CometChat uid. The full fouce code can be found here.

The Create User API

In this part, we will develop an API to create a new account in the application. The API will have the below information. Its method is POST and we will send the form data format from the client side and the request should contain the user’s email, user’s password, user’s age, user’s gender, user’s avatar, user’s full name, and user’s CometChat uid.

Method: POSTExample Request Body - Form Data Format:email: hieptl@gmail.compassword: 123456age: 25gender: MaleccUid: uid1fullname: Hiepavatar (file) - jpeg format.

The API should check the type of the avatar image. In this application, we allow the user to upload an image with jpeg format. Additionally, the above information is required. If you miss something in the request payload, a warning message will be returned back from the response. Moreover, the API will check the user’s email has been used in the application, or not. If it existed in the system, a warning message will be returned to inform the user about that. You can refer to the below code snippet for more information.

The Recommend Users API

According to the requirements, we need to find a way for users to look at other user-profiles and either accept or reject (swipe). Hence, we will write an API to recommend users and show the list of recommended users on the UI. In this application, an user will be recommended if that user should not have any matching request with the current user. Following that, the gender of each user should be opposite to the current user’s gender. The full source code can be found here.

9. The Match Request API

This section will describe the APIs for managing the matching requests. In the application, if the current user likes someone’s profile, the current user can swipe right or click on the heart icon. Firstly, we need to create the “requests.js” file inside the “routes” folder. It will contain an API endpoint and it is about creating a new matching request. The full source code can be found here.

The Create Match Request API

In this part, we will develop an API to create a matching request in the application.

Method: POSTExample Request Body:{  "matchRequestFrom": "uid1",  "matchRequestTo": "uid2",  "matchRequestSender": "Hiep",  "matchRequestReceiver": "Jane"}

Its method is POST. The request payload will contain the below information.

  • match_request_from - CometChat uid of the user who sent the match request.
  • match_request_to - CometChat uid of the user who will receive the match request.
  • match_request_sender - the sender name.
  • match_request_receiver - the receiver name.

The API will check the upcoming matching request has been created in the system, or not. If the matching request has been created, a warning message will be returned and let the user know about that. Following that, if the matching request has not been created, a new matching request will be created. You can refer to the code snippet below for more information.

10. Creating the Client Side

We have finished creating APIs in the above sections. It is time to create the client side for our Tinder Clone. Inside the root folder, we need to create the “public” folder. The structure of the public folder should be as follow.

node js tinder clone public folder structure

Each subfolder and file will be explained in detail in the following section:

  • css: contains all styling for our javascript chat application.
  • img: contains images for the application such as logo, background, and so on.
  • js: contains Javascript code and our business logic.
  • favicon.ico: it is favicon.ico for the application.
  • index.html: root HTML file. HTML file for the home page.
  • login.html: HTML file for the login page.

11. Configuring Styling for the Application

Inside our Tinder clone project structure, you need to create a styles.css file inside the “css” folder and paste the codes here. styles.css file will contain all CSS of the application.

Setting Up Images for the Application

To store images for the application such as the logo and other images, you need to create the “img” folder inside your “public” folder. Following that, if you can refer to this link to get the images that will be used in this tutorial. If someone uploaded the avatar, that avatar will be stored in this folder.

The Login Page

node js tinder clone login page

This page is responsible for authenticating users using the login API. It accepts the user credentials and either signs him/her up or in, depending on if he/she is new to our application. To create the login page for the Javascript chat application, you need to follow the below steps:

  • Step 1: Create login.html in the source folder. The source code can be found from here.

You need to include some third-party libraries such as CometChat JS SDK, Uuid, Validator via CDN because you are building the Javascript chat app. Therefore, npm should not be used here. You need to add those libraries for some reasons:

  • CometChat JS SDK: help us to integrate CometChat to the Javascript app. On the other hand, you need to use some other functionalities from CometChat such as registering a new user, letting the user log in to CometChat, or letting the user log out from CometChat.
  • UUID: each created user should have a unique id. Hence, the UUID library is used to generate a unique key for each account.
  • Validator: it is used to validate the login/sign-up form. Because you need to ensure that the input information is valid before creating a new account or letting a user log in to the chat application.

Besides using third-party libraries, you need to build some files to handle the logic for the Tinder clone such as auth.js, config.js, util.js, login.js. Config.js were mentioned in the above sections. We will discuss auth.js, util.js, and login.js in the following parts.

The Auth.js File

According to the requirements of the Tinder clone, the application needs to provide a way for users to login in and have a short profile. After the user has logged in to the application, the user cannot go back to the login page. On the other hand, if the user has not signed in to the application, the user cannot go to the home page. We need to define a solution to handle this case. Therefore, auth.js will be created to help us achieve that. The full source code can be found from here.

After the user has been logged in to the system, we will store the user’s information in the local storage. We will get the authenticated user from the local storage. Auth.js will be used on both the login page and the home page. It means that this file will be executed first before other actions. This file will take responsibility for checking the current user has logged in, or not. If the user has not logged in to the application, the user would be redirected to the login page. Otherwise, if the current user has logged in to the app, the user cannot go back to the login page.

The Util.js File

Some functionalities can be used across pages of the Javascript chat app such as showing or hiding the loading indicator or get the information of the authenticated user. To avoid duplicated code, you should store all common functionalities in a single file, and in this case, this file is called “util.js”. The full source code can found here.

The Login.js File

node js tinder clone sign upp

The file will take responsibility for handling the business logic for the login page. This file contains functions which can let the user register a new account or log in to the application. The full source code can be found from here.

After clicking the sign-up button, the “registerNewAccount” function will be triggered. It accepts a JSON object as a parameter and the JSON object contains the user’s information including the user’s email, user’s password, user’s avatar, user’s age, user’s gender, and user’s full name. Before proceeding with further actions, the user’s information needs to be validated by using the “validateNewAccount” function. If the information is valid, a new account will be created by calling the create user API. After that, the application registers an account on CometChat by using the CometChat JS SDK. You can refer to the below code snippet for more information.

To log in to the Tinder clone, the user needs to click on the “Login” button. The below code snippet describes how to handle the business logic for the sign-in feature. the user’s credentials will be taken from the input elements first and the application validates that information. If the input information is valid, the application will let the user sign in by using the Login API. Aside from that, the authenticated user will be redirected to the home page.

https://gist.github.com/hieptl/87c88870b656f358dbc9a685bd897d86

The Home Page

node js tinder clone home page

After the user has logged in to the application, the user will be redirected to the home page and on this page, you will use CometChat JS SDK to build the application. To create the home page, you need to follow the below steps:

  • Step 1: Create index.html file in your project folder. The full source code can be found here.

As you can see on the code snippet above, you need to include the CometChat JS SDK from the CDN because we want to integrate the chat feature, and voice/video calling in the Tinder clone. Following that, jQuery, and jQuery mobile are also added to create the swipe effect. Moreover, the “toastr” library will be included to show the notification in the application. You also need to include some common files, which were mentioned in the above sections, such as auth.js, config.js, util.js. The index.js file will be discussed in the following part.

The Index.js File

This file will take responsibility for showing greeting to the authenticated user on the header, showing the list of recommended users including the swipe effects, showing the list of friends, creating a match request, accepting the matching requests, handling the logic when clicking on the “Logout” button and integrating the chat feature and voice/video calling. The full source code can be found here.

The Header

node js tinder clone header

We need to show greeting to the authenticated user on the header. To achieve that, we will get the information of the authenticated user from the local storage and then display that information on the header.

The Recommended Users

tinder clone node js user

We are building a dating site. Therefore, we need to show the list of recommended users to the current user. As mentioned before, the list of recommended users should not have any matching requests with the current user. Following that, the gender of each user should be opposite to the current user’s gender. To get the list of recommended users, we need to call the recommend user API. You can refer to the code snippet below for more information.

Moreover, we need to handle the events when the user clicks on the heart icon or the cross icon, or swipe the suggested user’s profile to left/right. the “swipeRight” and “swipeLeft” functions will help us to achieve the swipe effect when the user swipes the suggested profiles to left/right.

Following that, after swiping right, the application will create a matching request. If both of them accept each other. It means that the status of the match request is approved. We will call the “addFriend” function. The “addFriend” function will take responsibility for creating a new friendship on the CometChat service.

Following that, we will show a toast message and call the “sendNotification” function. To receive the notification in real-time, we will create the “listenForNotifications” function and then call it from the beginning.

Following that, the custom type for the notification needs to be specified and in this case, it is “match”. It means that whenever a new notification is coming with the “match” type, the application needs to display the notification on the UI to inform the end-user about he/she has been matched with someone. 

It will help us to increase the user experience of the application. You can refer to the below image and code snippet for more information.

The Matched Users List

To show the list of matched users for the current user, we need to call the CometChat API. You can refer to the code snippet below for more information.

The Chat Box

When the user selects any items from the matched users. The chatbox will be opened with support from the “openChatBox” function. Aside from that, the “loadMessages” function will be called to fetch the past messages. The “listenForMessages” function will be triggered to ensure that the current user will receive the messages from other users in real-time. To send the input message or make a call between different users, we will get support from the CometChat JS SDK.

Your can refer to the below code snippet for more information.

Furthermore, to increase the user experience of the application, we need to show a toast message when there is a new coming message. Therefore, the user will know about there is a new message from another user. In order to achieve that, we need to call the “sendNotification” function, and to receive the notification in real-time, the “listenForNotification” will be called from the beginning. You can refer to the below UI for more information.

We also need to create a way to let the user make a audio call or video call. To achieve that features, you need to follow the guidelines from the CometChat documentation. You can refer to the below code snippet for more information.

The Logout Button

To logout from the system, the user needs to click on the “exit” icon. We will call the logout function from the CometChat JS SDK and then the authenticated information will be cleared from the local storage.

Wrapping Up

We have done an amazing job in developing a dating site by leveraging Node.js, and CometChat JS SDK. You’ve been introduced to the chemistry behind the Tinder clone and how the CometChat JS SDK makes chat applications buildable.

You have seen how to integrate most of the CometChat functionalities such as texting and real-time messaging. I hope you enjoyed this tutorial and that you were able to successfully build the Tinder clone. It's time to get busy and build other related applications with the skills you have gotten from this tutorial. You can start building your chat app for free by signing up to the cometchat dashboard here.

About the Author

Hiep Le is a software engineer. He takes a huge interest in building software products and is a full-time software engineer. Most of his work is focused on one thing - to help people learn.

Related Posts

No items found.
No items found.

Try Us for Free 

For as Long as You Like!