SafeWalk - Women’s Safety Web App

SafeWalk is a women’s safety app with real-time tracking, SOS alerts, and Safe Mode — built with React, Supabase, TypeScript, and deployed on Netlify.

Comment 1

What Inspired the Project

The inspiration for SafeWalk came from a deeply emotional conversation I had with one of my closest friend, Aarya. One evening, she confided in me how terrified she felt walking home from her evening shift. Despite living in a relatively safe neighborhood, the silence of the streets, the lack of people, and the haunting feeling of being followed had become her nightly routine. She admitted to pretending to be on a call just to feel a little less alone and constantly shared her location with multiple friends, hoping someone would be watching.

One night, her phone battery died while she was walking back. She told me that in those few minutes — where she had no way of calling for help or even pretending to — she felt the most vulnerable she ever had in her life. That story stuck with me. It made me realize how crucial it is for women to have a reliable, intelligent, and always-available companion to walk with them — something more powerful than a location pin or a fake phone call.

That’s when the idea for SafeWalk was born — a project that merges technology, design, and empathy to create a real-time safety system that empowers women, gives them confidence, and ensures they’re never truly alone when walking.

What You Learned

Throughout the development of SafeWalk, I gained deep technical and design insights across multiple domains:

  • How to build a complete authentication system using Supabase
  • How to implement real-time location tracking using the Geolocation API, and collect battery status via the Battery Status API
  • Creating structured and efficient PostgreSQL database schemas to manage user profiles, emergency contacts, and safety sessions
  • Designing a modular React + TypeScript web application
  • Using Framer Motion for smooth animations and responsive feedback
  • Styling with Tailwind CSS and Bootstrap, with clean iconography from Lucide React
  • Deploying a full Progressive Web App (PWA) using Netlify, with SSL and offline functionality
  • Ensuring WCAG 2.1 AA accessibility compliance, including contrast mode, screen reader support, and voice commands

How You Built It

I used React with TypeScript, powered by Vite for fast and efficient development. A mobile-first layout was crafted using Tailwind CSS and enhanced by Bootstrap for grid and responsive utilities.

For the backend, Supabase was implemented to manage authentication (sign-up, login, password recovery) and store user data. I wrote a custom PostgreSQL schema to handle user profiles, emergency contacts, and safety session tracking.

Real-time geolocation was implemented with the browser's Geolocation API, while battery levels were captured using the Battery Status API. This data was continuously updated in Supabase, tagged with timestamps and status information.

Frontend UI features include:

  • A floating SOS button with double-tap logic to avoid accidental triggers
  • A Safe Mode timer that prompts for regular check-ins and triggers alerts if missed
  • A bottom navigation bar for easy mobile access
  • Smooth transitions via Framer Motion
  • Consistent icon usage with Lucide React
  • PWA support, including offline behavior and mobile installability
  • Netlify deployment with SSL and the "Built on Bolt" badge

Challenges You Faced

  1. Continuous location tracking: Balancing frequent updates with power and performance constraints was challenging. I had to fine-tune how often and under what conditions the app should send updates to avoid battery drain.

  2. Supabase integration: Designing secure database schemas with row-level access control, while also supporting real-time location and profile updates, required extensive testing and configuration.

  3. Safe Mode logic: Creating a timer-based check-in system that escalates properly without third-party APIs meant handling many edge cases (such as background tabs or slow networks).

  4. Accessibility: I had to ensure that Framer Motion animations worked seamlessly with screen readers, contrast modes, and keyboard navigation, balancing style with usability.

  5. PWA deployment: Implementing offline support, SSL certification, and manifest configuration on Netlify involved multiple testing cycles to meet all production requirements.

Built With

Share this project:

Updates