Beach Water Quality — Metro Vancouver
A bilingual, WCAG 2.1 AA public-health data service presenting E. coli readings for 41 Metro Vancouver beaches — eleven years of monitoring data, answering one question: can I swim here?
Visit Live SiteThe Challenge
Metro Vancouver samples beach water weekly, but the results live behind a clunky map and health-authority pages that block programmatic access. The public data existed; a public-facing answer did not. Health data also carries a hard safety constraint: a stale reading must never be presented as a current all-clear.
Our Solution
We built a fully static Next.js site over Metro Vancouver's ArcGIS services, with a three-valued status model that refuses to render a verdict on out-of-season data, an accessible map with colourblind-verified markers, per-beach history charts across 13,000+ readings, and full English/French localization. A weekly automated refresh validates upstream data before committing it.
Key Results
- Lighthouse 100 in accessibility, SEO, and best practices on every page, both locales, mobile and desktop
- Status colours verified by simulation against deuteranopia, protanopia, tritanopia, and greyscale — never colour alone
- Zero runtime dependency on the upstream government server: static build, weekly validated data refresh
- Full French localization including locale-correct number and date formatting
Tech Stack
Next.js
Tailwind
Vercel