Pollen

Pollen is a React app that tracks pollen levels in a given location. It also tells the severity of allergens and provides a forecast for the upcoming days. It relies on two APIs: one for allergens and one for geolocation. All user information is stored in Firebase, with an authentication step backed by Zod for validation. The Figma design is original.

typeweb app
stack
  • firebase
  • react
  • react router
  • zod
statuslive
Pollen project screenshot

goals

  • I suffer from pollen allergies and needed a way to check whether a place is low-pollen.
  • Since I wanted to monitor data for my city, it made sense to save a favourite location stored in the Firebase DB, so the app could automatically fetch data for it every time it opens.

highlights

  • Polleninformation API caps at ~40 requests/day. On first request I cache the response; subsequent requests check the cache timestamp and serve it if under 4 hours old (allergen levels don't shift fast enough to need fresher data). This keeps the app usable well past the API's own limit without extra cost.
  • Polleninformation API consumes geolocation data, and that's why I introduced the Geocoding API to convert a user-entered string for a location into x- and y-coordinate.
  • To support cross-device sync, the app needs a single source of truth and always-fresh data. Firebase fits well here being a NoSQL database with multiple sign-in methods available.
  • Zod handles the auth workflow. A couple of functions provide schema validation for email and password while signing in before they reach the database.
  • Pollen image
  • Pollen image

what's next

  • The app currently works only in English, yet pollen and plant names aren't easy to recognise for non-English speakers. Therefore, I plan to add multilingual support.
  • I'd also like to expand user account functionality by letting each user add a profile picture.