Tik-Tok MERN Stack: The Ultimate Guide (Firebase, Mongo DB, Heroku)

Published in

Clever Programmer

23 min readSep 30, 2020

The Tik-Tok MERN stack was a part of clever programmer’s live video in which they made full working web app of Tik Tok clone.

Let me first make you clear about the fact what do you mean by MERN stack so here M stands for mongoDB, E stands for Express, R stands for ReactJS and N for Node.js . This Tiktok clone will be very helpful to you in both the ways either adding it to your portfolio for getting a job.

In this article, we will go in depth and make the Tik-Tok Clone using React. We will also be using Firebase for Hosting, Mongo for Database and Heruko for backend. Firebase is a great tool to get started with projects quickly. We will also be using HTML, CSS. Please keep in mind, you need to have Visual Studio Code and NodeJS installed.

Are you pumped? LET’S GOOOOO 🔥 🚀

To get started let’s make a new folder named Tik-Tok MERN and open it. As soon as you are in the folder, right click and select Open With Code

After you click Open with Code you’ll see a huge weird window. Don’t worry we got you covered. This is what you might be seeing:

So Visual Studio Code is the Code Editor we are going to use, this is what professionals mostly use, but this is more of a personal preference. You can use Atom or any other editor too, but Visual Studio Code makes your life easier.

Now that in you are in Visual Studio Code, Press Ctrl + J (on Windows) and Command + J (on Mac) and you should see a terminal window at the bottom just like shown below.

Don’t freak out, this is just a regular terminal, we are not hacking anything 😆

Now that you’re in the terminal, we can now install and setup React app. And this is usually a headache when doing manually. So Facebook, the creator of React made a script which installs and sets up React for you without any type of headache.

To use this script, just type the following in the terminal and press Enter. This will take time so till then you can read what the script actually does below.

npx create-react-app

Here’s how this works. npx is a part of npm (Node Package Manager) except npx runs a remote script instead of installing it locally. This is done so that you always have the latest version of React installed in your project. create-react-app is the name of the remote script and “.” specifies that we want the script to make a React project in the SAME FOLDER and not make a new folder for it, if you had to make a new folder name, you could just provide the name of folder instead of “.” and it would make a folder for you.

You know that it is finished when you see “Happy Hacking” on your terminal. If you see this, we are ready to move on.

Now that we have our React App installed, now we can start it. In the terminal type the following command. This command will start the React App.

npm start

After you hit Enter, you should see your default browser open. Although I suggest Google Chrome because of it’s development tools making life easier, it’s still your personal preference, but we cannot guarantee development quality with other browsers.

If you did everything correct, you must see the following screen on your browser window.

If you do not see the browser tab open

http://localhost:3000

then go to above URL or even better, I’ve something for you. This will take you to your app.

This is the Welcome screen of React. But we want to build an Tik-Tok Clone, so we need to clean up our React project a bit so that we can get started with the Tik-Tok clone.

Delete (optional) three files from the src folder from the React App. Those three files are

App.test.js
logo.svg
setupTests.js

We are deleting these files because these are not relevant to us in any project.

That’s not all, if you check the browser window now, I know what you’re seeing, do not freak out, we have the solution, go to App.js and remove the following line from code.

import logo from “./logo.svg”;

Also remove everything under the first <div> element from your App.js file. You’re code should look like the following:

import React from “react”;
import “./App.css”;function App() { 
   return <div className=”app”>React App</div>;
 }export default App;

Now let’s cleanup the CSS files a bit.

Go to App.css and remove all the contents of your file.

Now go to index.css and add this piece of code on the top. And look at the change on the app. What do you see?

*{
 margin: 0;
 padding: 0;
}

This will get rid of the margin and padding of the page.

Now we have our React project perfectly set up. Now we can start making the Tik-Tok Clone. LET’S GOOO 🔥🚀

1. Deducing the clone into an Organised manner

So now as we are fully setup we need to think how we are going to run a project in a way that it is going to be most effective and cleanest code of all.

So now let’s think what we have in a Tiktok.?

So basically we have a full video on the screen and we have a footer at bottom and a sidebar on the side of the screen.

So now let’s deduce it even more further, now if we start looking at the footer we see 3 things, first the name of the user, second caption and third the name of the song.

Looking at the side bar we have three icons: first is heart, second is messages and third is number of shares.

So now we know how we have to keep our components in an organised manner so let’s get into coding.

