Inspiration
In a world where personal safety is a constant concern, especially for women navigating cities alone at night, we wanted to build more than just a panic button. We were inspired by the idea of a "digital guardian"—a companion that not only helps in emergencies but gives users the confidence to move freely. We wanted to bridge the gap between reactive safety (calling for help) and proactive safety (finding safe routes and avoiding danger).
What it does
Guardian Angel is a comprehensive safety companion web application. Safety Map: Displays "Safe Havens" (like 24/7 stores, police stations) and crowdsourced "Safe Routes" (well-lit paths) on an interactive dark-mode map. It tracks the user's live location to guide them to safety. Fake Call: A discrete tool that simulates a realistic incoming iPhone call. This allows users to excuse themselves from uncomfortable or unsafe situations without raising suspicion. SOS Mode: A one-tap emergency interface that pulses a high-contrast visual alarm, designed to be easily triggered in high-stress situations.
How we built it
We built the application using React and Vite for a lightning-fast, responsive user interface. Mapping: We initially explored Mapbox but pivoted to Leaflet and OpenStreetMap to ensure the app remains free and accessible to everyone without requiring credit card-backed API keys. Location: We utilized the browser's Geolocation API for real-time user tracking. Styling: We used modern CSS with glassmorphism effects and a "dark mode first" approach to save battery and reduce eye strain at night. Routing: Implemented with React Router to create a seamless Single Page Application (SPA) experience.
Challenges we ran into
The biggest technical hurdle was the mapping integration. We initially built the entire mapping layer using Mapbox GL, but ran into authentication and API key issues that caused blank screens. Debugging this "white screen of death" taught us the importance of React Error Boundaries. We ultimately refactored the map component to use Leaflet, which required rewriting the marker systems and custom styling to match our dark theme, but the result was a much more robust and open-source friendly solution.
Accomplishments that we're proud of
The Fake Call UI: It looks incredibly realistic. We spent time perfecting the animations and layout so it genuinely looks like an incoming call. Resilience: Pivoting our entire mapping technology halfway through the hackathon without losing momentum. Design: Creating a UI that feels premium, safe, and trustworthy.
What we learned
We learned that "free" tiers of APIs often come with complex setup hurdles, and sometimes open-source alternatives (like OpenStreetMap) are powerful enough for the job. We also deepened our understanding of React hooks (useEffect) for handling real-time browser events like geolocation updates and window resizing.
What's next for Guardian Angel
Backend Integration: Storing real-time user locations to share with trusted contacts. Crowdsourcing: Allowing users to rate the safety of streets (lighting, crowd density) to improve the "Safe Routes" algorithm. Audio Analysis: Implementing an AI feature that listens for specific "safe words" to trigger the SOS mode automatically hands-free.
Log in or sign up for Devpost to join the conversation.