• UI Design
• Choose timeframe
• Choose sensors

The current implementation means every reading (from every 2 minutes) is read 72 separate times, and there are currently about 650,000 reads per day (well beyond free tier), whereas writes are still within reasonable values. This is expensive and the reads are redundant, so creative database structure can improve this.

Currently the navigation menu defaults to open when the window is small. Change this default to closed.

In Routes.tsx, the Home path should be an exact path, since the "/" path matches all other paths as well.

• Project description
• Will not expand disclaimer
• NPM scripts (front end and functions)
• Description of major development frameworks and links to documentation (React, TypeScript, Prettier/Eslint/gts)
• Description of major libraries and links to documentation (Chakra UI, i18next, Firebase, axios...)
• How to clone (maybe on a separate markdown file?)
  • API Keys (HERE maps, PurpleAir, Firebase)
  • Setting up GitHub (GitHub secrets, continuous deployment, etc.)
  • Setting up Firebase (Firestore, Cloud Functions, Authentication)
  • Setting up initial admin users
  • Local content (static content, HERE maps location, PurpleAir group)
• Database structure

Make the map-markers able to be clicked (so that they can change the state)

• Get live dashboard online
• Determine how to automatically update deployed website with new master branch code

In GitHub

• From code view, click on branch button (upper left) and then View All Branches.
• On branch page, click edit on the right side of the master branch (under default)
• Use pop up to rename master to main

Locally

git branch -m master main
git fetch origin
git branch -u origin/main main

GitHub Actions

Rename all references to master to main in the .github directory

• deploy.yml
• node.js.yml

The representation of the UI for a given sensor (i.e. the dial representation)

Chrome Dev Tools is showing "Uncaught exception" for async calls to Firebase in the front-end code, even though the errors are caught and being handled. This is likely related to how promises are handled, but it is not clear why the current implementation is not working. It could be because the error is being thrown in another call stack, per this documentation.

Converting the async/await in try/catch statements to then/catch statements seems to fix the issue.

When a sensor is clicked, make it look similar to the hovered sensors (enlarged icon) so that it's more clear what sensor's information you are viewing.

Will need to add default page to Routers as well as a component to be displayed

Right now, the function thingspeakToFirestore() just fails if the requests don't work, and the error messaging isn't great.

The new image should:

• display a label
• display a color associated with the label
• look nice

This includes

• Sending a password reset email for a forgotten password
• Changing a password for a signed in user
• Changing an email for a signed in user
• Deleting an account

Instead shows the manifest file

We updated the fields to use Timestamps and pm25 readings rather than strings and channelAReading

For the tags in the grid under the dial/aqi reading: highlight the tag that corresponds to the current AQI with a border to make it clear what category the AQI currently falls under.

There are two sensor docs with purpleAirId="39019". One is older, and I believe they are both now being populated with the same readings. The 39019 sensor was likely re-added in November when we added more sensors. Thus, I think once all old data docs are converted to the new format, we can probably just delete the newer collection.

Originally posted by @CarsonHerness in #92 (comment)

Chakra has a built in IconButton feature that we should probably be taking advantage of instead of a manual image, but it was not super quick to implement due to icon hiding and sizing. Since it is low-pri, I am going to open this issue as opposed to fixing now.

Right now the colors for the markers and the dial (which are the same) are hard coded in markerStyle.tsx and AQIDial.tsx. We should store these colors in one place, and use them in both files. This should also accommodate the fact that the colors are different with the color blind toggle on.

• Add appropriate security rules

Add the ability to collapse UI components (map, AQI dial, graph/recommendations box) when user is viewing from a small screen.

DOMException: Failed to register a ServiceWorker for scope ... The script has an unsupported MIME type ('text/html').

• Add admin interface
• Add web authentication with Firebase