The comprehensive step by step React JS tutorial on building React Firebase chat web application (React Hooks)

In this React JS tutorial, we will show you how to build React Firebase chat web application (React Hooks). This application using Firebase realtime database, so, it not necessary to use additional real-time engines such as Socket.io.

This tutorial divided into several steps:

• Step #1: Setup Firebase Real-time Database
• Step #2: Create React JS App
• Step #3: Install and Configure the Required Modules
• Step #4: Add React Router DOM
• Step #5: Implementing Login
• Step #6: Implementing Room List and Add Room
• Step #7: Implementing Chat Room
• Step #8: Run and Test React JS Firebase Chat Web App

The flow is very simple as described in this diagram.

1. The first entry of this React JS application is the login page.
2. In the login page, it will check if the nickname exists in the local storage.
3. If the nickname exists, it will go to the room list directly, and if not exists, it will stay on the login page to enter the nickname in the login form.
4. The request from the login form will compare with the user’s document in the Firebase Realtime-Database.
5. If the nickname exists in the Firebase document then it will go to the room list and set the nickname to the local storage.
6. If the nickname does not exist in the Firebase then it will save the nickname first to the users’ document before going to the room list and set to the local storage.
7. The room list contains a list of the chat room, a current user nickname, add the room button, and a logout button.
8. The add button action will go to the add room form then compare the submitted room name to the Firebase realtime-database document.
9. If the room name exists, it will return an alert, and if not exists, it will save a new room name to Firebase document.
10. The new room will automatically appear on the room list.
11. The logout button action will log out and exit the room list by removing the nickname from the local storage and redirect the page to the login page.
12. Each room item in the room list has an action to go to the chat room.
13. In the chat room, there is a chat box that contains the message, a message form, the online user’s lists, and an exit button that has the action to go back to the room list.

The following tools, frameworks, libraries, and modules are required for this tutorial:

1. Node.js and NPM or Yarn
2. create-react-app CLI
3. Reactstrap
4. Firebase Module
5. Firebase Real-time Database
6. Terminal (Mac/Linux) or Node Command Line (Windows)
7. IDE or Text Editor (We are using Visual Studio Code)

Let get started to the main steps!

#react #firebase #web-development #developer