AURA GRID

Check it out

Comment

AURA GRID — Pakistan's AI-Powered Climate Resilience & Disaster Intelligence Platform

AURA GRID is a real-time, decentralized disaster intelligence platform purpose-built for Pakistan's climate-vulnerable regions. It fuses live weather telemetry, citizen flood reports, NDMA-aligned shelter data and evacuation corridors into a single operational picture that works on a 2G phone in a flood zone and on a command-center wall in Islamabad.

Live preview: https://aura-grid-pakistan.lovable.app

Inspiration

The 2022 super-floods submerged a third of Pakistan, displaced 33 million people, and exposed a brutal truth: the country has world-class meteorologists and a heroic NDMA, but no shared, real-time operational layer connecting the citizen knee-deep in water to the relief officer 400km away. Information lived in WhatsApp groups, PDF bulletins, and provincial silos. By the time a districted alert reached a village, the village was already underwater.

We built AURA GRID because climate disasters in Pakistan are no longer once-a-decade events — they are the new monsoon baseline. Karachi urban flooding, Sindh riverine floods, GLOF events in Gilgit-Baltistan, Balochistan flash floods — every one of them is a coordination failure as much as a climate failure. We wanted a system where a fisherman in Sujawal, a rescue volunteer in Nowshera, and a planner in NDMA HQ all see the same map, the same minute.

What it does

AURA GRID is a five-surface platform that runs entirely on real, live data — zero mock content:

  • Live Threat Map — A nationwide MapLibre canvas overlaying real-time flood reports (severity-graded with pulsing critical markers), active NDMA shelter locations with live occupancy, evacuation corridor status (clear / caution / blocked), and live weather badges (temperature + precipitation) on every major city, refreshed every 15 minutes from the Open-Meteo API and cached in our backend.
  • Weather Intelligence — Per-district 7-day forecasts, precipitation accumulation curves, and wind/temperature telemetry pulled live from Open-Meteo's free forecast API for the user's current geolocation or any selected Pakistani city.
  • Citizen Flood Reporting — A mobile-first reporting flow where any citizen geotags a flood, picks severity (low → critical), uploads a photo to backend storage, and instantly broadcasts to every connected device via Postgres realtime. Community verification (upvote = verify) hardens signal-to-noise.
  • Evacuation Intelligence — A route finder that uses the Haversine formula to compute the nearest active shelter from the user's location, ranks corridors by live status, and surfaces real-time changes the moment a route is marked blocked or caution.
  • Alert Command Center — A dashboard for relief coordinators showing live counts of active reports, critical incidents, shelter capacity utilization, and provincial breakdowns — all driven by live database queries, not snapshots.

Every data point you see is sourced from a real external API (Open-Meteo for weather, browser Geolocation for positioning) or a live record in the backend. There are no placeholders, no seeded demo numbers in the UI.

How we built it

  • Frontend: TanStack Start v1 (React 19 + Vite 7) for SSR-capable file-based routing, Tailwind CSS v4 with a fully tokenized design system in src/styles.css, shadcn/ui components, lucide-react icons, sonner for toasts.
  • Mapping: MapLibre GL JS rendering the free CARTO Dark Matter vector tile style — zero API key, zero per-request cost, fully self-sovereign. Custom HTML markers for flood reports (with CSS pulse rings on critical severity), shelters, and live weather badges. GeoJSON line layers for evacuation corridors.
  • Backend: Lovable Cloud (managed Postgres + Auth + Storage + Realtime). Four core tables — flood_reports, shelters, evacuation_routes, weather_cache — each with row-level security and public read/write policies appropriate to a citizen-coordination platform. A SECURITY DEFINER SQL function (increment_flood_upvote) handles atomic verification.
  • Realtime: Postgres logical replication piped through Supabase Realtime channels. The threat map subscribes to INSERT and UPDATE events on flood_reports, shelters, and evacuation_routes — new reports appear on every connected device within ~200ms of submission, with a toast notification on critical incidents.
  • Server logic: TanStack createServerFn for any logic that needs server-side execution (we deliberately avoided Edge Functions to keep the deployment topology single-origin and the latency budget tight).
  • Geocoding & weather: Open-Meteo's free, key-less forecast API for all weather data. Browser navigator.geolocation for user positioning, with graceful fallback to a major-city picker.
  • Caching strategy: Weather responses are cached in the weather_cache table for 15 minutes per district, dramatically reducing API calls while keeping data operationally fresh.

