Joel Ross
Winter 2026

<info 340/>

Firebase Database

View of the Day

  • Admin: Course Calendar

  • Final Draft Requirements

  • Firebase

    • Configuration

    • Database

More on Firebase next week

Can also check the videos & textbook!

  • Wed Mar 04 lecture: Firebase Databases
  • Fri Mar 06: Problem Set 09 due
  • Mon Mar 09 lecture: 
    • Quiz 5
    • Firebase Authentication (lecture)
  • Tue/Wed Mar 10-11: Project work time!
  • Wed Mar 11 lecture:
    • Optional: ​Quiz Retake - an optional quiz with frequently missed questions from Quizzes 1-4.
      Can replace a low score on an earlier quiz.
    • Conclusions (short lecture)
    • Project work time
  • Mon Mar 16: Final Projects due!!

The rest of the quarter...

Project Final Draft

For the Final Draft of the project, we're looking for it to be totally complete! See the Canvas page for full details.

  • Well-structured and appropriate HTML (in React)
  • Well-constructed React Components. Uses props and state!
  • Interactive features: "two and a half" significant features
  • Routing and navigation Needs multiple pages; url params
  • External React Library rendering a Component. react-bootstrap is okay (if used meaningfully e.g., interactive widget)
  • Data Persistence through Firebase (includes asynchronous work; effect hooks, etc)
  • Good Visual Style, Accessibility, Responsiveness
  • Correct code style -- check the course textbook!

Reminder: AI Policy

The policy for this course:

  • ❌ Don't use AI tools for problem sets
  • ✅ You can use AI tools for projects:
    1. ⚠️ AI can do the "first pass", but you do the debugging part
      • Don't put code into the generator!
    2. ⚠️ You need to distinguish what work is the AI and what work is yours
      • AI-supported code committed separately through git
      • Written explanation of your human work ("project mastery reflection" assignment)

For full details, see the syllabus and the Gen AI in Projects Guidelines

# switch to starter branch to get new starter code
git checkout starter

# download new starter code
git pull

# switch back to main branch for coding
git checkout main

# merge in new starter code (use default msg)
git merge starter --no-edit

# code and enjoy!

Get the starter code from the starter branch, but do all of your work on main.

Updating Lecture Code

See textbook

https://info340.github.io/firebase.html

Firebase

Firebase is a web backend solution; it provides multiple features which you can access without need to "code" them yourselves.

  • Web Hosting
  • Databases
  • User Authentication

Effect Hook Cleanup

In order to "clean up" any work done in an effect hook (e.g., disconnect listeners), have the callback return a "cleanup function" to execute.

import React, { useState, useEffect } from 'react';

function MyComponent(props) {
  //specify the effect hook function
  useEffect(() => {

    //...do persistent work, set up subscriptions, etc

    //function to run when the Component is being removed
    function cleanup() {
      console.log("component being removed")
    }    
    return cleanup; //return function for React to call later    
  }, [])

  return ...
}

Action Items!

  • Complete task list for Week 9 (all items)

  • Review everything

  • Problem Set 09 due Friday!

 

Next time: Firebase authentication + image storage

  • Read/watch ahead to get started early

info340wi26-firebase-db

By Joel Ross

info340wi26-firebase-db

  • 38

More from Joel Ross