Twitter Clone using ReactJS — The Ultimate Guide

Twitter is a social networking platform where people can express their thoughts in short posts which people can read and share! Today, we are going to make a Twitter Clone using React JS in the frontend along with Firebase!

We will be using Firebase Firestore as a database and we will be using Firebase Hosting to bring our clone live on the internet. We will have the ability to post along with Images. We will also be fetching real twitter posts for a section in our Clone application. So let’s get started!

1. Creating a React App

To get started let’s make a new folder named twitter-clone 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:

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 Amazon Clone, so we need to clean up our React project a bit so that we can get started with the Amazon 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.

2. Setting up the main layout

Before we get right into the various elements of our Twitter Clone, let’s first setup the main layout so that we have the colors and other important stuff in our main CSS file.

So let’s go into our App.css and have the following CSS and let’s see what’s happening over there.

Here we have set basic flex properties to our app class. And we have defined some colors in variable in CSS. Those are twitter-color and twitter-background.

Now we are going to work with 3 components, which are

• Sidebar
• Feed
• Widgets

So let’s start with Sidebar. Let’s make a new component. We will be following the BEM convention. To do that we need to make a file named Sidebar.js and a file named Sidebar.css and use the snippet key rfce to create a new component and set the <div> element of the component to have a class name of the component name, in this case being, sidebar.

3. Creating the Sidebar

So we now have the component ready, we have one more component under Sidebar which we will need. That component is SidebarOption. So let’s make a component using the BEM Convention.

Here is how your SidebarOption component should look like

And here’s the styling for the component!

Now let’s get back to the main Sidebar component.

Here’s the layout or the Sidebar Component.

And you need to install Material UI in order to use these icons, so let’s install them, let’s go to terminal and run this command.

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

It might take a while, let’s take care of the CSS till then!

And we are pretty much done with the Sidebar component! Now let’s go ahead and set up Firebase Database!

6. Setting up 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.

• Now you need to select Cloud Firestore and enable it! Make sure you enable it in Test Mode!
• Now go to your project settings and copy the config! It will look like this

Once you’ve copied that, go to your Visual Studio Code and create a file named firebase.js and paste the config. Then we need to set up the database, so your firebase.js should now look like this.

Once you have it done, you are ready to use Firebase DB. Now let’s go ahead and make the Feed component. Follow the BEM convention and you should be good to start with this component.

4. Feed Component

The feed component has two subcomponents that we need to make before making the layout of the actual Feed component. So here are the subcomponents we need.

• TweetBox
• Post

So let’s start with the TweetBox component. You know the drill, follow the BEM Convention and make the TweetBox component. Now let’s start making the TweetBox component!

Before we get into how this works, let’s see the styles for this component.

Now let’s see what’s going on in this component.

• We collect the Tweet Message and the image URL in the state
• On press of the tweet button, we use the db object to access the required collection and save the data to the database.
• We have an object which is hardcoded which describes about our user.

Now let’s work with the Post component. Use the BEM Convention to make the component. Once the component is made, let’s make the layout of this component. It is pretty straightforward.

It’s just a layout, no specific logic to get things work. Now let’s have the styles.

Now we have the subcomponents ready for the Feed component, let’s work on the actual Feed component. If you do not have a Feed component already, make the component following the BEM Convention.

Here’s the layout of the Feed component.

And let’s look at the styles.

What we are doing in this component is, we are using useEffect to detect whenever the component loads, we are setting up the Firebase Database Snapshot listener, it updates the data in the app whenever there is some change in DB making it real time which would in return give us instant results.

We also grab the posts and save it in a state, and then map through them to render the Post component.

Now that we have the Feed component ready, we can move on to the Widgets component.

5. Widgets Component

So this is the final component which will complete our Twitter Clone! So make a component named Widgets using BEM Convention. You know the drill.

Now, in order to fetch real Twitter Tweets, we need to install a package which will let us do that. So let’s type this command in order to install the package

npm install react-twitter-embed

Once it is installed, we are ready to start making our final Widgets component. So here’s the layout of the component.

Remember, you can change the Tweet ID and username to whatever you want! Now let’s look at the styles.

So by this, our Twitter Clone is ready. Now let’s arrange them together so that we can make it look proper.

6. Arranging the Components

Let’s go to App.js and arrange the components we just made, this is quite simple and straightforward and here’s how to do it. Your App.js should look like this.

Now if you look in the browser, you can see the proper Twitter Clone we just made. Now this is the time to deploy the application.

7. Deploy to Firebase

To deploy a production version of the Twitter 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.

Congratulations you have successfully deployed your own version of Twitter Clone to Firebase Hosting!

8. What’s Next

When you are done with this clone, you might be wondering what you can do next. So here’s your answer.

Clever Programmer has a lot of clones both on the YouTube channel and also here at Medium. You can go and check them out and make some awesome projects to build up your portfolio.

That’s all for today! I’ll be back with some new article very soon, thanks!

Atharva Deosthale