Firebase CRUD Web App with Javascript 🔥 – Part 1 Get/Read Data

In this Firebase JavaScript tutorial, I will be guiding you on how to Read/Retrieve Data from Firebase Real-Time Database to your Web App.

This is the first part of the Firebase CRUD Web App with Javascript using Real-Time Database.

🔥 Part #1: Firebase CRUD JavaScript Tutorial → Setup And Read Data (You Are Here)

🔥 Part #2: Firebase CRUD JavaScript Tutorial → Insert/Update/Delete Data

If you’re already familiar with Firebase and JavaScript, then you may want to go to the next section What Are We Building In This Tutorial With Firebase?

What you need to know before reading further:

1. JSON: You should be familiar with JSON because Firebase uses NoSQL database which means all the data is stored in the JSON tree structure as key-value pairs.

2. JavaScript: You should be familiar with the basics of JavaScript.

Why Firebase?

Have you ever spent most of your time building back-end architecture such as structuring database schema upfront, scalability, and/or user authentication rather than spending time on building your app unique and awesome?

If yes,

Then, you should try Firebase. 🙂

Firebase is a back-end service that your app can interact with. It has a lot of features such as Cloud Firestore, Real-Time Database, User Authentication, File Storage, and much more.

With Firebase, we do not have to create database schema upfront because Firebase is very flexible and allows changes to the schema as we progress with our application.

As our application evolves over time, it’s recommended to build an app with Firebase and change the schema simultaneously based on the requirements.

Firebase lets you query data from the real-time database which is completely different than traditional SQL queries.

Recommended
Learn Firebase Storage Quickly - Guide

I find it’s pretty cool! 😎

What Are We Building?

1. Get Users List: This simple Javascript app fetches users data from Firebase Real-Time Database using Firebase SDK and populates data on the browser.

2. Get Selected User: When selecting a user on the left, more information about the user appears on the right.

Pretty simple and straightforward.

Now, we know what we are going to accomplish by the end of this Firebase Javascript Tutorial.

✅ Recommended Full Video Course
Firebase + JavaScript: A Complete Guide

We just need the 6 steps below in order to achieve the final outcome:

STEP #1: Setting Up A Firebase App On The Firebase Console

STEP #2: Setting Up Our Simple User List JavaScript Project

STEP #3: Initialize Firebase Into The App By Adding The Code Snippet

STEP #4: Enable Read And Write Permission To The Firebase Database

STEP #5: Import Users Schema JSON File Into The Database

STEP #6: Read Users Data From The Firebase Using Child_Added() Method

Let’s get started…

Step #1: Setting Up A Firebase App On The Firebase Console

If you already have a Gmail account, go to Firebase Console and log in. The reason you use Gmail is that Firebase has been acquired by Google and has become a part of it.

Once you have logged in, you will see the project explorer window like the image above. It may look a bit different depending on when you read this article.

Go ahead and click “Add Project” that will create a modal window in which you can put your project name and select your country. Then click Create Project.

At this point, you have successfully created a Firebase Project. Go ahead and click the project to get into the firebase console.

Continue Reading ...