RescueMesh AI

RescueMesh AI: When the signal drops, the essentials stay.

Comment

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for RescueMesh AI

Inspiration

During natural disasters, severe storms, or critical infrastructure failures, cellular networks and internet connectivity are often the first systems to collapse. Yet, in these exact moments, people desperately need clear first-aid instructions, visual emergency beacons, and a safe way to store key medical details for first responders.

We built RescueMesh AI to solve this critical gap. Our goal was simple: ensure that when the signal drops, essential life-saving tools stay available directly on the user's device.

What It Does

RescueMesh AI is a local-first, offline emergency response web application designed for high-stress, low-connectivity environments.

  • Offline Knowledge Cards: Offers step-by-step guides for critical emergencies (CPR, severe bleeding, water purification, thermal burns, snake bites) bundled directly into the app shell. Includes interactive progress checklists and browser-native voice guide playback without needing any network calls.
  • Visual SOS Beacon & Audio Siren: Provides high-contrast flashing signal modes (Red, White, Yellow) and an offline Web Audio API emergency siren to attract nearby help.
  • Local Incident Locker: Allows users to save vital information (name, blood group, allergies, emergency contacts, location notes) locally on their device to present immediately to responders.
  • Connection-Aware Outbox: Automatically monitors network status (navigator.onLine). It safely queues incident data in the browser's local outbox during an outage and prepares it for seamless backend synchronization the moment connectivity is restored.

How We Built It

We designed the application around the Field Manual Signal design system—a high-contrast, calm, paper-and-carbon UI built for rapid scanning in low-light or emergency conditions.

  • Frontend & UI: React, TypeScript, Vite, and Tailwind CSS.
  • Offline Engine: Cache-first Progressive Web App (PWA) Service Worker (sw.js) and localStorage persistence.
  • Hardware & Device APIs: Web Audio API for offline siren generation and Web Speech API (speechSynthesis) for text-to-speech emergency instructions.
  • Development Environment: GitHub Codespaces for rapid containerized testing and deployment.

Challenges We Faced

  1. True Offline Reliability: Ensuring every single asset, icon, and voice synthesis script functioned smoothly in complete offline mode (Airplane Mode) without falling back on remote APIs.
  2. State Management Across Cards: Creating isolated progress persistence (rescuemesh-checklists) so resetting one emergency checklist doesn't affect another guide's state.
  3. Designing for Urgency vs. Routine: Crafting an asymmetric dashboard layout that highlights high-priority emergency actions over routine configuration options without causing user panic.

Accomplishments That We're Proud Of

  • Built a fully functional, zero-latency PWA shell that installs on both desktop and mobile devices.
  • Designed a zero-dependency Web Audio siren and native text-to-speech reader that work 100% offline.
  • Maintained strict compliance with safety guidelines by implementing clear, non-intrusive medical disclaimers and emergency escalation boundaries.

What We Learned

  • How to leverage browser-native web APIs (Web Audio, Speech Synthesis, Web Storage) to replace server-side dependencies during network blackouts.
  • Strategies for designing user interfaces optimized for high-stress field conditions using contrast hierarchy and indexed status stamps.

What's Next for RescueMesh AI

  • Peer-to-Peer Mesh (v2.0): Integrating WebRTC and Bluetooth Low Energy (BLE) channels for direct device-to-device emergency messaging without cellular towers.
  • Secure Backend Transport: Replacing the current local outbox state check with an encrypted, authenticated HTTPS API pipeline with automatic retry queues and idempotency keys.
  • Multilingual Support & Verified Protocols: Partnering with regional emergency organizations to offer verified, localized first-aid guides in multiple languages.

Built With

Share this project:

Updates

Submission history