Surge

Know the water. Own the outcome.

Comment

Inspiration

Floods are the number one natural disaster globally, yet most safety tools rely on a stable power grid and high-speed internet—the first two things that fail in an emergency. We were inspired by the challenge of building a "Zero-Connectivity" toolkit. We wanted to build a tool that lives on the user's device, not in the cloud, to ensure it works when it’s needed most.

What it does

Surge is a dual-layer platform. On the surface, it’s a comprehensive educational guide for the Before, During, and After phases of a flood. Beneath the surface, it hosts the Surge Command Center, a 5-module tactical suite:

  • Surge Intel: Uses AI telemetry (Llama-3) to provide live hydrological risk assessments and technical directives.
  • HighGround: Maps topographical evacuation routes via GPS and local hardware tracking.
  • The Vault: A persistent supply tracker for survival essentials with local storage redundancy.
  • FlashBeacon: A high-intensity rescue signaling system using SOS strobe frequencies and audio bursts.
  • ClaimSync: A forensic documentation tool that "bakes" verifiable GPS, timestamps, and Secure IDs directly into damage evidence for insurance claims.

How we built it

We chose a "Lightweight & Hardened" stack for maximum reliability:

  • PWA Architecture: Using Service Workers to cache the entire platform locally for 100% offline functionality.
  • Core Logic: Vanilla JavaScript and CSS to avoid the overhead of heavy frameworks during emergencies.
  • AI Engine: Integrated Groq Cloud API (Llama 3.3) for processing technical hydrological telemetry.
  • Forensics: Developed a custom HTML5 Canvas engine to perform real-time HUD baking on camera snapshots.
  • Mapping: Leaflet.js with topographic tile layers for high-contrast route finding.

Challenges we ran into

Integrating high-end hardware features (GPS, Camera, and Audio) into a browser-based app while keeping it "Offline-First" was a significant hurdle. We had to navigate strict browser autoplay policies for the SOS audio, manage complex Canvas coordinate mapping for the Forensic HUD, and handle security layers like GitHub's Push Protection to keep API credentials secure during deployment.

Accomplishments that we're proud of

  • ClaimSync Forensic Engine: We successfully built a real-time "Pixel Baking" system that burns GPS coordinates and unique Secure IDs directly into damage evidence images, creating a legally-defensible documentation trail.
  • Custom Coded Cursor Interface: One of the visual highlights is our reactive, ring-based cursor system with micro-animations—it transforms the UX from a generic website into a professional "tactical equipment" HUD.
  • Offline PDF Reporting Engine: By integrating html2pdf.js, we enabled survivors to generate high-resolution, multi-page insurance reports directly on their hardware without needing a printer or an internet connection.

What we learned

This project was a deep dive into the Power of the PWA. We mastered local storage persistence, learned how to interface deeply with hardware APIs (Geolocation/WebAudio/Media), and refined our ability to prompt-engineer AI models to act as stoic, analytical data-platforms rather than generic chatbots.

What's next for Surge

  • Mesh-Network Messaging: Implementing WebRTC for peer-to-peer signaling when cell towers are down.
  • 3D Topo-Mapping: Using Lidar data to provide high-resolution 3D topography for even more accurate route pathing.
  • Global Expansion: Integrating more diverse global weather stations for localized flood-prediction models in lower-resource regions.

Built With

Share this project:

Updates