Joel Ross
Spring 2026

<info 340/>

Firebase Database

View of the Day

  • Admin stuff

  • Firebase

    • Configuration

    • Database

More on Firebase next week

Can also check the videos & textbook!

  • Thu May 28 lecture: Firebase Databases
  • Tue Jun 02 lecture: 
    • Quiz 5
    • Firebase Authentication (lecture)
  • Tue/Wed Jun 03 lab: Project work time!
  • Thu Jun 04 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 Jun 08: 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

  • Finish up late problem sets

  • Work on project!

 

Next time: Firebase authentication + image storage

  • Read/watch ahead to get started early