Water Restrictions Website
An interactive public website displaying current water restrictions across New Zealand via a searchable map. Also serves as the documentation hub for the Water Restrictions API. Built with Next.js.
The Water Restrictions Website makes it easy for anyone to check current water restrictions in their area. It pulls data from the Water Restrictions API and displays it on an interactive map, allowing users to search by area and view restriction levels and rules at a glance.
Beyond the map, the website also serves as the documentation hub for the API - replacing the original Docusaurus-based docs site. It includes a blog for project updates and announcements too.
Implementation ⚙️
Tech stack
This project uses my standard platform setup.
Frontend:
- Next.js - React framework with server-side rendering
- Tailwind CSS - Styling
- MapLibre GL JS - Interactive map rendering
Documentation:
- Fumadocs - Documentation framework for Next.js
- Built-in API playground integration
Infrastructure:
- DigitalOcean App Platform - Hosting
- Terraform - Infrastructure as code for managing the project’s resources
- GitHub Actions - CI/CD for automated deployment
Interactive Map 🗺️
The core feature is an interactive map showing water restriction areas across New Zealand. Users can click on an area to see its current restriction level and the rules that apply.
Clicking on an area reveals the current restriction level and a breakdown of the rules that apply - what’s allowed, what’s restricted, and any specific conditions.
Optimising Map Data
One of the biggest technical challenges was finding the right balance for map data detail. The area boundaries are sourced from Stats NZ and LINZ Data Service - high-quality datasets, but extremely detailed.
The original data was far too detailed for web use. The large file sizes made API responses slow and bogged down map interactions. Using QGIS, I simplified the boundary data significantly while preserving enough accuracy to be useful. The simplified data is then served as GeoJSON from the API. Finding the right balance between file size and visual fidelity took some experimentation.
Search Functionality
Users can search for areas by name, making it easy to find restriction information for a specific location.
Documentation Hub 📚
Rather than maintaining a separate documentation site, I integrated the API docs directly into the website using Fumadocs. This was a deliberate choice - I wanted a seamless experience without building my own documentation framework from scratch.
Fumadocs was a perfect fit. It integrates natively with Next.js and includes a built-in API playground, which lets developers test endpoints directly in the browser. This replaced the Scalar integration from the original docs site.
Performance Considerations ⚡
To improve load times and reduce unnecessary load on the API, the website uses server-side rendering with an in-memory cache. The cache has a TTL of 30 minutes, which strikes a balance between freshness and performance - water restrictions don’t change that frequently, so slightly stale data is acceptable.
Blog 📝
The website also includes a blog for sharing project updates, new feature announcements, and the occasional deep dive into technical decisions.
Future Plans 🚀
There are a few features I’d like to add over time. The full list is on the roadmap, but some highlights include:
- Notifications - Subscribe to alerts when restrictions change in your area (sign-up via the website, with the API handling the notification processing)
- Historical data - View past restriction levels once supported by the API
- Scheduled changes - Show upcoming restriction changes based on planned schedules, rather than only reactive updates
- Alternative view modes - List view alongside the map