This is a submission for the GitHub Finish-Up-A-Thon Challenge
What I Built
SafeTrackHer is a full-stack women's personal safety platform built with React, Node.js, and Twilio. It gives women real tools to stay safe — not just an app that looks good in screenshots.
Here's what it actually does:
- 🚨 Hold-to-SOS — Press and hold 2 seconds to send real SMS alerts with live GPS location to trusted contacts. Hold-to-trigger was a deliberate design decision to prevent accidental triggers.
- 📍 Live Location Sharing — Starts a real tracking session via the backend. Generates a shareable link that opens a live map page, auto-refreshing every 10 seconds as your coordinates update.
- 🗺️ Safe Journey Mode — The feature I'm most proud of. You set your destination and travel time. If you don't arrive, the app doesn't immediately blast your contacts with panic alerts. Instead it uses a 3-step intelligent escalation: gentle check-in → grace period → emergency alert. This solves a real flaw in most safety apps — false alarms make people stop trusting them.
- 📞 Fake Call — Simulate an incoming call to escape uncomfortable situations. Set a delay (now, 10s, 30s, 1 min), trigger it, and get a full-screen realistic incoming call UI.
- 🔋 Low Battery Alert — When your phone drops below 10%, your trusted contacts get an SMS with your last known location before you go offline.
- 👥 Trusted Contacts — Add up to 5 people who receive every alert. Each contact can also have location shared with them individually.
Tech Stack:
- Frontend: React + Vite + Tailwind CSS
- Backend: Node.js + Express
- SMS: Twilio API
- Location: Browser Geolocation API + custom tracking backend
- Storage: localStorage (frontend) + in-memory sessions (backend)
- Deployment: Netlify (frontend) + Railway (backend)
Demo
🔗 Live App: safetrackher.netlify.app
🎥 Demo Video: Watch on YouTube
Screenshots
Dashboard — Safety at a glance
Contacts UI
SOS Alert Sent
SOS Alert Received*
Safe Journey Mode — 3-step escalation
Live Location Tracking Page
Fake Call UI
Settings UI
The Comeback Story
In early 2024, I pitched SafeTrackHer at a college hackathon.
The slides looked great.
The pitch had everything — Flutter app, Firebase backend, TensorFlow Lite for gesture recognition, accelerometer, even heart rate sensors. The "Prototype & MVP Status" slide said "In Progress."
It was never in progress. I had an idea and a deck. The app didn't exist.
After the hackathon it went straight into my Google Drive. I moved on. College happened. DSA practice happened. The folder sat there for over a year untouched.
Then I saw the GitHub Finish-Up-A-Thon.
What the project looked like before this contest
SafeTrackHer/
SafeTrackHer_Pitch.pptx ← a dream
UI_Mockups.fig ← never implemented
Notes.txt ← "TODO: start coding"
Zero lines of code. Just slides and intentions.
What I changed, fixed, and built
I made a conscious decision to simplify the vision and actually ship it.
The original pitch had Flutter + TensorFlow Lite + heart rate sensors. That's a 6-month project for an experienced team. I'm a college student with 2 weeks.
So I cut everything that wasn't essential to the core problem: a woman is in danger and needs to alert people fast.
Everything I built serves that one problem:
Week 1 — Core frontend
- Built the entire React app from scratch — 6 screens, responsive sidebar navigation, mobile-first layout
- Designed the hold-to-SOS button with a 2-second circular progress animation — accidental taps are dangerous in a safety app
- Built Safe Journey Mode with the 3-step escalation logic
- All state persisted in localStorage so the app survives page refreshes
Week 2 — Real backend
- Built Node.js + Express API with 10 endpoints
- Integrated Twilio for real SMS delivery
- Built the live location tracking page — a self-contained HTML page with embedded Google Maps that auto-refreshes every 10 seconds
- Connected frontend to backend — SOS button now sends real SMS
- Journey check-in and grace period trigger real SMS alerts to contacts
- Low battery alert sends SMS with last known location
The most important design decision — Safe Journey Mode
Most safety apps have a simple timer: time runs out → immediately alert everyone. This causes false alarms constantly. Someone gets stuck in traffic, their contacts get panicked, they lose trust in the app.
SafeTrackHer does it differently:
Time runs out
↓
"Are you safe?" popup (30 seconds to respond)
↓ no response
Grace period starts (5-15 min, configurable)
↓ still no response
THEN contacts are alerted
I also added "Extend Time" — tap +15 or +30 minutes if you're running late. No alert sent, journey continues. This is how a real safety tool should work.
My Experience with GitHub Copilot
I used GitHub Copilot throughout this project and it changed how fast I could build.
Where it helped most:
1. Boilerplate elimination
The backend has 10 API endpoints. Writing the basic Express route structure, error handling, and response formatting for each one manually would have taken hours. Copilot suggested the full structure after seeing the first endpoint — I just filled in the business logic.
2. Twilio integration
I'd never used Twilio before. Copilot suggested the correct twilioClient.messages.create() syntax, the error handling pattern, and even the SMS message format on the first try. What could have been 30 minutes of documentation reading was 5 minutes.
3. The live tracking HTML page
The /track/:id endpoint serves a self-contained HTML page with embedded Google Maps and auto-refreshing JavaScript. Generating clean, self-contained HTML with inline CSS and JS from a Node.js string template is tedious. Copilot wrote most of the HTML structure, which I then customized for SafeTrackHer's design.
4. Timer logic debugging
The Safe Journey timer had a particularly nasty bug — React's useEffect with setInterval and stale closures. The timer kept running even after clicking "I Arrived Safely" because state updates are async. Copilot suggested using useRef to hold a mutable flag (activeRef.current = false) that the interval checks on every tick. That's the kind of React internals fix that would have taken me much longer to figure out alone.
5. CSS layout
Building a responsive sidebar + main content layout that collapses to a hamburger menu on mobile involves a surprising amount of CSS. Copilot handled most of the responsive breakpoints, which let me focus on the actual features.
What I learned about working with Copilot:
The best results came when I was specific. "Write a React hook for location sharing" gave generic results. "Write a React useEffect that calls navigator.geolocation.getCurrentPosition every 15 seconds, stores the locationId in state, and calls the updateLocation API function" gave exactly what I needed.
Copilot is a multiplier, not a replacement. I had to understand every line it suggested — especially the timer bug fix, where I needed to understand why useRef solves stale closures before I could trust the solution.
What's Next for SafeTrackHer
This isn't going back into Google Drive.
- v2: Real database (PostgreSQL) to replace in-memory location storage
- v2: WebSocket for truly real-time location updates (sub-second)
- v2: React Native mobile app so it runs as a proper phone app with background processes
- v3: Offline SMS fallback for areas with poor internet (the original hackathon vision)
- v3: Community-reported unsafe area alerts
The hackathon pitch had the right vision. It just needed to be built one step at a time.
Built with React, Node.js, Express, Twilio, and GitHub Copilot.
From a Google Drive slide deck to a live full-stack app — that's the comeback story.
💻 Frontend: GitHub Repo
⚙️ Backend: GitHub Repo
Top comments (0)