What it does
- Pick your roof on a 3D map. Search your sector (F-7, G-11...) and tap your house. The area comes from its OpenStreetMap building outline, live from OpenFreeMap vector tiles. If your roof isn't mapped, draw it or type the area.
- Replay a real storm. Choose a recorded Islamabad storm; your roof gets the reading from the nearest rain gauge that reported it.
- See what you can collect. Rain falls on your roof, litres count up, and one card settles on what your roof can collect and how much overflowed your tank.
- Open your Rain Report. A full-screen report, in sections: Overview (tanks filling, three gauges), Water (a flow diagram of where each litre goes: your tank, a recharge well or down the nalah; recharge is potential routing, not measured infiltration), Season (a typical year from the WMO 1991 to 2020 monthly normals), Money, Street (bring your neighbours, share one street link) and Get it installed. A link can open the Report directly on any section (
&view=report&tab=money).
RainGrid as a service (Zindigi demo)
In the Rain Report, "Get it installed" recommends a package (Basic, Standard or Plus) with one 2,000 L tank (two on roofs over 400 m²) and a recharge well for the overflow, with more tanks as an option, prices it line by line from sourced parts, and shows 6 and 12 month instalments (indicative instalments, subject to Zindigi's terms). A 3D roof check lets you mark where a tank and downpipe would go, and a free site visit request goes out over WhatsApp. It runs in demo mode until the team number is set: see docs/zindigi-demo.md.
Highlights
- A living 3D Islamabad hero. One WebGL scene brings a photo plate of the Margalla Hills to life with depth parallax, rolling monsoon clouds, mist, sun shafts, GPU rain and a shimmering wet street. A crystal droplet hangs in front of it, refracting the city behind it and rippling when you touch it.
- Per-house roof picking. Tap a single house, even in a joined block, and add the parts of a multi-part building.
- Plain-language results. Every number is explained in everyday words, with ranges instead of false precision.
- Guided tour. First-time visitors get a short walkthrough, and "How it works" replays it any time.
- Phone stepper sheet. On phones the steps come one at a time in a bottom sheet, so the map stays usable.
- Fallbacks. Low-end devices get a light CSS version of the hero, and reduced motion gets a still one with no loader or flight. Shared links open straight on the map.
Run it
npm install
npm run dev # http://localhost:3000
npm test # rain engine unit tests
npm run build
npm run data:footprints # rebuild the static OSM footprints (currently unused by the map)
No API keys needed. Everything runs on free, keyless services.
Optional: set NEXT_PUBLIC_CONTACT_WHATSAPP (the team's WhatsApp number) to take the site visit and installer forms out of demo mode. It is read at build time.
Project layout
| Path | What |
|---|
src/lib/engine/ | The rain engine. Pure TypeScript, unit tested, the only source of numbers |
src/data/storms.ts | Sourced storm events and gauge locations |
src/data/sectors.ts | Islamabad sector search (approximate centres) |
src/config/city.ts | Everything city-specific |
src/components/ | Map, rain canvas, panels, landing, loader and guided tour |
src/components/report/ | The Rain Report overlay and its sections (lazy-loaded) |
src/components/three/ | The hero's WebGL scene: living plate shader, GPU rain, refracting droplet, fallback detection |
scripts/build-hero-assets.mjs | Compresses the Islamabad plate and builds its hand-tuned depth map and effect masks |
scripts/build-logo.mjs | Builds the favicon, the Apple touch icon, the transparent README logo and the header mark from the logo art |
scripts/extract-footprints.mjs | Builds public/data/footprints/islamabad-demo.geojson (static OSM footprints for E-11, F-10, F-7, G-11, H-8 and Satellite Town, Rawalpindi). Kept in the repo but not used by the map: static footprints drew on top of the live buildings, so the map now uses live buildings only, with draw and type-area as the fallback |
scripts/copy-maplibre-worker.mjs | Copies MapLibre's worker into public/ (runs before dev and build) |
docs/scope-decisions.md | Explicit feature cuts and their honesty rationale |
src/config/packages.ts | Service packages, parts, prices and sources, and the maintenance plan |
src/config/tankers.ts | Tanker prices and the assumed tanker size for the comparison |
docs/qa/2026-09-27.md | Desktop, mobile and production-link QA record |
docs/qa/2026-10-25-performance.md | Phone performance pass, before and after |
docs/zindigi-demo.md | Demo mode and what to fill in before going live |
The formula
harvest = roof area × usable share × (rain − first flush) × runoff coefficient
1 mm of rain on 1 m² is exactly 1 litre. Results are ranges, rounded to 100 L. Assumptions and every source are listed in the app ("How we calculate, and every source").
Credits
- Map tiles: OpenFreeMap, data © OpenStreetMap contributors
- Satellite (roof check): Sentinel-2 cloudless 2016 by EOX IT Services GmbH (contains modified Copernicus Sentinel data 2016), CC BY 4.0
- Weather: Open-Meteo (CC BY 4.0)
- Prices: watertank.pk (tanks, 2026), Avenir Developments (plumbing labour and UPVC pipe, Q4 2026), aquafilter.pk (UV filter); tanker prices from APP and Dawn. Links in the app's sources drawer
- Map engine: MapLibre GL JS. Geometry: Turf.js
- 3D: three.js, React Three Fiber, drei, postprocessing (via React Postprocessing) and simplex-noise
- Imagery: the Islamabad background plate and the logo were generated with ChatGPT image generation, edited by Mayaar OS. The plate's depth map is hand-tuned, not measured terrain
- Rain readings: Pakistan Meteorological Department, as reported by APP, ARY News, ProPakistani, Arab News, INCPak and WE News (links in the app)
- Climate normals: Pakistan's WMO 1991-2020 normals submission, via NOAA NCEI (Islamabad Airport station 41571)
- Runoff coefficients: Indian Railways Institute, Rain Water Harvesting manual (2022)
- First flush: Lebanon Ministry of Agriculture / UNDP greenhouse rainwater-harvesting guideline (typical 0.5 mm diversion height)
- City facts: CDA, PCRWR (via Accountability Lab), Dawn
Team
Built by Mayaar OS (Basit and Mustafa) for Banao Imaginathon 2026.
Honesty
Estimates are preliminary, not engineering advice. We used AI tools to help build this app. No number in the app comes from AI.
