City Air Watch

💡 Inspiration

Every morning, millions of Indians step outside without knowing they're breathing poison.

India holds 14 of the world's 20 most polluted cities. Children walk to school, elderly people take their morning walks, athletes train outdoors — all while PM2.5 levels silently spike to hazardous levels. The data exists. The monitoring stations exist. But no one is translating that raw data into one simple human answer:

"Is it safe to go outside right now?"

That question is what inspired City Air Watch.

🔨 How We Built It

We used React 18 + TypeScript for the frontend, WAQI API for live pollution data from CPCB stations across India, and React-Leaflet + Recharts for visualizations.

The prediction engine uses linear regression on recent PM2.5 readings:

$$\hat{y} = mx + b$$

Where $ m $ is the pollution trend rate, $ x $ is the time step, and $ b $ is the baseline — giving clean +1hr and +2hr forecasts that update every 2 minutes automatically.

Stack:

🗺️ React-Leaflet → live city map with color-coded markers
📈 Recharts → time-series charts with predicted values
🤖 Linear regression → PM2.5 forecast engine
🌐 WAQI API → real CPCB station data for 140+ Indian cities
⚡ Vite + TanStack Router → fast static deployment on Render

🚧 Challenges We Faced

Server/Client boundary — TanStack Start blocks server imports in client code. Our WAQI fetch was inside a server function which broke the static build. We refactored it into the client store using import.meta.env variables.

WAQI inconsistency — Some Indian stations return "-" instead of a number when offline. We built null-safe parsers and silent fallbacks for every city.

React-Leaflet SSR — Leaflet requires the window object which breaks during build. Solved with dynamic imports and client-only rendering guards.

140 cities at scale — Curating accurate coordinates for 140+ Indian cities across all states and validating each one against live WAQI coverage took careful testing.

📚 What We Learned

Working with real government pollution data (CPCB via WAQI API)
Implementing time-series prediction with linear regression in TypeScript
Building resilient APIs — graceful fallbacks when live data fails
User-centered design — turning complex AQI numbers into simple human decisions
Deploying production React apps on Render with environment secrets