ViaSafe

Inspiration

The idea for ViaSafe came from a frustrating personal experience, hitting a pothole in the middle of the night on an unfamiliar road, with no warning and no way to tell other drivers about it. We started asking around and realized almost everyone had a similar story: a flooded street that wasn't marked, a fallen tree blocking a road with no detour sign, a broken traffic light causing near-accidents for days before anyone fixed it.

What struck us wasn't just the hazards themselves, it was the silence around them. There was no easy way for citizens to report these issues, no public platform where communities could collectively say "this road is dangerous," and no real pressure mechanism to make local governments act quickly. We built ViaSafe because we believe road safety shouldn't depend on who you know or how loud you can complain. It should be a community effort, open, visible, and impossible to ignore.

What it does

ViaSafe is a crowdsourced road hazard reporting platform designed to improve public and traffic safety in Indonesian cities. Citizens can report road hazards including potholes, flooding, fallen trees, and broken traffic lights directly through an interactive map. Location input is flexible: users can let the app automatically detect their position via GPS, click directly on the map, or type an address manually making reporting as frictionless as possible regardless of the situation. Each report includes a title, description, hazard severity level, and an optional photo. The community can upvote or downvote reports to surface the most urgent hazards, with urgency automatically calculated based on severity level and vote count. Local government officials can monitor active reports, track resolution status, and prioritize responses through a dedicated government dashboard. ViaSafe bridges the gap between citizens and local authorities, creating an open, transparent platform that empowers communities to hold local governments accountable for road maintenance.

How we built it

Our team built ViaSafe from scratch throughout the Hackathon using React frontend that communicates with Supabase as our backend and database to make the development process more efficient. The map layer was built with Leaflet.JS library with OpenStreetMap tiles and Open Source Routing Machine (OSRM) for planning an alternative route around a reported hazard. We also implemented a system to prevent any reports that sends an image containing NSFW contents by using NSFWJS library.

Challenges we ran into

One of the first challenges we faced was handling location input in a way that felt seamless. Supporting three different input methods: GPS, map click, and manual address search. Sounds simple on paper, but getting all three to feed into the same form state consistently, especially with reverse geocoding delays from Nominatim, took more debugging than expected.

Accomplishments that we're proud of

We are proud that we were able to work together and manage time well so that we were able to finish the project in time.

What we learned

We learned a lot about working with map-based UIs. Leaflet.js seems straightforward at first, but building a good experience around it with custom markers, layer groups, click handlers, route overlays requires a much deeper understanding of how the library manages its own DOM outside of React's control. It forced us to think differently about state and side effects.

This hackathon also taught us how to properly prioritize. With a 30-hour time limit, we quickly learned to distinguish between features that were truly essential to the core experience and features that were nice-to-have additions. That clarity helped us allocate our time effectively building the things that mattered most first, and only reaching for extras if time allowed.

Most importantly, we learned more about design thinking, especially about human centered design and how to make the application easy to use.

What's next for ViaSafe

Our current app is still the start of it all, we believe in the future it can help with more and more problems. Considering the transparency and the ease of use, we think the app can be open to any possibilities. For example, when it comes to road hazards we need someone to fix it and we can make this app to be the center of it as well.

Built With

• leaflet.js
• nsfwjs
• openstreetmap
• osrm
• react
• supabase
• tailwind
• vite