→ Let’s start coding ←

Let’s start with editing app.js. At first we will write some dummy content so that we know in our web app that it is running.

If your app is returning properly till now that means your good to go.

So now we will make a <Video> component because we want more than one videos in our Tiktok clone.

And that’s not it you have to go into your src folder and create video.js file and video.css file. Once you are done with that. Let’s set up our video.js file.

Which must be looking like this

And oh yes, do not forget to import video.css file.

As soon as you set up video.JS file, now you need to place a video in the <div> section so that it can show your video on the screen.

Your video component which is inbuilt in React library, it will automatically make your life easier to import a video in your web app.

You must be seeing a video popping on your window.

Now don’t scratch your head if you do not see it because we have not edited our App.css file.

As soon as we will edit App.CSS file you will start seeing this video in a format of Tik Tok videos.

You must be seeing the video in a way you see in your Tik-Tik app.

But what make Tiktok video so special?

Its repeated running loop videos. But also one thing. Whenever we swipe to next video we do not stop in between we are either in a previous video on next video, Right?

So now let’s get into it and make it work.

By doing this you must be same your video at a fixed place but still the videos are not coming into right position when we scroll it.

So let’s add scroll functionality in app.CSS file.

Now if you try to scroll your video, you will only be stopped at a video not in between. Am I right?

Here, We need to do very important step, which is we need to run our video in an infinite loop. Which can be played and paused by click only. Let’s dive into it.

Now if you do not have idea about react hooks then let me explain it to you. We have used to measure react hooks here useRef and useState:

So the use of useRef here is is that whenever with put a reference on any of the component, then all the games are played around that component only. So if here we want our video to pause and play, then we will put the useRef at the onClick of the video component. Here in the code videoRef is a variable name to useRef react hook.
Now let’s talk about useState, as you can see we have two elements in an array of you state first is play and second is setPlay, so the work of useState here is we are initially declaring the state of play as false and further in the code if we click on the video we are resetting the state of play to true using setPlay. This is usually done because we need to know the previous command of onClick props of video element.

If you are able to do it completely right with me and your app is running without any error then do a little dance and enjoy because we are moving to our next step.

Ok, we have come so far now, so do not stop here and let’s move further.
I am sooooo Excited, Aren’t you, yeah. Let’s GOOOOO🚀🚀🚀🚀

Now let’s get into the footer of a video you are seen on your web browser or you can say web app.

Let’s get into basic and start by by making VideoFooter.js file and VideoFooter.css file inside the src folder of your Tiktok clone.

Once you have done that lets start setting up up our VideoFooter.js

We have talked about this earlier also, in this file we need to define three elements in such a way that it will show three things in the best format over the video.

Let’s talk about what are the three things which you want in our footer.:

First the username, second description and last name of the song.
You must have noticed one thing about the sound it does not stay still on the video but it moves from left to right over and over again for that we need to use third party library named as react-ticker.

To install react-ticker. Open your terminal again and run this command.

npm i react-ticker

Once you are done with the installation you can move forward for the coding.

Now if your website is not looking as you thought it would be, then do not panic because we have not designed it yet. So let’s get it over with.

After looking into our CSS file if you are getting confused by word Keyframes. Then let me explain it to you. Keyframes here has giving us the power to do animations on an image.
So the revolving disk which you are looking at, at the right bottom of that video is the magic of Keyframes only.

Now as we are done with designing our fotter, let’s make our code More clean

To do so we are going to use props,
So if you do not know what props. Let me give you a little brief about it.
Props is something which we define with the the custom or inbuilt component inside the tag. And this specific task is done in the parent component, if we need to use this props in child component then we write the same name of the props which used to define in the parent file with the component inside the tag.
So as you can see in the code where we have started our main function videoFooter you see the brackets (), this brackets automatically pass props as an argument. So now as our #ReactPapa said we are going to de-structure it and pass those props inside these brackets.

Ok beautiful people, I hope you guys understood what I just wrote for you. So now, let’s complete the awesome Tik-Tok APP🔥

Parent file — Video.js (Just focus on VideoFooter component)

Child file — VideoFooter.js

Ok, website is looking good and clean now. LET’S Go

Now let’s get started with the sidebar component, so we will go to to video.js file and mein <VideoSideBar. component after <videoFooter>.

So now let’s first we will make VideoSidebar.js and VideoSidebar.css file in src component.

Once you are done with that let’s set up power JS file.

