SafeSteps

Inspiration

Navigating campus safely can be stressful for students, especially at night or in areas with heavy traffic or poorly lit paths. I wanted to build a tool that empowers students to make smarter, safer choices while walking around campus, helping them avoid high-risk areas in real time.

What it does

SafeSteps is a web app that allows users to:

• Mark unsafe areas on a campus map using intuitive colour-coded circle markers: dark areas (black), dangerous traffic (orange), harassment-prone spots (red).

• Calculate the safest walking route (green) and an alternate route (yellow) that dynamically avoids marked danger zones.

• Enter their current location and destination through an interactive panel and get real-time route calculations, making navigation easy and safe

How we built it

I used:

Next.js & React for building the web app and UI. Leaflet for interactive mapping and marker management. OpenRouteService API for real-time route calculations that respect safety markers. Clean, responsive design for intuitive usability on desktops.

Challenges we ran into

• Managing route recalculation while avoiding markers in a 50-meter radius.
• Fixing dependency conflicts with React and Leaflet packages during development.
• Ensuring real-time updates were smooth without slowing the interface

Accomplishments that we're proud of

• Developed a fully functional route safety system with green and yellow routes.
• Interactive circle markers that clearly indicate risk type and integrate with routing.
• A polished control panel that allows users to input origin, destination, and safety preferences easily

What we learned

• How to integrate mapping libraries (Leaflet) with React for a dynamic user experience.
• Handling API requests for route calculation and marker avoidance logic.
• The importance of balancing functionality and usability in a hackathon setting.

What's next for SafeSteps

• Develop a mobile-friendly version for on-the-go use.
• Enhance route optimization with time-of-day and traffic considerations.

Built With

• leaflet.js
• next.js
• openrouteserviceapi
• react