How to Build Messenger using React : A Beginner’s Guide 🔥
This article is a guide on how to build a messaging web-app using reactjs, what are the sources that one should follow, how to setup a real time database. So, without any further ado, let’s get started !!
In this Article we won’t be talking specifically about the Facebook Messenger but the messenger in general. It can be whatsapp, facebook or any other !!
Note : This is the link to the messenger app I created is here. You can check this out, make small contributions and if you like this then can also give it a star or even fork it for your own purpose. However it is still under progress, after all its open-source
https://github.com/DhairyaBahl/React-Messenger-App
1. How Messenger App Works ??
First, app starts by taking authentication from the user i.e. its phone number, Gmail account link or some other feature like that. Then you can send message to anyone in your friends or in your contact list and it will give them the notification in their mobiles or PCs. Another thing on which we should focus on is whenever we reopen that app again, our previous messages are already stored in there and we can have a look at them ( this happens in most of chatting apps ). For this, we have to setup a database.
2. De-Buzzing Some Buzz-words !!
Database
In layman terms think of database as a virtual file each for each user having many entries like username, phone number, email, chats, images, date of joining that software and many others. All this data is stored somewhere virtually so that we can access them whenever we want !! This is how messaging app stores and shows our previous chats.
Firebase
Firebase is a tool which helps us in making web and android apps by providing many features like database, hosting service, user-authentication and many others. On top of that these features can be used very easily just by passing few commands.
Material-UI/Bootstrap
These are tools or services which are used to apply CSS to the web-app very easily just by setting-up the class-name correctly or by modifying the basic syntax a little.
create-react-app
React is created by Facebook but it has few dependencies ( like webpack ). To avoid the headache of installing each of them manually, we can use the create react app tool which is also created by Facebook which provides us everything just with one command.
NodeJS and npm
These must be installed to use the create-react-app feature. These can be downloaded from [official website](https://nodejs.org/en/).
Note: npm is automatically installed along with NodeJS.
3. Setting-up Everything
Follow these steps to set-up everything and get-started !!
- First use the command node -v in the terminal to check if the node is installed and also check the same of npm i.e. node package manager.
- Then type “npx create-react-app [app name]” in the terminal to create an app with the given app name. This process may take a while.
- Then use the command “cd [app-name]” to get in the app directory where you can make the changes.
- Then use the command “npm start” so that react app is started on the localhost.
- Then finally you can make changes in the app.js, and those changes will be reflected in the website i.e. (https://localhost:3000)
4. Basic Layout🔥
Input Box
First we have to create an input box so that we can type the message somewhere.
Submit Button with this icon ▶️
We have to setup the submit button which should display the message in the display box on clicking.
Display Box
Messages have to be displayed somewhere in some kind of display box
Database
After creating the app for local entries we have to setup a database so that all the entries can be seen next time when the app is opened again. I personally like Firestore for simple react apps.
Design
It is advisable to use Bootstrap or Material-UI with react for awesome user experience. I personally recommend material-ui although you can use any of them. You must also apply CSS in some cases to enhance the user experience.
5. Getting Started with App
In the folder where you installed the create-react-app repository, it will look someth-ing like this :
Now, here we have to delete those “Test Files” which may be present in your folder and after deletion, folder should look something like this as shown in above figure.
Now run the command npm start in the repository of the app.
Editing
Now you can edit the app.js as per your needs. Here, we removed all the unnecessary code from the file and written hello world over there. You should already be able to see the output changing on the website https://localhost:3000 . This localhost is a local server created by the npm start command to provide a server to the react app.
Input Box
Now we have to add a functionality of input a message. This process will be same as it was in the case of the Todo app !! Only thing that will change is custom CSS to make messages from others to the left and my messages in the right also with different color. CSS for that features is quite simple.
const [message,setMessage]= useState("");
const [chats,setChats]= useState([]);const submit=(event)=>{
setChats([...chats,message]);
event.preventDefault();
setMessage("");
}//following part should be in return part of app component
<input onChange={event=>setMessages(event.target.value)} /><button type="submit" onClick={submit} >send message</button>
The code above created an input box and a submit button which will store the entered message in an array and will make the message box empty again. Perfect !! Now we have to somehow show the messages on the app. How about we display all the messages in the following form :
Message
//double line break
Message
//double line breakFor this format the code will be as follows:
{chats.map(chat=>(
<div className="messages" >{chat}<br /><br /></div>))}This code will map through the chats array which contains all the chats and will render each one of them with twice line space between each of them. Now we have to add a feature so that the app can identify who are we which can be done by adding some authentication so let’s move into it !!
6. Making The App Better 🔥
Now we have the basic layout of the app and now we have to add some additional features for the betterment of the app. One of these features is User-Authentication. Adding that is usually a tedious task but here everything is being done with the help of firebase so it’s going to be easy-peasy 😄
User-Authentication
Firebase provides many options for user-authentication. It can be using only Email and Password or Facebook login and many others. If you are new to firebase, you should start with email and password authentication because it is the most basic among all of them. You can always try other options of auth later. Here is the link to the firebase authentication documentation which you should refer !!
After setting-up the user authentication, we are totally done with everything. and our app is ready. Now you should add design for your web-app the way you want.
7. DONE !!
You are finally done with your messenger web-app. Now, setup your app in the firebase console and host it.
Don’t forget to take a screenshot of your web-app and post it on twitter and tag me. My social media handles are given below.
[Twitter](https://twitter.com/bahldhairya)
[Gmail](dhairyabahl5@gmail.com)
[Github](https://github.com/dhairyabahl/)
