2.3.1: Firebase Realtime Database

Learning Objectives

1. Firebase Realtime Database is a NoSQL database that allows real-time data syncing across client applications without the need for a backend

2. How to set up Firebase Realtime Database with React Apps powered by Vitejs

Introduction

Firebase Realtime Database is a convenient tool to develop app prototypes. Source: Firebase

Firebase Realtime Database is a "NoSQL" (i.e. non-relational) JSON database that allows us to persist app data with API calls and sync that data in real-time across multiple app instances (e.g. multiple users). Realtime Database is Firebase's first product and one of their most popular.

Start by reading the following official Firebase Realtime Database tutorials linked below. We will skip the Get Started page and come back to it when working on our first exercise.

Structure your Database

Read the following Firebase official tutorial on how to structure data in Realtime Database.

1. We can think of JSON objects as JavaScript objects

2. We will learn SQL when we learn about backend

3. We will follow the structure of data in this example to build chat functionality in this module's exercises

Read and Write Data on the web

Read the following tutorial on how to read and write data to Firebase Realtime Database. Try to understand the code in each example. We will understand it in more detail when we work on this module's exercises.

1. Skip the "(Optional) Prototype and test with Firebase Local Emulator Suite" section. We can use this later when we need it.

2. We will be using the functions mentioned in the docs to write, read, update and delete data.

3. We may use off() to detach listeners when our React components unmount; no need to pay too much attention to this for now.

4. We can ignore "Save data as transactions" section for now. We can revisit this when we need this functionality.

Work with Lists of Data

Read the following tutorial on how to read to, write to, sort and filter lists in Realtime Database.

1. We will use functionality from both "Reading and writing lists" section and "Sorting and filtering data" section in our apps.

Sample Implementation Legacy (Class Based)

What is Firebase

Firebase Realtime Database

Firebase Realtime Database Setting Data

Firebase Realtime Database Using Data

Please checkout the finished code in this repository, ensure that you're on the realtimedatabase branch. If you want to test out the application on your machine you will need to have registered an Application on Firebase with Realtime Database activated. Use the sample.env within the application to create an .env file with your Firebase credentials. With this in mind if you want to run the application on your machine you will need to install the dependencies with the command npm install after the installation you can then run the application with the command npm run dev. Then open a browser of your choice and navigate to http://localhost:5173.