Real-time Chat Application with Firebase and Material UI

The need to make our web application faster for people to communicate has made it imperative for real-time features to be implemented in our chat applications. In this tutorial, we will learn how to build a real-time chat application using React.js and material UI. We set up Firebase, record, and send voice notes, and create custom users login, great right? So let get started!

Creating the project

First, let’s create a React application using the create-react-app. Which will download and installs the necessary packages required for a React application.

Now, let’s look at the folder structure our application.

• /components: contains our reusable widgets.
• App.js: the root component, which will connect our components together.

Installing packages

Now, we have created a react application for our project. let go ahead and install firebase, react-audio-player, audio-react-recorder, which are the packages we will be using for this project.

Setting up Firebase

We need to create a Firebase project for our application. Firebase is a platform developed by Google for creating mobile and web applications, which helps you build and run successful apps. First, head over to the Firebase Console and create a new project by clicking add project.

Next, enter the name of the project. in this case, RealChat and hit the continue button.

After creating the project, we are redirected to the dashboard. Perhaps, we need to connect our app to Firebase, so copy the configuration details for our project by clicking on the web icon (</>) in the dashboard.

Next, we are prompted to register your application. Type in realchat on the text box and register.

Firebase generates configuration details for our project. Leave this page open for now, we will be needing these credentials later in our project.

Creating the Material UI

We will create our user’s interface using Material UI. First, we need to get it installed in our application.

We will also need some icons, Material UI has a lot of cool icons we can use. Let’s go ahead and install material-ui/icons.

So, now that we have Material UI and material-ui/icons installed in our application. Let’s go ahead and create our user interface.

Creating Users Login Component

Let’s add some code to App.js to create our login component. We will import React and Material UI components required for our login page. Then we imported the **Rooms** component, which we will be creating later in a subsequent section.

Next, we will create our login component with a username field to enable us to get the user’s names. Then we create a useStyles function to override some of the Material UI styles.

Next, we need to save the values from the input field to a state. So let’s create the name state and set the initial value to an empty string.

Now, let’s create two methods, to save the input values to our state and to handle the submit event when a user tries to log in.

Next, let’s render our login component. Since we are not storing the logged-in users in the database, we will create a state in our App ****component to save the name of the logged in user and their current log status. Then create handleLog function which will reset the state, and pass it as a prop to the Login component.

Next, we need to only give users who are recognized to have access to the Room component to chat. So we check the current logged state which returns either true or false and sends them to the appropriate page.

For now, our Room component is not yet ready, we will drop a comment for now till later in the section when it will be created.

Creating Chat Rooms Component

We now successfully created our Login page. Now, let’s create our chat rooms component. First, we have to import React, Firebase, the required Material UI components, and import the Chats component which we will create later. Add this code to components/Rooms/Rooms.

Next, we create our header section with a brand and a logout button, then we create a form for sending text chats and a record icon to record and send voice notes.

We create two different icons, one to record a voice message and the other to stop and send. Then a state to know if the user is recording or done recording.

Next, we created some states for our component and set their initial values. To enable us to style them in our own way, we created a custom CSS style. Then we create a state object to store the chats, form input, recording status, Error message, and record state.

Add these styles to component/Rooms/rooms.module.css.

Next, let’s create our handler functions. We’ll import and initialize Firebase using the configuration details generated earlier when registering the app in the Firebase dashboard. Then, initialize firestore, which will enable us to save our chats to Firebase in real-time. Add this code after the imports.

Creating Voice Message

Then, we will create methods for the AudioReactRecorder component to handle the start, and stop of the recording.

Now, we need to save the message to the database. To do that that we will create a function to handle the submitting of forms to the database since we have two types of messages to send.

The function accepts the user message, and the category then submits to Firestore to perform a write to the database.

Then we listen to the onstop event, which is triggered when the user hits the stop button which returns an audio record.

Open Source Session Replay

Debugging a web application in production may be challenging and time-consuming. OpenReplay is an Open-source alternative to FullStory, LogRocket and Hotjar. It allows you to monitor and replay everything your users do and shows how your app behaves for every issue. It’s like having your browser’s inspector open while looking over your user’s shoulder. OpenReplay is the only open-source alternative currently available.

Happy debugging, for modern frontend teams - Start monitoring your web app for free.

Creating Text Message

Next, let’s now create handler functions to enable the users to send text messages.

We create a handleChange method to save the user’s message to our state. Then the handleSubmit method, which will get the message stored in our state when the users entered their details, and save to the Firebase by calling the sumitData method.

Next, we create a hook to fetch our message from Firebase. This data is fetched when our components load and reload when a user sends a new message without the user refreshing the browser.

We then loop through the messages using a map function. Then pass chats and the active user as props to the Chats components

Next, let’s bind the handleChange and handleSubmit to our class and, then chain the methods to their respective component to listen to events.

Lastly, we need to render our Room component in our App component. Modify App.js component, replace the //Show the chat Room component with this code.

Creating Chat Component

Next, we need to create a component to display the user’s chats. We will import React, ReactAudioPlayer, and the required Material UI components, then import our custom styles.

Then, we destruct the props to get the message, user and the category of the message fetch from Firebase. Since the message sent by the user has a special style to other users, we will check if the messages are sent by active users and apply the styles.

Next, we check if the chat category is a voice message or a text, to either load the voice note to the audio player or display the messages.

Add these codes to component/Rooms/Charts

Resources

Github Code

Conclusion

Throughout this tutorial, you’ve learned how to build a React real-time chat application. You’ve also experienced setting up Firebase, creating a user interface with Material, and Sending text messages as well as voice notes. Now, how would you implement real-time features in your next project? Perhaps creating your chat system with more features?