Chat App using WhatsApp web UI and React JS

In this article, I’ll tell you how I used React JS to create a Chat App utilising a portion of the WhatsApp web UI. For authentication, database, functions, and hosting, I utilised Firebase. Firebase is a fantastic tool for rapidly getting started with projects. HTML, CSS, and the React Context API will be used. The app is designed for dark mode and uses colour schemes from the Whatsapp website.

To create a new React app, Node js is to be installed on the PC. npx is a part of npm (Node Package Manager) except npx runs a remote script instead of installing it locally. This is done so that you always have the latest version of React installed in your project. By using the terminal of Visual studio code or Command Prompt type

 $ npx create-react-app .

“.” refers to the app created in my current folder

A new app is installed locally in the folder created. The App is started using the command

 $ npm start

By default, the app is hosted locally on

http://localhost:3000/ 

I will be setting up the app for use and starting making the ChatApp.

1. React app structure

The structure for the src directory of the app in the local folder

src
Chat
┃ ┣ Chat.js
┃ ┣ Chat.css
Login
┃ ┣ login.js
┃ ┗ login.css
┃ ┗ StateProvider.js
┃ ┗ reducer.js
Sidebar
┃ ┣ Sidebar.js
┃ ┗ Sidebarchat.js
┃ ┗ sidebar.css
┃ ┗ sidebarchat.css
┣ App.js
┣ App.css
┣ firebase.js
┣ index.js
┣ index.css
┣ UseWindowDimensions.js

2. Setting up the React Router

A very important thing to consider in a React app is the navigation (moving from one page to another) of the users. Since React is a single page application, it doesn’t support multiple routes by default.

There’s a package named react-router-dom which allows us to create routes for the React project. Not a lot complicated. Setting up is one time, and then whenever you add a new page, you just need to inform the Router.

Open your VS Code or Command Prompt terminal and enter the following command to install

$  npm install react-router-dom

The current version is Version 6 of react-router-dom which has a lot of new changes and are easy to use for example, Instead of Switch, Routes is used and Route tag is used with path and element instead of Component.

SAMPLE CODE FOR React Router
import React from "react";
import {BrowserRouter,Routes,Route} from "react-router-dom";
import Home from "./Home";
import About from "./About";
function App(){
return(
<BrowserRouter>
<Routes>
<Route path="/home" element={<Home/>}/>
<Route path="/about" element={<About/>}/>
</Routes>
</BrowserRouter>
);
}
export default App;

In App.js, Chat.js is linked using react-router-dom and the page is displayed.

3. Setting Up the Login Page

The login part is built and authenticated using firebase google authentication. With signInWithPopup function the app is authenticated and is landed on the dashboard (chat section )page.

Login Page with Google Authentication

4. Setting up the Sidebar

Once the app is set up with a login page the login is to be redirected into the dashboard page where the sidebar is designed with the room name and most recent chat that is mapped from the database. Material UI icons have been utilised. Material UI includes all of the most recent packages needed to create an app.

The current version of the material UI is v5.2.7 it has been upgraded with a lot of changes compared to earlier versions

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
Landing Page
Responsive view of Landing page

The Photo and Name are retrieved from the Mail ID. The Chat is mapped and the Room Name and messages are mapped. The 3 Icons are performing some tasks like + button adds new room and logout takes back to the login page.

5. Setting up the Chat Section

Once the Room is created the member can Chat in the room with any other member who logged in simultaneously.

Chat section
Responsive view of Chat Section

In the Chat section, the member can chat and can use emojis. The member can search for rooms, The messages auto filter according to the time. The message sent will be sent by the member name. The chat colour is auto set by senders and receivers names. The chat app can be used on mobile also since its responsive.

6. Setting up the App for deployment

Once the frontend part of the app is built I had pushed it into production.

The following command builds the app in such a way that it can be deployed to the server.

$ npm run build

Firebase has an option of hosting the frontend part of the app which is to be enabled while creating the app. The following commands in the vs code terminal will deploy the app into the firebase server. Remember to host your app in the same account used for creating the firebase app

//Login to the account in your terminal
$ firebase login
//initalize
$ firebase init
//Choose the option of hositng and select some questions are asked to deploy the app read carefully and deploy since it overwrites the pubilc directory nce everyhting is done the fireabse.json is created and the mapping to deploy the build directory's index.html is done automatically //Deployment using the following command will deploy the app to the server
$ firebase deploy

The GitHub repo can be found here for usage.

The Deployed app can be found here. The app is deployed using firebase.

Overall

Building the app was a challenge since firebase was new to me and the packages which I used previously were upgraded to the new versions with certain new features and an upgrade from the older versions. Had to dig deep into the packages to understand and find solutions to some problems from Stack Overflow 🙏to complete my project.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Some Javascript Topics (Part-3).

JavaScript 30–01 Drum Kit

ECMAScript 2019. Asynchronous iteration using “for-of”

Redux for VanillaJS Microservices

Refactoring a Class Component to a Functional Component, with Hooks

Iterations & Loops You Should Remember When Using JavaScript

We Are Hiring! React Frontend Developer (Full-time)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
VRUJESH HM

VRUJESH HM

More from Medium

How to Use Fusioncharts to Create Charts in ReactJS

ReactJS Tutorial Part #4 ~ ReactJS Components

Learning React with TypeScript by Building an API app

How to Build a MERN App [Part 2]