Joel Ross
Autumn 2025

<info 340/>

Firebase Database

View of the Day

  • Admin: Course Calendar

  • Final Draft Requirements

    • Grading Group Projects

  • Quiz 4: Frequently Missed Questions

  • Firebase

    • Configuration

    • Database

More on Firebase next week

Can also check the videos & textbook!

  • Tue Nov 24 lecture: Firebase Databases
  • Wed Nov 25: Problem Set 09 due. No lab!
  • Thu Nov 26: No class! No lab!
  • Tue Dec 02 lecture: Firebase Authentication (lecture)
  • Wed/Thu Dec 03/04 lab: Quiz 5
  • Thu Dec 04 lecture:
    • Optional: ​Quiz Retake - an optional quiz with frequently missed questions from Quizzes 1-4. A high score on this will replace a low score on an earlier quiz.
    • Conclusions (short lecture)
    • Project work time
  • Mon Dec 07: 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!

Project Final Draft

Final Projects will be graded in two parts:

  1. Group portion (50%): has your group implemented a complete project? Does it meet all requirements; etc.
    ​
  2. Individual mastery (50%): have you individually demonstrated that you've learned the material (HTML, CSS, React)?
    • Need git commits that show you've contributed to all these
    • If you have not demonstrated you've learned the material, you will not get full credit.
    • "Supporting the group" (helping others learn, etc) will earn extra credit. Failure to work effectively in a group (poor communication, missing deadlines, etc) will reduce score.
      This is not a measure of "how much work you did", but how well you worked with your team.

Gen AI Policy

A reminder that we have a policy around AI usage for projects https://canvas.uw.edu/courses/1830652/pages/gen-ai:

  1. AI can do the "first pass", but you do the rest
  2. Distinguish what work is AI and what work is yours

 

In particular, remember the practice:

  • Commit AI work separately through git. AI should be used only for a "first pass" at generating content or scaffolding; once you've done that work, immediately commit that work to log it. Include that the work was AI generated in your commit message (e.g., "AI: generate nav bar scaffolding").

Quiz 4: Frequently Missed Questions

# 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 Hooks

An effect hook is used to specify "side effects" of Component rendering -- code you want to execute only once and not on each render!

//import the hooks used
import React, { useState, useEffect } from 'react';

function MyComponent(props) {
  const [stateData, setStateData] = useState([]);

  //specify the effect hook function
  useEffect(() => {
    //code to do only once here!
    //asynchronous methods (like fetch), etc
    fetch(dataUri) //e.g., send AJAX request 
    //...
    setStateData(data); //okay to call state setters here
    
  }, []) //array is the second arg to the `useEffect()` function
         //It lists which variables will "rerun" the hook if they 
         //change

  //...
}

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 10 (all items)

  • Review everything

  • Problem Set 09 due Wednesday!

 

Next time: Firebase authentication and image storage

  • Read/watch ahead if you wanted to get started over the holiday!