Building a chat app with Firebase DB

#firebase #boostrap #vanillajs

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:

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:

Now lets create a new web app in the console:

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

after you have set up the database lets write some code
First of all lets import our database and our app

Now we will have to import our cdn in our JavaScript file and you can find that cdn in your project settings

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:

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

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:

Now lets display the messages from our collection:

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

Now lets add some bootstrap to enhance the user experience

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