Pollen & Allergy Forecast Web App
Overview
A consumer-facing web app that shows local pollen levels and an allergy (allergic rhinitis) forecast for a user’s location, with interactive gauges, a map overlay of pollen intensity, per-species breakdowns and health recommendations.
Why It Exists
Allergy sufferers want a quick, location-aware read on “how bad is it today and this week.” This project explored turning pollen/forecast data into a clean, glanceable interface backed by a thin API proxy.
What We Built
A two-part app. The client is a modern React 19 + Vite frontend using Material UI, Tailwind CSS 4 and Radix UI primitives, with a component set including Map, PollenOverlay, PollenLevelCard, ResultGauge/Gauge, SpeciesSection, HealthSection and ForecastSection, plus hooks (usePollenData, useLocation) and an AppContext for state. Mapping uses @vis.gl/react-google-maps, data fetching uses TanStack Query, and a buildForecast utility shapes the multi-day forecast. The server is a small Express 5 + CORS + dotenv service acting as an API proxy/backend.
Technologies & Approach
React 19 with a Vite build and a Tailwind/MUI/Radix hybrid UI gives a fast, polished frontend; TanStack Query handles caching of location-keyed forecast data; and the Express layer keeps API keys and data-source access server-side.
Outcome / Impact
A functional, good-looking pollen/allergy forecast experience that demonstrates geospatial visualization and forecast UX on a current React stack.
Capabilities Demonstrated
- Geospatial overlays and location-aware data with Google Maps + TanStack Query
- Forecast UX patterns: gauges, level cards, multi-day breakdowns
- Modern React 19 + Vite + Tailwind/MUI/Radix component architecture
- Thin Express API-proxy backend to protect data-source credentials