Mehfooze

Stay safe, Stay ahead. Mehfooze forecasts your air, weather, and flood risk 24–72 hours ahead — and tells you exactly what to do about it.

Comment

Inspiration

Lahore — a city of 11 million people — consistently ranks among the top 3 most polluted cities on Earth. In winter, AQI regularly crosses 300+ (Hazardous). Smog season shuts down schools, grounds flights, and sends thousands to hospitals. Yet most citizens have no idea what they're breathing on any given day. Existing AQI apps show raw numbers — a single index buried in a weather app. They don't answer the questions that actually matter: Should I take my kid outside today? Is it safe to go for a run? Do I need a mask for my commute? We wanted to build something different — not just a dashboard, but a personal safety companion that understands who you are and tells you exactly what to do. That's how Mehfooze (مہفوظ — Urdu for "safe/protected") was born.

What it does

Mehfooze is an AI-powered city safety and advisory platform that:

  • Monitors real-time air quality across Lahore's neighborhoods (Gulberg, Johar Town, Shahdara, Model Town, DHA) using AQICN data
  • Forecasts AQI up to 72 hours ahead using Open-Meteo CAMS atmospheric data
  • Tracks your cumulative pollution exposure throughout the day across home, work, and outdoor locations — compared against WHO 24-hour guidelines
  • Delivers personalized advisories based on your profile — commuter, parent, sensitive individual, or outdoor worker — each with tailored guidance
  • Provides actionable safety checklists (Daily Commute, Outdoor Exercise, Home & Sleep) with streak tracking to build long-term healthy habits
  • Visualizes pollution on an interactive map with search, pollutant layer toggles (PM2.5, PM10, O₃, NO₂), and zone-level AQI markers
  • Features "Rio" — an AI assistant character (rendered in 3D) that gives proactive tips based on your current AQI and profile

How we built it

Frontend: React 18 + TypeScript, built with Vite for fast development. Tailwind CSS for a consistent Material Design-inspired UI. Leaflet + React-Leaflet for interactive maps. Recharts for forecast and exposure visualizations. Three.js + React Three Fiber for the 3D "Rio" character. Backend: Python FastAPI server that aggregates data from multiple APIs, serves advisory endpoints, and manages zone data. Deployed with Docker. Data Sources (all free, no vendor lock-in):

  • AQICN API — real-time AQI readings from ground stations
  • Open-Meteo Air Quality API — 3-day AQI forecast (CAMS European reanalysis data)
  • Open-Meteo Weather API — temperature, humidity, wind forecasts
  • Nominatim — reverse geocoding (coordinates → place names)
  • OSRM — route calculation for safe commute planning
  • Geoapify — map tile provider Auth & Infrastructure: Firebase Authentication (email/password + Google sign-in). Vite dev proxy routes /api requests to the FastAPI backend. Environment variables for all secrets. Design approach: Responsive-first — works on mobile (bottom nav) and desktop (sidebar). Material Symbols for icons. Google Fonts (Public Sans + Inter). Dark/light theme toggle.

Challenges we ran into

  1. Data fragmentation — Air quality data comes from different providers with different formats, units, and update frequencies. AQICN uses US AQI, Open-Meteo uses µg/m³ concentrations, and forecast data has different temporal resolution. Normalizing all of this into a single, consistent AqiReading interface required careful mapping and fallback logic.
  2. Geolocation reliability — Browser geolocation is unreliable in dense urban areas (Lahore's buildings block GPS). We implemented a graceful fallback to Lahore's center coordinates with Nominatim reverse geocoding, but balancing accuracy with user experience was tricky.
  3. Offline-first vs. real-time tension — AQI data is critical but network-dependent. We used localStorage for user preferences, checklist history, and onboarding state, but real-time AQI requires connectivity. Finding the right balance between caching and freshness took iteration.
  4. Profile-based advisory logic — Making advisories contextually different for commuters vs. parents vs. sensitive individuals — while keeping them accurate and not alarmist — required careful threshold tuning across AQI ranges.
  5. Map performance — Rendering multiple AQI zone markers with color-coded circles on Leaflet while maintaining smooth zoom/pan on mobile devices required optimizing marker rendering and avoiding unnecessary re-renders.

Accomplishments that we're proud of

The profile system — Most AQI apps give everyone the same advice. Mehfooze adapts its entire advisory pipeline based on who you are. A parent gets different guidance than a commuter for the same AQI reading. This is the core innovation. Real data, real UX — Every AQI reading, forecast, and map marker pulls from live APIs. No mock data in production. The app works right now for anyone in Lahore. Exposure tracking — The cumulative exposure tracker (compared against WHO 24h guidelines) is a feature we haven't seen in other AQI apps. It shifts the focus from "what's the air right now" to "how much have I inhaled today." Responsive design — From a 320px phone to a 1440px desktop, the layout adapts cleanly. Mobile gets a bottom nav, desktop gets a sidebar. Map pages are full-bleed on both. Clean architecture — TypeScript interfaces for all data models, separated contexts (Auth, AQI), dedicated service layer, custom hooks. The codebase is maintainable and extensible.

What we learned

Free APIs are powerful but fragile — AQICN's free tier has rate limits. We learned to implement Promise.allSettled for parallel requests, fallback logic when APIs fail, and graceful degradation rather than hard errors. User-centered design beats feature density — The hardest part wasn't building features — it was deciding what to show and when. The "Rio says" tip system forced us to think about timing and context, not just data display. Air quality is deeply personal — Through user research, we learned that a mother checking AQI before sending her child to school has fundamentally different needs than a delivery rider planning routes. The profile system emerged from this insight. PWA + Firebase is a viable mobile strategy — For a hackathon timeline, building a native app wasn't feasible. The web app + Firebase auth + responsive design gave us 80% of the mobile experience with 20% of the effort.

What's next for Mehfooze

Flood risk forecasting — Integrate Pakistan Meteorological Department data and Indus River flood alerts to extend beyond air quality into comprehensive climate preparedness Push notifications — Firebase Cloud Messaging for AQI threshold alerts ("AQI in Gulberg just crossed 150 — consider staying indoors") Historical analytics — Monthly/ yearly exposure trends and health correlation insights Community features — User-reported conditions, neighborhood safety ratings Multi-city expansion — The architecture supports any city with AQICN coverage (500+ cities globally); Karachi, Delhi, Dhaka are natural next targets Indoor air quality — IoT sensor integration for home/office AQI monitoring Partnerships — Integration with Lahore Waste Management Company (LWMC) and Punjab Environmental Protection Department for official data feeds

Built With

Share this project:

Updates

Submission history