Road safer

Inspiration

Navigating roads safely in Kerala during monsoons or heavy traffic can be unpredictable due to sudden waterlogged areas, deep potholes, landslides, and blind curves. The inspiration behind this project was to build a hyper-local, community-driven safety tool specifically tailored for regions like Trivandrum to help drivers avoid road dangers in real-time.

What it does

It is an interactive web-based road hazard navigation system that allows users to: Explore a live map of Trivandrum populated with crowdsourced road hazards including potholes, waterlogged sections, debris, and blind curves. View hazards sorted dynamically by distance from their current GPS location. Calculate safe routing between custom start points and destinations while avoiding potential hazards. Check real-time weather and rain warnings at their destination via the Open-Meteo API. Report new road hazards on the map with custom descriptions and live camera or media photo/video proof. Mark reported hazards as fixed once photographic proof is verified.

How we built it

Frontend & UI: Built completely with HTML5, CSS3, and modern JavaScript, featuring custom glassmorphism design tokens and light/dark mode support. Mapping & Routing: Integrated Leaflet.js for interactive map rendering, custom marker layers, and the Leaflet Routing Machine for navigation paths. Geocoding & Location: Utilized OpenStreetMap's Nominatim API for place searches and autocomplete, alongside the browser's Geolocation API for live user positioning. Weather Integration: Connected to the free Open-Meteo API to fetch live precipitation and temperature data for destination weather safety warnings. Persistence: Handled local storage to save user-reported hazards, fix statuses, and theme preferences seamlessly.

Challenges we ran into

Ensuring that crowdsourced media uploads (photos and videos) could be previewed cleanly and saved within browser local storage limitations during a hackathon prototype stage. Managing complex asynchronous calls for map geocoding autocomplete alongside real-time distance calculations without slowing down the user interface.

Accomplishments that we're proud of

Successfully creating a fully functional, highly polished mapping application entirely from scratch using frontend technologies without requiring a complex backend database. Implementing a smart distance-sorting dropdown system that instantly organizes dozens of regional hazards relative to the user's live GPS coordinates. Designing an intuitive reporting workflow that lets users capture camera proof directly or upload files to validate and mark hazards as fixed.

What we learned

Advanced manipulation of Leaflet.js map layers, custom HTML marker elements, and dynamic routing boundaries. Efficient handling of browser APIs like Geolocation and FileReader for media handling. The importance of responsive, mobile-first design when building emergency or utility applications meant to be used on the go.

What's next for Road safer

Integrating a real backend database (like Firebase or Supabase) with user authentication so crowdsourced hazards sync globally across all app users in real time. Expanding the map coverage from Trivandrum to span major districts across Kerala. Adding turn-by-turn voice navigation prompts that warn drivers audibly as they approach dangerous road spots.

Built With

• crowdsourced
• css3
• geolocation-api
• html5
• javascript
• leaflet.js
• open-meteo-api
• openstreetmap