SafeRoute

• 

  map

• 

  landing page

SafeRoute - Public Safety

About

SafeRoute is a web app that helps people find the safest route between two places.
Instead of just showing the fastest way, it looks at crime data and tries to guide you around dangerous areas.
We wanted to build something that could help people feel safer when traveling.

Inspiration

We noticed that apps like Google Maps and Waze focus on speed but not safety.
We thought — what if you could pick the safest way instead of the fastest?
That's what made us want to create SafeRoute.

How We Built It

We used React for the frontend and Firebase for user login and saving information.
We used Mapbox to draw the map and routes.
We uploaded crime data using CSV files and used PapaParse to read the data.
We also hosted the app on Netlify so it's easy for anyone to access online.

Built With

• React.js (frontend)
• Firebase Authentication (sign up/login users)
• Firebase Firestore (store user profiles and routes)
• Mapbox GL JS (maps and routing)
• PapaParse (parse crime data CSV files)
• Netlify (deployment/hosting)

What We Learned

• How to work with Firebase Authentication and Firestore
• How to show maps and routes with Mapbox
• How to upload and work with real-world data (crime reports)
• How to animate a moving marker along a route
• How to fix problems like saving data into Firestore correctly

Challenges We Faced

• Firestore doesn't like saving nested arrays, so we had to fix our route data
• Making the marker move smoothly along the route
• Making the app look good on phones and computers
• Making sure the page doesn’t scroll all weird with fixed navbar and map

How To Use It

1. Go to the website.
2. Click "Try It Now."
3. Enter a start and end address.
4. Click "Find Safest Route."
5. Watch your icon move across the safest path.
6. Go to "Profile" to see your saved routes.
7. You can also "Search Again" on a past route easily.

Future Ideas

• Get live crime data instead of uploading CSV files
• Make a mobile app version
• Add more types of danger warnings (like natural disasters)
• Let users customize what they want to avoid (e.g., robbery vs. assault)

Thank You

Thanks for checking out our project!
We had a lot of fun building SafeRoute and hope it helps people travel smarter and safer.

Live Demo

Click Here to View the App

Built With

• css
• firebase-authentication
• firebase-firestore
• html
• javascript
• mapbox-gl-js
• papaparse
• react.js