This tutorial is outdated. We're currently working on an updated version. In the meantime, for instructions on building a chat app using CometChat, please visit our documentation.
Have you ever wondered how messaging apps work? Such as how you can send a message to another user on Facebook or your favorite social media app? Good news! I am going to show you how to build your own social networking site that will serve as a basic Facebook React clone!
In this tutorial, you will learn how to create a React app from scratch that will serve as a basic Facebook clone complete with messaging capabilities. We will be utilizing some of the features provided by CometChat.
Prerequisites
To complete this tutorial you will need some basic coding skills:
Access and knowledge of any text editor (such as Atom or Visual Studio Code)
A terminal
General knowledge of React and JavaScript
Material UI
Firebase
Step 1: Creating your React App
To get started with our app we need to, well, create our app. To do so we will use the create-react-app command using npx. I’m going to call this app fb-clone so I will run the following command in my terminal; npx create-react-app fb-clone After you run this command you will find a folder called fb-clone which is the name we passed to create-react-app. I will now cd into that folder by typing cd fb-clone.
Step 2: Install Material UI
Next, I’ll be installing Material-UI which is what we’ll be using to style our components. In your terminal, run npm install @material-ui/core --save we will also need the icons package so to install that we will run a similar command in our terminal npm install @material-ui/icons --save.
Note: If you want to install this globally you can add the -g flag like so: npm install -g @material-ui/icons --save. Once these are installed we can import them to any of our components which will be very useful when it comes to styling and adding icons. Installed these packages allows us to import components and icons into our react application.
Step 3: Firebase
The next step to prepare our app is to set up our serverless Firebase backend. We will be using Firebase to handle our user authentication and store our app data. Let’s head on over to Firebase and create a new app. Note: You can use your Google account information to log in to Firebase.
Once you have logged in to Firebase, create a new project and name it something like “fb-clone”. Once you have created the project you can then add apps to it and that’s exactly what our next step is. To create a new app associated with the project you just created, you will go into the project, click the “+ App app” and select the “web” option. This will provide us with the app credentials.
You will now see “SDK setup and configuration” in the general settings section. Click the config radio button and copy the code that is generated. Now go back to your react app and within the src directory add a file called app.config.js and copy the code from the firebase console to that file and save. In your terminal, run npm install --save firebase Your app.config.js should look something like this, except the values will be that of your project.
Firebase Authentication
Firebase comes with the ability to manage user authentication and state. We are going to take advantage of this. In your Firebase project on the left sidebar menu and click “authentication” and let’s click the “Sign-in method”. Here you will see all the possible authentication methods. In this app, I’d like to use the Google sign-in method. So let’s enable that.
Initializing the database
We will be using Firebase’s Firestore database. This is a No-SQL cloud database. In your project’s sidebar, let’s click “Firestore Database” so that we can create a collection for “posts”. A post should have the following attributes. image message profilePic timestamp and username. Once you create your post collection it should look something like this:
To continue configuring our database we will create a firebase.js file with the following code. You will find the values for these files in your Firebase projects settings.
Step 4: CometChat Setup
As mentioned in the introduction we will be using features and solutions provided by CometChat. First, we will need to create an account on CometChat’s signup page. Once you have registered you can create a new app and you will be given some credentials, APPID, Region, and Auth Key. Copy these values and place them in your project’s app.config.js file.
Installing CometChat
To install the CometChat required dependencies to your React app you’ll need to run the following command npm install @cometchat-pro/chat@latest --save
Installing the CometChat React UI Kit
We will be using the CometChat React UI Kit since we are building our app with React. CometChat has UI kits for many frameworks and you can find them here. We will start by cloning the CometChat React UI Kit by running the following in your terminal git clone and move the CometChat Workspace into your react apps src folder.
Next, you will need to install the dependencies from the CometChat’s package.json into your project, you can copy the dependencies from the CometChat package.json into the package.json of your react app and run npm install Note: it is only necessary to copy the dependencies from the package.json, not the entire package.json.
Step 5: Components
Index
Now let’s connect our React app to our CometChat app. Inside of your index.js file replace the code that you currently have with the below code:
Now we will head over to App.js and set up our router.
Now, were are ready to get started with some of our components that will make up our Facebook app! The first component I’m going to build is the Header.js component. This component should be created within the src directory. Pro tip: If you are using VS Code and you have ReactJs Code Snippets installed you can use their shortcuts to create your components.
When I'm building an app I like to create the component then immediately create the CSS file that relates to that component. So, in this case, I will also create a file called Header.css and import that file into our Header.js file. The purpose of these files is to create the header of our application and then to style the header of our application. Let's see what that will look like. There will be three sections of the header, they are: left, center and right. Take a look below to see what Header.js and Header.css should look like.
As you can see here there are quite a bit of imports but don’t let that scare you. Most of these imports are for the icons that we are using from Material-UI so that we can have access to those in our header.
Sidebar
When you log in to Facebook you see a sidebar on the left-hand side that houses items such as Friends, Events, Groups, Marketplace and watch. We will build that component now.
The majority of the imports here are for the icons that we need.
SidebarRow
You may have noticed in Sidebar.js that we were rendering a component SidebarRow.js This component allows us to create multiple rows so that we can create each of the sidebar items we mentioned earlier. This component will need access to props but instead of getting access to all of the props, we will take advantage of what is called destructuring and only grab the props that we need. In this case, we need src, Icon, and title.
Feed
The purpose of the Feed component is to show your Facebook friends and render the component responsible for the MessageSender component that handles the input for making a post. You will notice some components imported and rendered here that we haven’t yet discussed but don’t worry, we will get to those soon.
Now, let’s take a look at Feed.css so we can provide the styling needed for the Feed component.
Message Sender
I mentioned there was some components imported and rendered in the Feed component that we have not yet discussed, lets get to those now. The first of which is the MessageSender.js component. This component handles the input fields for making a new post. You may also notice that we are again taking advantage of the Material-UI icons.
Following our process of creating a component and created a CSS file associated with it, we will now create a file called MessageSender.css see below for the styling needed for the MessageSender component.
Story Reel
The next component that we need within the Feed component is StoryReel this component is responsible for showing our friends’ stories. It will render multiple stories side by side.
Next comes the CSS file! This one is short and sweet.
Post
Next is Post, which is one of the main features of using Facebook. This component will need access to props but instead of getting access to all of the props we will again, take advantage of destructuring and only grab the props that we need. In this case, we need profilePic, image, username, timestamp, and message.
Story
This component will need access to the image, profileSrc, and title props.
Login
Now we need to create a Login.js component to handle the login process. Here we created a signIn function that takes in the provider that we created in our firebase.js within the function we are logging any errors in the event there is an issue with the user logging in, we want to know what the error message is.
Conclusion
If everything went well you should be able to start up your server, head over to localhost:3000, and see our beautiful Facebook react clone app in action. I’m hopeful that with this tutorial you were able to build your own social medial clone app with real-time chatting capabilities and since we used Firebase, no backend coding is required!
We have configured a new Firebase project, added No-SQL data, authenticated our users with Google, set up real-time chat solutions. I hope this tutorial was helpful to you and as always, check out CometChat’s documentation here. Also, the source code for this build is located on GitHub.
About the Author
Randy is a Fullstack Developer based in Cincinnati, Ohio. He completed Flatiron Schools Software Engineering Program. He has a passion for frontend development. You can learn more about him here and follow him on Twitter, Dev.to and GitHub.
Randy Steele
CometChat