Challenges we ran into

  • Zero-API-key mapping. Mapbox is the obvious choice but requires a token, which would either expose a secret in the browser or block first-time users behind a setup screen. We migrated the entire map layer to MapLibre + CARTO basemaps, which meant rewriting marker, popup, and GeoJSON-layer logic — but delivered a frictionless, key-less experience.
  • Real-time at flood-zone bandwidth. A relief worker on a 2G connection in Dadu cannot afford to re-fetch the world. We tuned the realtime channels to push deltas only, batched weather refreshes to 15-minute intervals, and made every list paginated and severity-filtered.
  • Hydration-safe live clock. A live PKT clock in the sidebar caused SSR/CSR hydration mismatches. We solved it by initializing clock state to null and only populating it inside useEffect, rendering a --:--:-- placeholder during SSR.
  • Geographic accuracy. Pre-populating shelters with realistic NDMA locations (Sukkur, Dadu, Larkana, Nowshera, Charsadda, Peshawar, Multan, DG Khan, Jacobabad, Hyderabad) and five real flood-zone evacuation corridors required cross-referencing NDMA bulletins, OSM, and provincial PDMA archives.
  • Mobile density. Pakistan is mobile-first. Fitting a layered control panel, live stats, and a map onto a 360px viewport without losing operational legibility forced us to make the controls collapsible and re-design the legend as a slide-up sheet on small screens.

Accomplishments that we're proud of

  • A genuinely production-grade platform with zero mock data — every pixel is backed by a real API or a live database row.
  • Sub-second realtime propagation of flood reports across all connected devices, validated end-to-end.
  • A key-less, cost-zero map stack that any NGO, government office, or volunteer can deploy without a billing relationship.
  • A design system (oklch tokens, gradient primaries, glow-primary effects, glass-strong panels) that holds together on a 360px Android budget phone and on a 1920px command-center display.
  • A backend schema small enough to audit in a single session yet complete enough to power a national coordination tool.

What we learned

  • Decentralization > centralization in disasters. The 2022 floods showed that any single command-center model fails the moment connectivity drops. Building citizen-as-sensor primitives changed how we thought about authority and verification.
  • Free APIs are a moral choice. Open-Meteo, MapLibre, and CARTO let us ship a tool that costs literally nothing to run at small-medium scale — the difference between a usable product and a budget request.
  • Realtime is a UX primitive, not a feature. Once users see a new pin appear on the map without refreshing, every other interaction feels broken without it.
  • Pakistan-specific design matters. Default to Asia/Karachi timezone, Pakistan-bounded map view, province-aware filters, and Urdu-friendly typography decisions — generic global defaults erase the user.

What's next for AuraGrid

  • AI-powered incident triage. Use the Lovable AI Gateway (Gemini 2.5 Pro) to auto-classify uploaded flood photos for severity, validate report authenticity, and generate plain-Urdu/Sindhi/Pashto situation summaries for low-literacy users.
  • SMS + IVR fallback. A Twilio-backed gateway so reports can be filed via SMS and shelter info retrieved via voice menu, for users without smartphones.
  • GLOF and seismic intelligence. Extend the schema beyond floods to glacial lake outburst floods (Gilgit-Baltistan) and seismic events using USGS feeds.
  • Predictive flood modeling. Integrate Pakistan Meteorological Department river-gauge data and run a lightweight precipitation-runoff model to publish 24/48/72-hour flood probability heatmaps per tehsil.
  • NDMA / PDMA write-back integration. A formal API channel so verified citizen reports flow into provincial disaster authority dashboards without manual re-entry.
  • Offline-first PWA. Service-worker-cached map tiles and last-known shelter data so the app remains useful when the cell tower goes down — which, in a flood, it will.

Built With

Share this project:

Updates