Building a chat app with Firebase DB
Tags: firebase, boostrap, vanillajs
Published: 2021-09-27 12:32:54

In this blog I am going to cover some basic stuff about the Firebase real-time database. So let's get started by creating basic HTML elements: 
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7fd5l4i5nmnkpo4oknx.png)
Notice we have created a input and a button and that is because for entering a message and sending it. One more thing is that we have used
 

      <form>

and that is because we want to show the input and the button in the same line. 

Next lets setup a new Firebase project and a app:

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvo6iyx8og5dqidt40d2.png)

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/let7u49vxppe8vaybsg7.png)

Now lets create a new web app in the console:

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4o8jgdvngk9y3u6gjxpk.png)
 
Give it a name and you can enable Firebase hosting if you want but I don't want to do it now so I will uncheck it.

Then to use the Real-time database we will have create it so lets do that
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sn2omjfw3vbfzdbm0wkp.png)
after you have set up the database lets write some code
First of all lets import our database and our app
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2q8fno4t22skixdhbz93.png)
Now we will have to import our cdn in our JavaScript file and you can find that cdn in your project settings
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/436o1mt6dbsa0ox4xzq9.png)
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uk36hvhmpobtd0f3gisq.png)
Now let's configure firebase database and you can do it by copy pasting this snippet:


      const db = firebase.database();
Now to get users data we will render a prompt: 
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0v9mlm81ao6rk05xu96k.png)

Then we will listen for submit event on the form and call the postChat function:


      document.getElementById("message-form").addEventListener("submit", sendMessage);

Next: We will send the message to the database
    
 ![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgp5jgic7c21kqmnu4np.png)

Now we will add a auto scroll to bottom functionality so that the user doesn't has to scroll down for a whole lot of time:
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46kgktqypq8f5aa8q99l.png)
 
Now lets display the messages from our collection:

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf3w5oe5v2mtjqk9yj3a.png)

Now when you send a message it automatically updates in our database in the messages collection
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8un4fbqarf9oykup7jb7.png)
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/617w0sbqtma0bneev9gn.png)

Now lets add some bootstrap to enhance the user experience
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/daa9v5drm7frvl788yy3.png)
 ![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r80fajm2deavspu9ho9w.png)
Yes! I love it 
You can find the whole source code here: https://github.com/nfhneevns/chat-app-blog
To support me you can follow me on GitHub: https://github.com/nfhneevns

Thank you!