Eco Lens

Location-aware environmental intelligence app hat tells users air quality, pollution and Heat risk

Comment

EcoLens: Project Story

Inspiration

EcoLens was inspired by a simple idea: make environmental conditions—air quality and heat risk—instantly understandable and actionable for everyday decisions. Whether planning a run, commuting, or deciding outdoor activities with kids, people need clear guidance, not raw numbers. We wanted a map-first experience that feels intuitive, with concise health insights and concrete recommendations.

What We Built

  • A map-centric Next.js app that visualizes city-level Air Quality Index (AQI) and heat risk.
  • Interactive 2D and 3D views using Mapbox GL, including high-visibility extrusions representing AQI and temperature.
  • Fast city search with Mapbox Geocoding and debounced autocomplete.
  • A merged forecast view (weather + air pollution) with lightweight trend projection using quadratic regression.
  • Practical, timely AI-generated health guidance powered by Gemini.
  • Client and server caching to keep the experience snappy and resilient.

How It Works

  • Framework & UI: Built on Next.js (App Router) and TypeScript, with modern, responsive components and charts.
  • Data Sources:
    • OpenWeather APIs for current weather, air pollution, and forecasts.
    • Mapbox Geocoding for location suggestions and coordinates.
  • Environment API: /api/environment fetches weather + AQI + forecasts in parallel, computes heat index using the NOAA formula, normalizes AQI (mapping OWM’s scale to US AQI bands), and merges time series for an 24h outlook. Responses are cached (Redis, 10-minute TTL) to improve performance and reduce API calls.
  • Geocode API: /api/geocode provides fast suggestions tied to Mapbox, enabling frictionless city discovery.
  • Map & 3D: The map uses extrusions to create hexagonal or pillar-like shapes sized by AQI/temperature, improving readability at a glance and adding a memorable visual cue.
  • Forecast & Trends: The chart overlays current data with a simple quadratic regression to hint at near-term trends, balancing clarity and performance.
  • AI Insight: Gemini summarizes risk and recommends actions in two concise sentences—prioritizing health safety without overwhelming the user.
  • Caching: Client-side localStorage for quick revisits; server-side Redis for consistent, low-latency responses.

What We Learned

  • 3D Mapping UX: Fill-extrusion layers can dramatically improve comprehension, but require careful pitch/zoom and outlines for clarity.
  • Time Series Alignment: Merging weather (3h cadence) with pollution (hourly) requires pragmatic pairing and resilience to sparse data.
  • AQI Normalization: Translating provider-specific indices to familiar US AQI bands is essential for clear messaging.
  • Heat Index Computation: The NOAA approach in Celsius provides a user-friendly approximation that aligns with everyday understanding of heat risk.
  • Caching Strategy: Combining localStorage and Redis offers meaningful speed-ups while protecting APIs from rate limits.
  • Search UX: Debounced autocomplete with graceful fallbacks (IP-based location, manual entry) reduces friction.

Challenges

  • API Variability & Limits: Handling intermittent failures and keeping the UI responsive under rate limits.
  • Data Normalization: Reconciling AQI scales across providers without confusing users.
  • 3D Interactions: Ensuring clicks on extrusions behave predictably across modes and devices.
  • Performance Tuning: Balancing visual fidelity (large extrusions, outlines) with runtime performance.
  • Forecast Synchronization: Keeping trends meaningful when timestamps don’t line up perfectly.
  • Secrets Management: Coordinating multiple API keys (Mapbox, OpenWeather, Gemini) in a secure, local-friendly way.

Future Work

  • More Layers: Visualize additional pollutants and humidity/heat stress layers with toggles.
  • Personalization: Risk scoring by user sensitivity (e.g., asthma, elderly, athletes).
  • Alerts: Subscriptions for AQI spikes or heat advisories.
  • Offline & Edge: Smarter caching and edge functions to keep results quick globally.
  • Accessibility: Expanded ARIA labels and alternative visual encodings for color-blind users.

EcoLens aims to turn complex environmental data into clear, timely guidance—helping people make safe, confident decisions outdoors.

Share this project:

Updates