Firebase CRUD Web App with Javascript 🔥 – Part 1 Get/Read Data
Tags: javascript, programming, webdev, firebase
Published: 2021-03-09 20:41:13

In this Firebase JavaScript tutorial, I will be guiding you on how to **Read/Retrieve Data** from [Firebase](https://firebase.google.com/?gclid=CjwKCAjw7anqBRALEiwAgvGgm1eOX7u4uSCWaDsZav1UGZIL_vi157MGBFN-I2ME-GGXboe78uVJaBoC1tMQAvD_BwE) 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](https://www.softauthor.com/firebase-javascript-crud-web-app-add-update-delete/)

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?](https://www.softauthor.com/learn-to-build-firebase-crud-app-with-javascript-part01-reading-data/#what-are-we-building)

**What you need to know before reading further:**

1. **JSON**: You should be familiar with [JSON](https://www.json.org/json-en.html) 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](https://firebase.google.com/?gclid=CjwKCAjw7anqBRALEiwAgvGgm1eOX7u4uSCWaDsZav1UGZIL_vi157MGBFN-I2ME-GGXboe78uVJaBoC1tMQAvD_BwE). 🙂

Firebase is a back-end service that your app can interact with. It has a lot of features such as [Cloud Firestore](https://www.softauthor.com/firestore-querying-filtering-data-for-web/), Real-Time Database, [User Authentication](https://www.softauthor.com/firebaseui-vue-facebook-google-auth/), 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](https://www.softauthor.com/learn-firebase-cloud-storage-quickly-guide/)

{% youtube 31MVIwvstzs %}

I find it’s pretty cool! 😎

**What Are We Building?**

![alt text](https://softauthor.com/wp-content/uploads/2016/12/ezgif-4-7d2887105e.gif)

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](https://www.udemy.com/course/full-stack-firebase/?ranMID=39197&ranEAID=nsrC6aUWa3g&ranSiteID=nsrC6aUWa3g-5K1dBYtBzrmkLgSUcaHjEg&LSNPUBID=nsrC6aUWa3g&utm_source=aff-campaign&utm_medium=udemyads)

**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](https://www.softauthor.com/learn-to-build-firebase-crud-app-with-javascript-part01-reading-data/#setting-up-a-firebase-app-on-the-firebase-console)

[STEP #2: Setting Up Our Simple User List JavaScript Project](https://www.softauthor.com/learn-to-build-firebase-crud-app-with-javascript-part01-reading-data/#setting-up-our-simple-user-list-javascript-project)

[STEP #3: Initialize Firebase Into The App By Adding The Code Snippet](https://www.softauthor.com/learn-to-build-firebase-crud-app-with-javascript-part01-reading-data/#initialize-firebase-in-app-js)

[STEP #4: Enable Read And Write Permission To The Firebase Database](https://www.softauthor.com/learn-to-build-firebase-crud-app-with-javascript-part01-reading-data/#enable-read-and-write-permission-to-the-firebase-database)

[STEP #5: Import Users Schema JSON File Into The Database](https://www.softauthor.com/learn-to-build-firebase-crud-app-with-javascript-part01-reading-data/#create-a-database-Schema)

[STEP #6: Read Users Data From The Firebase Using Child_Added() Method](https://www.softauthor.com/learn-to-build-firebase-crud-app-with-javascript-part01-reading-data/#read-data-from-firebase-database)

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.

![alt text](https://www.softauthor.com/wp-content/uploads/2016/12/firebase-project-exploere.png)

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 ...](https://www.softauthor.com/learn-to-build-firebase-crud-app-with-javascript-part01-reading-data/)