A modern, high-reliability web application designed to broadcast emergency alerts, share precise live GPS location coordinates, and immediately notify emergency contacts through rich email alerts and Web Push notifications.
Developed with a tactical cyberpunk design, this application enables users to trigger an emergency alert with a single tap, continuously refine GPS accuracy, maintain a real-time audit log of activations, and manage emergency contacts directly through an intuitive dashboard interface.
- 🚨 One-Click Emergency SOS: Instant activation with confirmation prompt, animated visual feedback, and local siren audio alerts.
- 📍 High-Precision GPS Location Detection: Integrates Web Geolocation API with continuous sample refinement (
watchPosition) to capture tight accuracy margins (±X meters). - 🗺️ Google Maps Pinpoint Location Link: Automatically generates official Google Maps pin-drop search URLs for instant responder navigation.
- 📧 Emergency Email Alerts: Sends rich HTML emergency emails via Nodemailer (Gmail SMTP) containing sender details, coordinates, accuracy radius, map link, and timestamp.
- 📲 Firebase Web Push Notifications (FCM): Public receiver opt-in page (
/receive) that registers browser push tokens to deliver background alerts even when tabs are closed. - 👥 Dynamic Contact Management: Add emergency email contacts directly from the dashboard UI, share opt-in links, or remove contacts with one click.
- 👤 Configurable Sender Profile: Customized sender profile name displayed in emergency broadcast emails.
- ⏰ Timestamped Emergency Broadcasts: Tracks exact activation time in Indian Standard Time (IST) / local device timezone.
- 📜 Real-Time SOS Alert History Logs: Dedicated audit log table capturing timestamped alert activations, GPS coordinates, recipient counts, and dispatch status.
- ⚙️ Interactive Multi-Tab Dashboard: Smooth single-page navigation across Dashboard (
OVERVIEW), Contacts (DIRECTORY), Alert Logs (LOGS), and Settings (PREFERENCES). - 🧪 One-Click Diagnostic Test Email: On-demand SMTP test trigger in Settings to verify email delivery without starting a full emergency alarm.
- 🔊 Alarm Sound Control: Toggle loud emergency siren audio on/off from the Settings panel.
- 📱 Tactical Cyberpunk UI: Fully responsive glassmorphic dark-mode user interface tailored for desktop and mobile displays.
When the SOS alert is activated, the application generates and dispatches an emergency email notification via Gmail SMTP to all designated contacts.
- User's Name: Displayed in the subject line and email body.
- Emergency Message: High-priority alert banner requesting immediate assistance.
- Latitude & Longitude: High-precision GPS coordinates.
- GPS Accuracy Margin: Radius precision indicator (e.g.,
±12 m). - Google Maps Pin Drop Link: Direct URL to open the exact coordinates in Google Maps.
- Live Tracking Link: URL to access the web application interface.
- SOS Activation Timestamp: Formatted date and time of the alert trigger.
The system automatically queries active contacts stored in Firestore (both Web Push recipients and direct Email contacts) and sends emergency broadcast emails to all contact email addresses simultaneously.
The application uses the browser's native Geolocation API combined with position refinement logic to track and display the user's location.
- Continuous Sampling: When SOS is triggered,
watchPosition()streams continuous GPS position updates over a 3-second window. - Accuracy Selection: The system evaluates incoming position samples and selects the coordinate with the smallest accuracy margin (tightest precision).
- UI Display: The status header bar updates in real time displaying live coordinates and precision radius (e.g.,
Live: 13.07028, 77.57053 (±12m)). - Responder View: Emergency contacts receive a direct Google Maps link (
https://www.google.com/maps/search/?api=1&query=LAT,LNG) that drops a target pin exactly on the user's location.
- HTML5: Semantic web structure and accessible forms.
- Vanilla JavaScript (ES6+): ES Modules, Async/Await, Web Geolocation API, Web Audio API, Service Workers API.
- CSS3: Custom CSS Variables, Glassmorphism backdrop-filters, CSS Grid, Flexbox, Keyframe Animations.
- Node.js: Asynchronous JavaScript runtime.
- Express.js: Lightweight REST API web framework.
- Nodemailer: Email engine for Gmail SMTP transport.
- Firebase Admin SDK: Server-side Firestore database operations and FCM multicast messaging.
- Firebase Firestore: Cloud NoSQL database storing registered contacts and alert history logs.
- Firebase Cloud Messaging (FCM): Web Push notification delivery service.
- Dotenv: Environment variable configuration management.
- CORS: Cross-Origin Resource Sharing middleware.
- Nodemon: Development server auto-reloader.
SOS-EmergencyApp/
├── index.html # Main Dashboard UI (Dashboard, Contacts, Logs, Settings)
├── script.js # Main Frontend Application Logic & View Navigation
├── style.css # Custom CSS Design Tokens & Glassmorphism Styling
├── receive.html # Public Contact Opt-in Page (FCM Token & Email Registration)
├── receive.js # ES Module for FCM Browser Push Registration
├── firebase-messaging-sw.js # Service Worker handling background Web Push Notifications
├── server.js # Node.js Express Server (Nodemailer, Firestore & API Endpoints)
├── package.json # Dependencies, Scripts, and Project Metadata
├── .env.example # Example Environment Configuration Template
└── README.md # Project Documentation
Follow these steps to run the application locally on your system:
git clone https://github.com/tejas-coder28/SOS-EmergencyApp.gitcd SOS-EmergencyAppnpm installCopy .env.example to create your local .env file:
cp .env.example .envnpm run dev(or run npm start to run in standard Node.js mode).
Open your browser and navigate to http://localhost:3000.
The application relies on environment variables configured in .env.
# ─────────────────────────────────────────────────────────────────────────────
# Email — Emergency Alert (Nodemailer + Gmail SMTP)
# ─────────────────────────────────────────────────────────────────────────────
EMAIL_USER="your_email@gmail.com"
EMAIL_PASS="your_16_char_app_password"
EMAIL_TO=""
ALERT_USER_NAME="Your Name"
# Server Configuration
PORT="3000"
NODE_ENV="development"
# ─────────────────────────────────────────────────────────────────────────────
# Firebase — FCM Web Push & Firestore
# ─────────────────────────────────────────────────────────────────────────────
GOOGLE_APPLICATION_CREDENTIALS="./firebase-service-account.json"
FIREBASE_PROJECT_ID="your_project_id"
FIREBASE_API_KEY="your_api_key"
FIREBASE_AUTH_DOMAIN="your_auth_domain.firebaseapp.com"
FIREBASE_STORAGE_BUCKET="your_storage_bucket.appspot.com"
FIREBASE_MESSAGING_SENDER_ID="your_messaging_sender_id"
FIREBASE_APP_ID="your_app_id"
FIREBASE_VAPID_KEY="your_web_push_vapid_key"
⚠️ IMPORTANT:.envandfirebase-service-account.jsoncontain sensitive private credentials. They are listed in.gitignoreand must NEVER be committed to GitHub.
Email alerts use Nodemailer configured with Gmail SMTP.
- Enable 2-Step Verification on your Google Account: https://myaccount.google.com/security
- Generate a 16-character App Password: https://myaccount.google.com/apppasswords
- Set
EMAIL_USERto your Gmail address andEMAIL_PASSto the 16-character App Password in.env:EMAIL_USER="user@gmail.com" EMAIL_PASS="abcd efgh ijkl mnop"
- Launch App: Open
http://localhost:3000in your web browser. - Grant Location Permission: Allow the browser to access device location when prompted.
- Add Emergency Contacts:
- Option A: Click "📲 INVITE CONTACT" and share the
/receivelink with contacts so they can enable browser push notifications & register their email. - Option B: Type a contact's Name and Email directly into the Add Recipient Email Directly form on the modal or Contacts tab.
- Option A: Click "📲 INVITE CONTACT" and share the
- Activate SOS: Press the large red SOS button on the Dashboard and confirm in the prompt modal.
- Alert Broadcast:
- The status bar displays
SENDING SOS…and starts the local audio alarm (if enabled). - The backend fetches all active contacts from Firestore and dispatches emergency emails and Web Push alerts.
- Button updates to
✓ ALERT SENTand resets after 8 seconds.
- The status bar displays
- Audit & Verification:
- View the activation log in the Alert Logs tab.
- Run diagnostic email checks anytime from the Settings tab.
You can safely test all components of the application:
- Location Tracking Test: Verify that the top header pill displays
Live: LAT, LNG (±Xm)with location active. - Test Email Trigger: Go to the Settings tab and click
🧪 Send Test Email Alertto test SMTP delivery without sounding the SOS alarm. - Contact Management Test: Add an email contact using Option 2 on the modal, then verify it appears in the Contacts panel with an
EMAILtag. Click the red✕button to test deletion. - Full SOS Activation Test: Click SOS on the dashboard, confirm activation, and verify that emergency alert emails are received in recipient inboxes (check Inbox and Spam folders).
- Environment Isolation: Sensitive credentials (
EMAIL_PASS, Firebase Service Account keys) remain strictly on the backend. - Git Protection:
.envand credential JSON files are excluded via.gitignore. - Placeholder Sanitization: Server automatically filters out placeholder default emails (
emergency_contact@gmail.com) to prevent accidental mail loops. - Frontend Config Exposure via API: Firebase public client config is fetched via
/api/firebase-configrather than hardcoded into public static scripts. - Firestore Document Deduplication: Registration tokens are sanitized and hashed as document IDs to prevent duplicate token pollution.
- Browser Location Permission Required: Location features depend on the user granting browser geolocation permissions.
- Hardware Accuracy Differences: Desktop and laptop computers without hardware GPS chips rely on Wi-Fi/IP location services (accuracy ~30–80m). Mobile devices with hardware GPS achieve ~3–5m accuracy.
- Internet Connectivity Required: Emergency alerts require active internet connection to communicate with backend API endpoints and SMTP servers.
- Email Delivery Dependencies: Email delivery speeds depend on Google SMTP service availability and recipient mail server spam filters.
- Not a Replacement for Emergency Services: This web application is a personal/college project demonstration and does not directly connect to local 911 / emergency dispatcher lines.
- 📞 Twilio Voice Call Integration: Trigger automated phone calls when SOS is activated.
- 💬 WhatsApp & Telegram Bot Alerts: Multi-channel emergency messaging integration.
- 📱 Native Mobile App: React Native or Flutter wrapper for background hardware GPS execution.
- 🎙️ Voice Activation: Voice-command recognition (e.g. "Emergency Help") to trigger hands-free SOS.
- 🗺️ Geofencing Safety Zones: Automated warnings when entering or leaving specified geographical zones.
- 📴 Offline SMS Fallback: WebSMS / GSM modem integration for connectivity blackouts.
Tejas
- GitHub Repository: https://github.com/tejas-coder28/SOS-EmergencyApp
This project does not currently contain a license file. A license (e.g., MIT License) can be added to the repository later.