Rocket Academy Bootcamp
  • 🚀Welcome to Bootcamp!
  • 🛠️Logistics
    • Course Schedules
    • Course Methodology
    • Required Software
    • LinkedIn Education Badge
  • 📚General Reference
    • Naming, Casing, and Commenting Conventions
    • VS Code Tips
    • Recommended Resources
  • 🪨0: Foundations
    • 0.1: Command Line
    • 0.2: Git
      • 0.2.1: Branches
    • 0.3: GitHub
      • 0.3.1: Pull Requests
    • 0.4: JavaScript
      • 0.4.1: ES6
      • 0.4.2: Common Syntax
      • 0.4.3: Reference vs Value
      • 0.4.4: Classes
      • 0.4.5: Destructuring and Spread Operator
      • 0.4.6: Promises
        • 0.4.6.1: Async Await
    • 0.5: Node.js
      • 0.5.1: Node Modules
      • 0.5.2: NPM
      • 0.5.3: Nodemon
  • 🖼️1: Frontend
    • 1.1: HTML
    • 1.2: CSS
      • 1.2.1: Layout
    • 1.3: React
      • Styling in ReactJs
      • Using Styling Libraries with React
      • React Deployment
    • 1.E: Exercises
      • 1.E.1: Recipe Site
      • 1.E.2: Portfolio Page
      • 1.E.3: World Clock
      • 1.E.4: High Card
      • 1.E.5: Guess The Word
    • 1.P: Frontend App
  • 🏭2: Full Stack
    • 2.1: Internet 101
      • 2.1.1: Chrome DevTools Network Panel
      • 2.1.2: HTTP Requests and Responses
    • 2.2: Advanced React
      • 2.2.1: AJAX
      • 2.2.2: React Router
      • 2.2.3: useContext
      • 2.2.4: useReducer
      • 2.2.5: Environmental Variables
      • 2.2.6: React useMemo - useCallback
    • 2.3: Firebase
      • 2.3.1: Firebase Realtime Database
      • 2.3.2: Firebase Storage
      • 2.3.3: Firebase Authentication
      • 2.3.4: Firebase Hosting
      • 2.3.5: Firebase Techniques
    • 2.E: Exercises
      • 2.E.1: Weather App
      • 2.E.2: Instagram Chat
      • 2.E.3: Instagram Posts
      • 2.E.4: Instagram Auth
      • 2.E.5: Instagram Routes
    • 2.P: Full-Stack App (Firebase)
  • 🤖3: Backend
    • 3.1: Express.js
      • 3.1.1 : MVC
    • 3.2: SQL
      • 3.2.1: SQL 1-M Relationships
      • 3.2.2: SQL M-M Relationships
      • 3.2.3: SQL Schema Design
      • 3.2.4: Advanced SQL Concepts
      • 3.2.5: SQL - Express
      • 3.2.6: DBeaver
    • 3.3: Sequelize
      • 3.3.1: Sequelize One-To-Many (1-M) Relationships
      • 3.3.2: Sequelize Many-To-Many (M-M) Relationships
      • 3.3.3: Advanced Sequelize Concepts
      • 3.3.4 Database Design
    • 3.4: Authentication
      • 3.4.1: JWT App
    • 3.5: Application Deployment
    • 3.E: Exercises
      • 3.E.1: Bigfoot JSON
      • 3.E.2: Bigfoot SQL
      • 3.E.3: Bigfoot SQL 1-M
      • 3.E.4: Bigfoot SQL M-M
      • 3.E.5: Carousell Schema Design
      • 3.E.6: Carousell Auth
    • 3.P: Full-Stack App (Express)
  • 🏞️4: Capstone
    • 4.1: Testing
      • 4.1.1: Frontend React Testing
      • 4.1.2: Backend Expressjs Testing
    • 4.2: Continuous Integration
      • 4.2.1 Continuous Deployment (Fly.io)
      • 4.2.2: Circle Ci
    • 4.3: TypeScript
    • 4.4: Security
    • 4.5: ChatGPT for SWE
    • 4.6: Soft Skills for SWE
    • 4.P: Capstone
  • 🧮Algorithms
    • A.1: Data Structures
      • A.1.1: Arrays
        • A.1.1.1: Binary Search
        • A.1.1.2: Sliding Windows
      • A.1.2: Hash Tables
      • A.1.3: Stacks
      • A.1.4: Queues
      • A.1.5: Linked Lists
      • A.1.6: Trees
      • A.1.7: Graphs
      • A.1.8: Heaps
    • A.2: Complexity Analysis
    • A.3: Object-Oriented Programming
    • A.4: Recursion
    • A.5: Dynamic Programming
    • A.6: Bit Manipulation
    • A.7: Python
  • 💼Interview Prep
    • IP.1: Job Application Strategy
    • IP.2: Resume
    • IP.3: Portfolio
Powered by GitBook
On this page
  • Learning Objectives
  • Introduction
  • Structure your Database
  • Read and Write Data on the web
  • Work with Lists of Data
  • Sample Implementation Legacy (Class Based)
  1. 2: Full Stack
  2. 2.3: Firebase

2.3.1: Firebase Realtime Database

Previous2.3: FirebaseNext2.3.2: Firebase Storage

Last updated 1 year ago

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

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.

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 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.

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)

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.

Please checkout the finished code in this , 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.

🏭
Firebase Realtime Database
Structure your Database
Read and Write Data on the web
Work with Lists of Data
repository
Firebase Realtime Database is a convenient tool to develop app prototypes. Source: Firebase
What is Firebase
Firebase Realtime Database
Firebase Realtime Database Setting Data
Firebase Realtime Database Using Data