DEV Community

Neev Shah
Neev Shah

Posted on • Updated on

Building a chat app with Firebase DB

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
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>
Enter fullscreen mode Exit fullscreen mode

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

alt text

Now lets create a new web app in the console:

alt text

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
after you have set up the database lets write some code
First of all lets import our database and our app
alt text
Now we will have to import our cdn in our JavaScript file and you can find that cdn in your project settings
alt text
alt text
Now let's configure firebase database and you can do it by copy pasting this snippet:

  const db = firebase.database();
Enter fullscreen mode Exit fullscreen mode

Now to get users data we will render a prompt:
alt text

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

  document.getElementById("message-form").addEventListener("submit", sendMessage);
Enter fullscreen mode Exit fullscreen mode

Next: We will send the message to the database

alt text

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

Now lets display the messages from our collection:

alt text

Now when you send a message it automatically updates in our database in the messages collection
alt text
alt text

Now lets add some bootstrap to enhance the user experience
alt text
alt text
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!

Top comments (2)

Collapse
 
doguwu123 profile image
Neev Shah • Edited

If you have any queries or bugs regarding this blog, I would love to solve em.

Collapse
 
doguwu123 profile image
Neev Shah

Should I create a part 2 for this blog?