Skip to content
$ ash_
All work
2023/Frontend Developer/archived

Zero Waste Horizons

Location-aware waste finder + ML hazard classifier

A responsive sustainability dashboard visualising waste management trends across Victorian suburbs, with a location-based drop-off finder and hazardous waste classifier.

Stack

HTMLCSSJavaScriptMapping APIsMachine Learning

Problem

Victorian waste management data exists in abundance — the problem is that it lives in government reports nobody reads. A resident trying to dispose of old paint or a broken battery has no easy way to find the right facility. The data needed a face: something visual, location-aware, and actually useful for a person standing in their kitchen holding something they don't know what to do with.

My Contribution

Built the complete frontend application — data visualisation, mapping integration, and the image-based hazard classifier. My focus was making complex async data feel effortless to a non-technical user:

  • Dashboard visualising waste trends across Victorian suburbs with area comparisons over time
  • Location-based drop-off finder pulling from a mapping API to show nearby facilities by waste type
  • ML-powered image classifier — photograph an unknown item and get back a hazard classification and disposal recommendation
  • Responsive layout that works on mobile, where people are most likely to be when they actually need this

Architecture

Vanilla HTML, CSS, and JavaScript — no framework, which made the mapping and ML integrations more deliberate because nothing was abstracted away. The mapping layer uses a geolocation API to anchor results to the user's actual position. The image classifier runs against an external ML endpoint; the UI shows a clear loading state while waiting rather than appearing stuck.

The async flow — location permission → map load → waste type filter → results — was designed so each step gives the user feedback before the next one starts.

Outcomes

A working application covering all three feature areas: trend visualisation, location-aware drop-off finder, and hazard classification. The image classifier correctly identifies and categorises common household items across hazardous and non-hazardous categories.

Learnings

Making async ML inference feel smooth from the user's side is a design problem as much as a technical one. The API response takes 1–2 seconds — long enough to feel broken if you don't handle it. Showing a meaningful interim state (not just a spinner) while classification runs was the detail that made the difference between something that felt polished and something that felt unfinished.