Hillcrest Water Watch

A no-login website for Hillcrest, Durban, that helps households log water outages, share the record with neighbours, and reach eThekwini's official fault lines in one tap.

Comment

Inspiration

I live in Durban and go to school in Kloof, next to Hillcrest in the Outer West of eThekwini. When the water goes off, people find out from neighbourhood chats, but the fault still has to be logged with the municipality, and it is easy to lose track of who reported what and which reference number the city gave. In January–February 2025 the municipality warned that the Pipeline 53 shutdown during the N3 upgrade would restrict supply in Hillcrest and nearby areas, which showed how many households can be affected at once. ✏️ When the water goes off at home, nobody is sure whether it has been reported or how long it will last.

What it does

  • Log an outage with a short form: no water, low pressure, discoloured water, or a street leak, with area, optional landmark, start time, an optional municipal reference number, and a note.
  • Mark a report resolved (or active again) and see how long it lasted.
  • A neighbourhood status view with an active-by-area breakdown, built only from logs saved on that device. It never pretends to be a live municipal map.
  • A "Report officially" panel with eThekwini's public fault lines (080 13 13 013, 080 311 1111, WhatsApp 073 148 3477, [email protected]) and the Hillcrest Sizakala centre on Delamore Road, plus a copyable report draft built from active logs.
  • Copy a plain-text summary for a street WhatsApp group, or export and import logs as a JSON file to move them between phones.
  • #demo loads clearly labelled sample logs so judges can see a busy street straight away.

How I built it

Plain HTML, CSS, and JavaScript with no framework, no build step, no server, and no account. Logs live in the browser's localStorage; sharing is a JSON file the user controls. It is hosted as a static site on GitHub Pages. Fonts are self-hosted, so the page makes no third-party requests.

Challenges I ran into

  • Being honest about data. There is no public live outage feed I could use, so the status view only counts logs on that device and says so on screen.
  • Making it work on a cheap phone with patchy data: no frameworks, small files, and everything readable on a 390-pixel-wide screen.
  • Accessibility: the section tabs follow the ARIA tabs pattern (arrow keys, Home and End), and I darkened the small grey labels after a contrast check. ✏️ The hardest part for me was keeping the whole thing simple enough to work offline on any phone.

Accomplishments that I'm proud of

  • Lighthouse on mobile: accessibility 100, best practices 100, SEO 100, performance 99–100, with zero layout shift.
  • Every municipal number and place name on the site is linked to a source in the README.

What I learned

✏️ I learned how localStorage works, how to make tabs keyboard and screen-reader friendly, and why it matters to check every fact against a source.

What's next

  • Let a street opt in to sharing logs with each other (it is device-only today).
  • isiZulu and Afrikaans versions of the form.
  • Work with a ward councillor or residents' association to see whether a shared outage log would help them follow up with the city.

Built With

Share this project:

Updates