As we Think about video sidebar file, we have use of three buttons which are likes messages and shares.

So to do that we are again going to use third party library known as material UI.

To set up material UI into your project open your terminal and write these command.

npm install @material-ui/core&&npm install @material-ui/icons

To take reference please check here.

As soon as the installation complete we are going to to improve the the icons which we want to use an our website. Let’s dive into it.

Now as our icons are set. We want death when we click on like button it increases by 1 so to do that we are going to play with useState and make it work. So let’s get our hands dirty.

Please pay attention and look carefully at the code.

Once you understand the code totally, let’s give this sidebar some configuration.

Now again we need to take care of something which we did before tips to take care of Clean Code so to do that we are going to use proprs and take our data from parent.

If you do not understand the meaning of or the use of props please scroll up and read about props.

Now if we have tried to keep our code so clean, so now let’s try to do that again with video.JS file.

We are going to use the same approach which we have used till now. We are going define the props in the parent component that is <Video> in App JS file. And then we are going to pass dost props inside the video JS file.

As I told you earlier to use the props we are going to use the main function’s argument and destructure it and pass the props Inside it.

App.js :

Video.js

Ok now you can sit back and relax. You have completed your app.
I hope you guys are still pumped up.🚀⭐️
Becuase now is the time to start making your Back-end.

2. Now let’s start with Setting up our FIREBASE🔥

So let’s prepare our database and authentication before we even work on them. We will be using Firebase. Go to https://firebase.google.com and log into your Google account.

Now let’s see how do you set up your project. Once you’re in the Firebase console, follow the following steps.

Click on “Add Project”

Give your project a name, it can be any name!

It doesn’t matter if you turn on Google Analytics for the project, it will make no difference. But in this case, we will just enable it.

Once you see the below image, your Firebase project is created. Click on continue.

Well done! Now let’s set this project up according to our needs.

From the right panel, select Cloud Firestore
The Cloud Firestore is the database for Firebase.
Click on Create Database.
Select Start in Test Mode.
Click Enable and wait for Google to provision you Cloud Firestore.
Your database is made.

Let’s now set up authentication!

Select Authentication from the side panel.
Select Set up sign-in method.
Click on the pencil icon near Email/Password

Enable it and click on Save.

Now click on Settings icon on the side panel and select Project Settings so that we can setup this Firebase project with our React project.

Click on the third icon (Web) at the bottom

Enter the project name and remember to select Also setup Firebase Hosting.

Hit Next until you’re back into your Firebase project.
Now, let’s go back to the React app to install dependencies named firebase and firebase-tools

npm install -g firebase-tools&&npm install firebase && firebase login

This will install both the dependencies for you. Also it will ask you to log into your Google Account so that you can use Firebase tools. In the mean time let’s go back to Firebase, and select the config option.

Copy the entire config and then go back to Visual Studio Code, inside src folder make a new file named firebase.js and paste it.
Let’s make the use of the firebase package we just installed through npm and let’s edit the firebase.js file so that we can use authentication and the database from your project.
Remember to use your own config with this!
In this code, we initialize a Firebase app with the config.
We get database and authentication from your Firebase Project and export these objects so that we can use them anywhere.

That’s all with the setup for Firebase! Now let’s go ahead and setup authentication for this beautiful Tik-Tok Clone.

I hope you’re still pumped because we have some interesting juicy stuff coming up soon! LET’S GOOOO 🔥 🚀

→ Let’s understand what’s Backend ←

Once talking about the project you need to understand it carefully that we need a place where we can store the data.
Because it is not a good approach if we will Store our data in the app.
If we do so we are going to have a major setback which is, after deploying our app, it will be too heavy.
And by this word heavy, you are able to understand that how much time will our app take to load. Not just in the local host but after putting into domain too.
And if our app is taking more than usual limited time it is it a bad User experience and we never want that.

In order to avoid this we are going to store our data into to mongoDB. It is a database wireframe application where we can make our free account and use it for our test project.

Express.js

Express.js is a modular web framework for Node.js. It is used for easier creation of web applications and services.
Express.js simplifies development and makes it easier to write secure, modular and fast applications.
It’s a web framework that let’s you structure a web application to handle multiple different http requests at a specific url.
Express is a minimal, open source and flexible Node. js web app framework designed to make developing websites, web apps, & API’s much easier.

Nodemon

