Safe-Roads Map

ML-Inspired Road Infrastructure Monitoring • Smart Navigation • Pothole Awareness

Live Demo  •  Repository  •  Safe-Roads Org

---

Overview

Safe-Roads Map is the mapping & navigation module of the Safe-Roads initiative—built to support safer travel and better infrastructure decisions through pothole awareness, real-time mapping, and intelligent routing.

Live Website: https://map-tau-taupe.vercel.app/

---

What this app does

• Visualizes pothole hazards on an interactive map
• Helps users plan routes and navigate with step instructions
• Provides proximity voice alerts for detected potholes
• Supports location tracking and mobile-friendly navigation behavior
• Integrates with Supabase for pothole data + realtime updates (optional)

---

Features

• Interactive map UI (Leaflet + React)
• Pothole layer toggle + pothole detail preview
• Route planning with multiple route options
• Avoid potholes routing option
• Live location tracking (GPS + fallback to IP geolocation)
• Navigation mode with step instructions
• Voice alerts when hazards are nearby
• Isoline (reachability) overlay (time-based area)
• Realtime pothole updates (Supabase channel)

---

Tech Stack

• Frontend: React 19, TypeScript, Vite
• Styling/UI: Tailwind CSS, Motion, Lucide
• Maps: Leaflet, react-leaflet
• Database (optional): Supabase (Postgres + Realtime)
• Geospatial APIs: Geoapify (geocoding, routing, isolines, route planning)

---

Getting Started (Local)

Requirements

• Node.js 18+ (recommended: Node 20+)
• npm (or pnpm/yarn)

Install

npm install

Environment variables

cp .env.example .env

Required

• VITE_GEOAPIFY_API_KEY

Optional

• VITE_SUPABASE_URL
• VITE_SUPABASE_ANON_KEY

Run

npm run dev

Open: http://localhost:3000

---

License

This project is licensed under the MIT License — see the LICENSE file for details.