Build a Real Time Chat App with JavaScript and Firebase

Name: Build a Real Time Chat App with JavaScript and Firebase
Rating: 4.0 (52 reviews)

Learn to build a real time chat app and chat to friends and family

Created byBluelime Learning Solutions

Last updated 3/2026

English

What you'll learn

Create directories using the command line tool
Install node js and node package manager (npm)
Install Firebase CLI Tool
Declare variables
Add event listener
Attach an event like click to a button element
Use querySelector method
Create a reference to firebase database
Install firebase CLI
Login to firebase
Initialize firebase
Deploy firebase app

Course content

1 section • 28 lectures • 2h 7m total length

Introduction3:47
What you will create1:43
What is Firebase1:30
Getting Firebase for free2:00
Setting up development environment1:53
Creating firebase project directory3:07
Creating directories and files5:33
Install node js and npm6:29
Building the app user interface6:53
Styling the app user interface5:51
Creating a reference to the firebase database3:18
Creating Variables to access the DOM elements6:24
Adding Event Listener4:38
Using the Input Text Value Property to return values2:04
Saving data into firebase database4:39
The Firebase CLI5:55
Initializing your project directory4:27
Deploying your app to Firebase5:13
Sending data to firebase database3:12
Create an object and save data using push method9:27
Sending data with the push method to firebase5:24
How firebase stores data2:06
Data updates and events7:20
Data updates and events part 28:38
Displaying posted chat messages in Realtime8:24
Rolling back if things go wrong4:36
Conclusion2:53
Thank You0:09

Requirements

Download and install Node js and npm. We'll cover that in the course

Description

Firebase is database service that is used to provide backend functionality for applications big and small.

Firebase has three types of plans icluding a free plan that allows you real time data download and upload limits and
also storage facilities. Firebase on the free plan allow 100 simultaneous connections to your application.
Firebase implementation in your application means you do not need to write any backend server code. It supports both web and mobile app deployments.

In this beginner course we will be building a real time chat app that you can deploy using firebase static hosting and share
the link with friends and family and begin to chat provided there are only 100 simultaneous connections. If you are expecting more than 100 simultaneous connections to your app
you will have to upgrade to a paid plan.

We will be using the frontend tools like HTML ,CSS and JavaScript to build the app's user interface and functionality and
use firebase as the backend database server.

In this course we will aslo be installing and using the Firebase CLI tool . This resourceful tool can be used to manage and administer your firebase project.
The tool can be used to various task like:

Login to firebase
Authenticate users
Initialize firebase project
Deploy firebase project

What you will learn include:

How to connect to firebase from your app
How to publish your app to firebase hosting service
How to store and work with objects in firebase
How to save data to the firebase database
How to hook into real-time object updates with firebase
How t use firebase supported authenication providers
How to validate data sent to firebase
How to secure data from unauthorized access.

Looking forward to you joining the course.

Who this course is for:

This course if for newbies who are not familiar with firebase.
Anyone with basic knowledge of HTML
Anyone with basic knowledge of CSS
Anyone with basic knowledge of JAVASCRIPT