Nodemon is a utility that will monitor for any changes in your source and automatically restart our server. Perfect for development.
We are going to Install it using npm. And will just use nodemon instead of node to run our code, and now our process will automatically restart when our code changes.

Hey guys I hope you understand everything , so now let’s proceed further. I hope you guys are still pumped up because we are going to dive in the backend

→ Installation of Backend in our code ←

At first we’re going to to make a separate folder with the name of Tik Tok backend.

To be specific this folder will be outside of your Tiktok clone folder.

Note for easy understanding just make a different folder name it Tik Tok MERN. And put those two folder inside it.

Now go to your terminal and write this command

cd Tik-Tok Backend

This line ensures that you are inside Tik Tok backend folder. &&

npm init

While you will do npm init you will be asked to fill some gaps, in those gaps be sure to write server.js for “main”. Other than that press return for everything and hit enter(yes) at the last question.

This will download package.JSON inside to your backend folder.

Once you are inside the backend folder we are going to to install mongoose Express and nodemon.

npm install mongoose Express nodemon

Within a minute you will see all those packages getting installed inside package.JSON file.

Now go inside package.json file and these two lines:

“start”: “node server.js” (inside scripts)“type”: “module”,

→Let’s Setup MongoDB:

To setUp your account Click Here: MongoDB Setup

Once you login you’ll see this page. Accept the terms and click on Submit.

After clicking on Submit, click on “Create an Organisation”.
And then write the name of your organisation and go to bottom and click next,
If you do not want to add any other member, directly click on button “Create Organisation”.

Click on New Project. And give the name to your project.
Again, if you do not want to add members or permission click on button “Create Project”.

Now as you see network access on the left side under security, click on that and click on add IP address.

NOTE:

It is important to know that we have to option here, we can either click on allow access from anywhere or add current IP address.
Clicking on allow access from anywhere is not secure and can be accessed by anyone so we do not preffer this one.
Clicking on at add current IP address will add your IP address as a default and then it will only be accessed bye you will be on this network. And if you will be on the other network and still trying to access it, mongoDB with throw error and will not allow you to run your database.

So click on whatever you think is best for you and click on submit.

Now click on Database access and Click on add new database user.
Now you will see to 2 inputs one for new user and one for password so give a username and give your password and remember your password. For later use.
And click on add user.

Now click on clusters and click on build a clusters.
You already gave the name of organisation and project if you want to change it you can or just click on continue.
In the next step you will see three options shared clusters, dedicated clusters, dedicated multi region clusters,
Choose the shared clusters which is free, and click on create a cluster.

Now you will see a new screen in which it will be showing a w s and there will be some recommended region choose whatever you want to you it doesn’t matter and if you have any choice you can go with that.
Click on Create Cluster
Once you click on kit plus the it will take some time to create your cluster so have some water and stretch in that time if you want.
After the successful proceed you will see this page,

Click on connect.
And you’ll see this page pop up, click on choose a connection method.
And then copy the application code.

With that said you are completed with the installation for it, for now keep this URL copied at a safe place.

→Download POSTMAN

Postman is a software development tool. It enables people to test calls to APIs. Postman users enter data. The data is sent to a special web server address. Typically, information is returned, which Postman presents to the user.

To download postman Click Here: Postman Website.

Once you are done with the postman. let’s get back to our coding Junction

Are you guys still pumped up to complete the APP.?
Because I am. So keep the energy up.

→ Setting up Server.js:

Go to your Tik Tok backend folder and create A file server.js
After going into server JS file we are going to import Express and mongoose.
After importing, we are going to to create an instance of Express.
Now we need to run this server at a localhost. So so we will define a localhost with the variable name of port.
In the next step we are going to, put a get request from server that if our server is running properly then send ‘hello world’.
Incase if we catch any error and a local host does not work then we want it to reflect on a terminal, so we will allow our express instance to listen and reflect it on terminal

After doing this much open your terminal and run

nodemon server.js

After running this cmd your terminal will look like something this.

Now to be totally sure we will go to our web browser and run:

localhost:9000

After running is on the browser you will see “hello world” on your web page.

So with that said our database has been set up so now let’s push some dummy data into out database.

To push dummy data into a database we are going to create a data.JS file inside our backend folder.

So now we are going to to make an API call to get our dummy data into the get API call. For that,
We will import Data.js file into our server.js file, your server.js file must look like this,

