Building your own chat app without backend? Here we go!

tl;dr : using ReactJS and Firebase, it’s enough! oh wait.. and a cup of Mixue I guess.

Still bringing the spirit of sharing small things, give something back to society. Because I used to be there when I knew nothing about something I wanted to know, about where to start, where to go, I hope this post will help someone out there about how to build a chat app. This time I’ll show you how to do it without any backend codes at all. We will use the power of ReactJS combined with Firebase.

First thing first, begin with the end in mind!

You can find the demo of this app here : https://master--candid-muffin-cdbe2c.netlify.app/

INDONESIAAA!!!

Feeling challenged? Let’s roll!

I will make it covered, so here are the things we will do in this post:

1. Initialize the project
2. Install dependencies (firebase, universal cookie, material-ui)
3. Setup firebase
4. Create auth component
5. Setup firestore
6. Create room and chat component

p.s : I assume you have installed npm and create-react-app in your local, if you don’t have it, follow this link.

Ready? Let’s get started..

Initialize the project

Go to your designated folder, then initialize react project using command below :

create-react-app chat-app

it will take couple of minutes

Your installation is succeed once you find this kind of screen

react project installation succeed

Now let’s jump into chat-app folder, and you will find some files created already

Okay we’re good now. Let’s go to next step!

Install Dependencies

This time, we need 3 dependencies / libraries to be installed for this project:

1. Firebase : to manage connection to firebase service
2. Universal cookie : simple library to maintain cookie in our app
3. Material UI : common UI library for react project

Type command below to install those libraries :

npm install firebase universal-cookie @mui/material @emotion/react @emotion/styled

It will also takes several minutes (depending your internet connection). Now let’s make sure our react project is initiated with this command :

npm run start

It will automatically open the browser and access the app

Setup Firebase

To setup Firebase, go to this link : https://console.firebase.google.com/, then follow this step :

1. Click : Create a Project
2. Fill the project name, let’s use “chat-app” for now
3. Check all required term and conditions
4. Click : Continue
5. On the next screen, uncheck “Enable Google Analytics for this project” (we don’t need it for now)
6. Click : Create Project

Or you can simply follow this short vid :

Setup Firebase

There are many services in Firebase. To make this project more attractive, we will add google authentication so we will know who’s join in the chat room. For that, we will use Authentication service from Firebase. And later in this post, we will also take benefit of Firestore (Firebase database service) to save the chat data.

Now let’s go back to our code editor to create authentication page.

Create Auth Component

1. Setup App on Firebase to get Firebase Config

Simply follow this short vid to get firebase config

get firebase config

2. Create file firebase-config.js under folder ./src

The code will be like below, you must change the value of firebaseConfig following your own

./src/firebase-config.js

3. Create folder “components” under ./src, and create file “Auth.js”

./src/components/Auth.js

4. Then, edit your App.js under ./src

./src/App.js

Should be fine now, start your app again using : npm run start

Okay, we have created our google auth page using Firebase. Next, let’s handle the room component.

Create Chat and Room Component

First, we have to setup Firestore as a data storage for our apps. Again, simply follow this short clip to go :

activate Firestore database

Next, back to your code editor and follow these steps.

1. Create Room.js under folder components

./src/components/Room.js

2. Create Chat.js under folder components

./src/components/Chat.js

3. Add little bit css to give styling on chat box, put it under ./src/styles/Chat.css

./src/styles/Chat.css

4. Finally, modify your App.js to attach the room component

And it’s done!

Run your npm run start again to view the result.

Sure there should be many optimizations need to be added here and there (e.g: in-app validation control, using websocket, etc), but since it is only simple chat-app, I think that should be enough.

I don’t include the code repository URL with purpose, so you can try it yourself from start and understand it.

Have a good day and keep sharing small things! Let’s make the world a better place together.