How Do You Make A Twitter Clone

How Do You Make A Twitter Clone

Twitter is a social networking site where individuals can express themselves in short tweets that others can read and share! Today, we’ll create a Twitter clone using React JS in the frontend and Firebase!

We will use Firebase Fire store as a database and Firebase Hosting to make our clone available on the internet. We will be able to upload images with them. We will also collect actual Twitter posts for a part of our Clone app. So, let’s get this to move on.

  1. Building a React App

To begin, create a new folder called twitter-clone and open it. When you’re in the folder, right-click and choose Open with Code.

When you select Open with Code, you’ll be presented with a large strange window. Don’t worry, we’ve got your back. This is what you might see:

When you select Open with Code, you’ll be presented with a large strange window. Don’t worry, we’ve got your back. This is what you might see:

So Visual Studio Code is the Code Editor we’ll be using; this is what most pros use, although it’s more of a personal choice. You may use Atom or any other editor, but Visual Studio Code simplifies your life.

Now that you’re in Visual Studio Code, press Ctrl + J (on Windows) or Command + J (on Mac) to open a terminal window at the bottom, as seen below.

Don’t worry, this is just a normal terminal, and we’re not hacking anything.

Now that you’re at the console, let’s install and configure the React app. And doing this manually is typically a pain. So, Facebook, the developer of React, created a script that installs and configures React for you without any hassle.

Simply enter the following into the terminal and press Enter to utilize this script. This will take some time, so in the meanwhile, you may read about what the script does below.

  1. create-react-app

 

This is how it works. is a component of (Node Package Manager), however it executes a remote script rather than installing it locally? This is done to ensure that your project always has the most recent version of React installed. create-react-app is the name of the remote script, and “.” indicates that we want the script to create a React project in the SAME FOLDER rather than creating a new folder for it; if you needed to create a new folder, you could just provide the name of the folder instead of “.” and it would create a folder for you.

When you see “Happy Hacking” on your terminal, you know it’s done. We’re ready to move on if you notice this.

Now that we’ve installed our React App, we can run it. Enter the following command into the terminal. The React App will be launched as a result of this command

When you press the Enter key, your default browser should launch. Although I recommend Google Chrome due to its development features that make life simpler, it is still your personal choice, and we cannot guarantee development quality with other browsers.

If you followed all of the steps correctly, you should see the screen below in your browser window.

If the browser tab is not visible,

http://localhost:3000

then go to the aforementioned URL, or better yet, I have something for you. This will launch your app.

This is Reacts Welcome screen. But, since we want to create an Amazon clone, we need to tidy up our React project a little before we can start working on the Amazon clone.

Delete (optionally) three files from the React App’s sac folder. These three documents are

App.test.js

logo’s

setupTests.js

We’re removing these files since they’re irrelevant to any of our projects.

That’s not all; if you look in the browser window right now, I know what you’re seeing; don’t worry, we’ve got a solution; go to App.js and delete the following line from the code.

logo from “. /logo’s” import;

Also, in your App.js file, delete anything beneath the first element. Your code should look something like this:

import React from “react”; import “./App.css”; function App () return React App; export default App

Let’s go through the CSS files and tidy them up a little.

Remove all of the contents of your App.css file.

Now, open index.css and paste this code at the top. And have a look at how the app has changed. What do you notice?

*{

 

0 margin;

 

padding= 0

This will remove the page’s margin and padding.

Creating the primary layout

Before we get into the different components of our Twitter Clone, let’s first set up the basic layout so that the colors and other essential information are in our main CSS file.

So, let’s go into our App.css file and add the following CSS to see what happens.

In this section, we’ve added some basic flex attributes to our app class. In CSS, we’ve also specified certain colors as variables. These are twitter-color and twitter-background, respectively. We will now deal with three components, which are

Sidebar

Feed

Widgets

So, let’s begin with Sidebar. Let’s add a new component to the mix. We shall adhere to the BEM standard. To do so, create a file called Sidebar.js and a file called Sidebar.css, and then use the snippet key race to create a new component and set the element of the component to have the class name of the component name, which is sidebar in this instance.

  1. Designing the Sidebar

So now that we have the component ready, we will need one more component from the Sidebar. Sidebar Option is the component in question. So, let’s create a component using the BEM Convention.

Let’s return to the main Sidebar component.

Here’s the Sidebar Component’s layout.

And you’ll need to install Material UI to utilize these icons, so let’s get started by installing them, then going to the terminal and running this command.

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

It may take some time, so let’s take care of the CSS till then!

And we’re almost done with the Sidebar component! Let’s get started using Firebase Database!

Installing Firebase

So, before we begin working on our database and authentication, let us first prepare them. We’ll be using Firebase. Log in to your Google account at https://firebase.google.com.

Let’s have a look at how you set up your project now. Follow the instructions below once you’re in the Firebase console.

Click the “Add Project” button.

Give your project a name; it may be anything you choose!

It makes no difference whether or not you enable Google Analytics for the project. In this instance, though, we will just allow it.

Your Firebase project is complete when you see the picture below. Continue by clicking the button.

Now you must choose and activate Cloud Fire store! Make sure it’s turned on in Test Mode!

Now, go to your project’s settings and copy the configuration! It will resemble this.

After you’ve copied it, open Visual Studio Code and create a file called firebase.js, into which you’ll put the config. Then we’ll set up the database, so your firebase.js should now look something like this.

When you’re finished, you’re ready to utilize Firebase DB. Let’s get started on the Feed component. If you follow the BEM convention, you should be OK to begin with this component.

  1. Feed Components

Before we can create the layout of the Feed component, we must first create two subcomponents. So, these are the subcomponents that we need.

Tweet Box

Post

Let’s begin with the Tweet Box component. Follow the BEM Convention and create the Tweet Box component, you know the procedure. Let’s get started building the Tweet Box component!

Let’s look at the styles for this component first before we get into how it works.

Let’s have a look at what’s going on in this component.

In the state, we gather the Tweet Message and the picture URL.

We utilize the db. object to access the necessary collection and save the data to the database when we click the tweet button.

We have a hardcoded object that contains information about our user.

Let’s get started with the Post component. To create the component, follow the BEM Convention. Let’s create the layout of this component after it’s finished. It’s not difficult to understand.

It’s simply a layout; there’s no particular logic to make it function. Let’s go on to the styles.

Now that we have the subcomponents for the Feed component ready, let’s get to work on the Feed component itself. If you don’t currently have a Feed component, create one using the BEM Convention.

In this component, we use Effect to detect when the component loads, and we set up the Firebase Database Snapshot listener, which updates the data in the app whenever there is a change in the DB, making it real time and giving us immediate results.

We also collect the posts and store them in a state before mapping through them to display the Post component.

Now that we’ve completed the Feed component, we can go to the Widgets component

 

  1. Component: Widgets

So here is the last piece that will bring our Twitter Clone to life! So, using the BEM Convention, create a component called Widgets. You’re familiar with the routine.

To get actual Twitter Tweets, we need to install a program that allows us to do so. So, let’s run this command to install the software.

Install react-twitter-embed

After we’ve installed it, we’ll be able to start working on our final Widgets component. So here’s the component’s layout.

Remember, you may change your Tweet ID and username at any time! Let’s have a look at the styles now.

As a result, our Twitter Clone is complete. Now let’s put them together in the correct order.

Final Words

If you look in the browser now, you’ll see the correct Twitter Clone we just created. Now is the moment to put the ad out there.