Now to check ok if all your data which you passed into data JS file, is coming to the the specific get call on Path you mentioned that is “localhost:3000/v1/posts”.
You can open your postman write this localhost path under untitled request. And click on send,
After clicking on send you will see all your dummy data at the bottom of the postman

If you are getting dummy data on the postman, congratulations you are on the verge of completing your Tik-Tok clone web app.

→ Now let’s connect our backend with mongoDB ←

So in order to connect other backend with mongo DB we need to use the URL which we earlier saved from mongo DB. Get that pop up in your server JS file. It should look something like this:

mongodb+srv://<username>:<password>@cluster0.r5mpn.mongodb.net/<dbname>?retryWrites=true&w=majority

here you see three empty tags which you need to fill:

1.<username>

2.<password>

3.<dbname>

Now write the user which you wrote back in the MangoDB, write the exact similar password which you wrote in the MongoDB database access. And at last write the the name of database you want to to keep, or you kept.

Open your server.JS file and right these lines after imports:

Now one of the major question arises here how will mongoDB automaically know, that what kind of data you are sending to the database.??? How?

The answer is NO, it will not automatically detect the kind of data we are sending.

To make sure that the data we are sending is properly transferring to mongoDB, is through schema.

So now will create dbmodel.JS file, inside the backend folder, to pass on the schema of our data.

Once we define our schema we will need to import this file into server.JS file.

Now as we are making a connection with our database we need to to do an API call which will ensure that the connection between database and our project is successfully happening.

So now we will put a post API call and request the database for our data post it.

Now if you’ll go to postman and try to to run the the API path you will see the data get and post body.

localhost:9000/v2/posts

localhost:9000/v2/posts

Now to get this path running on the postman first you need to change get into post then just below it there are 7 options in which we have to select body.
After selecting body you need to select RAW, and configuration JSON.

→ Then under that you need to to pass your data which passed into to data.JS file here as JSON.

And this post request with push your this specific data into your database. For surety you can go and login into mongo DB.

Under clusters select collections and you will see this data.

→Now, let’s deploy our TIK-TOK Backend:

→ Installation of heroku:

For the Signup Click here: Heroku SignUp Page

After you complete sining a with Heroku, you will find yourself on the first introduction page. On top right you will see a button new click on it select New app.

Enter the app name and select your country, after that click on create app.

Once you are through that you will be re-directed to deploy page.
There you’ll find a link to download and install the heroku CLI

Now you need to install the heroku CLI. So if you are using Windows use Windows link, if you are using Mac using MacOs link and reference to others.

Once you have downloaded the herokuCLi, you need to to do the Commands which are are written on the deploy page of heroku.

Do not forget to enter into backend folder first and then open your terminal and run these commands.

heroku login&&git init&&heroku git:remote -a your-project-name&&git add .&&git commit -am “make it better”&&git push heroku master&&heroku run start

As soon as all the Commands will be successfully executed give back and will be deployed.

Hurrah.!!! 😃 😁 🥳 (The backend is deployed)

→ Now let’s connect the frontend with backend←

Now we will exit from our backend folder. And will enter again to a frontend folder.
Open your terminal and run,

npm i axios

While the package gets installed let’s create axios.js inside src folder of a Tiktok clone.

Now let’s setup the folder:

We will pass the url which we are going to get from Heroku, in the baseURL of axios.

Path to the url: Heroku Page →settings →Domains →URL

And copy That: your app can be found at “link”

The URL will be used in axios.js file of Tik-Tok Clone(frontend).

Now let’s pass everything which is coming from database to App.js file and use it as a props, Which will automatically let all the child components use it’s data.

Pass the axios file into App.js file.

Your App.js file Must look like this.

And YAYY, your have the data directly coming from deployed Backend. HURRAY
Let’s celebrate.
Are you pumped or low on energy, Let’s Gooooo.🚀🚀🚀🚀🚀

→ Deploying our Tik-Tok Clone FrontEnd ←

To deploy a production version of the Tik-Tok Clone, we need to set up Firebase hosting. So let’s go to console and type the command:

firebase init

Select to use an existing project
Type in the public directory to be “build”
Allow to rewrite all URLs to index.html

After you do this, run in the console:

npm run build

This will basically ask React to build your app so that you can run this in production. After the build has completed, type this command to finally deploy the application on the internet!

firebase deploy

Once you’ve completed this, you should get an URL at the end of the process. This is the URL where your app is hosted online.

Congrats you just deployed your Tik-Tok Clone on Firebase Hosting!!