Joel Ross
Winter 2025
<info 340/>
Firebase
View of the Day
-
Final Draft Requirements
-
Grading Group Projects
-
-
Firebase
-
Configuration
-
Database
-
Authentication (only if time)
-
More on Firebase next week
Can also check the videos & textbook!
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:
-
Group portion (50%): has your group implemented a complete project? Does it meet all requirements; etc.
-
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.
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 9 (all items
-
Review everything
-
Problem Set 09 due tonight!
Next time: Firebase authentication and image storage
info340wi25-firebase-db
By Joel Ross
