Inspiration: The Fragility of the Modern World
We live in an era characterized by increasing atmospheric volatility. Yet, our disaster response systems are built upon a terrifying assumption: that the infrastructure will remain intact when we need it most.
During recent category-5 cyclones and devastating urban floods, we observed a catastrophic pattern. The moment a disaster strikes, the central hubs—cell towers, ISP backbones, and power grids—are the first to collapse. This creates a lethal "Information Silo." Standard survival apps, emergency hotlines, and 2D GPS maps are instantly rendered useless because they rely on a Star-Topology network.
We realized that humanity doesn't need another cloud-dependent weather app. We need a Decentralized Survival Infrastructure. We were inspired to build a safety net that activates precisely when the rest of the world goes dark. Thus, AEGIS GRID was born.
What it does
AEGIS GRID is a browser-based, offline-first tactical command center that turns any smartphone or laptop into a resilient survival node. It operates on three core pillars:
- The Mesh Network (Resilience): When the internet fails, AEGIS uses P2P WebRTC protocols to connect devices directly to each other. Every user becomes a relay, creating a localized, encrypted network that ripples SOS broadcasts and hazard telemetry across a city without a single central server.
- 3D Volumetric Geospatial HUD (Coordination): Flat 2D maps are fatal in floods or wildfires because they ignore topography. AEGIS uses Digital Elevation Models (DEM) and 3D building extrusions to provide a cinematic "Digital Twin" of the disaster zone, calculating evacuation corridors based on high-ground topological gradients rather than just road networks.
- Autonomous Survival Synthesis (Intelligence): Powered by Google Gemini-1.5-Flash, AEGIS acts as an Edge-ready survival coach. It synthesizes hyperlocal telemetry (ground temp, humidity, mesh reports) to instantly generate practice-based, tactical extraction protocols for survivors who are trapped and panicking.
System Architecture
To ensure absolute resilience, AEGIS GRID abandons traditional Client-Server models in favor of a horizontally scaled P2P topological grid.
+-------------------------------------------------------------------------+
| AEGIS GRID: DECENTRALIZED ARCHITECTURE |
+-------------------------------------------------------------------------+
| |
| +--------------------+ +--------------------+ |
| | AEGIS NODE A | | AEGIS NODE B | |
| | (Smartphone UI) | | (Field Laptop) | |
| +--------------------+ +--------------------+ |
| | - Next.js App | << WebRTC Mesh >> | - Next.js App | |
| | - IndexedDB Cache | <---------------------> | - IndexedDB Cache | |
| | - Web Audio API | (PeerJS / P2P) | - Web Audio API | |
| +---------+----------+ +---------+----------+ |
| | | |
| v v |
| +---------+----------+ +---------+----------+ |
| | 3D GEOSPATIAL ENGINE| | 3D GEOSPATIAL ENGINE| |
| | (Mapbox GL + R3F) | | (Mapbox GL + R3F) | |
| | - Raster-DEM | | - Raster-DEM | |
| | - Building Extrusion| | - Building Extrusion| |
| +---------+----------+ +---------+----------+ |
| | | |
| +----------------------+-----------------------+ |
| | |
| v |
| +-----------------------+ |
| | AI SYNTHESIS CORE | |
| | (Google Gemini API) | |
| | - 1.5-Flash Model | |
| | - Few-Shot Context | |
| +-----------------------+ |
| |
+-------------------------------------------------------------------------+
How we built it
We engineered AEGIS GRID with a focus on Zero-Latency and Mission-Critical Reliability:
- The Core Architecture: We utilized Next.js 15 (App Router) for its aggressive server-side pre-rendering and highly optimized Turbopack build system, ensuring the app loads instantly even on degraded connections.
- The Mesh Protocol: We implemented PeerJS over standard WebRTC to manage our STUN/TURN traversal. We engineered a custom Heuristic Priority Queue so that SOS signals (O1 priority) always bypass general mesh chatter.
- The 3D Tactical Engine: We integrated Mapbox GL JS alongside Three.js and React Three Fiber (R3F). We wrote custom GLSL fragment shaders to visualize flood propagation and utilized procedural generation to extrude OSM building data.
- The Brain: We integrated the @google/genai SDK, specifically selecting the
gemini-1.5-flashmodel. Its massive context window and elite Tokens-Per-Second (TPS) rate allowed us to feed it raw, unstructured mesh logs and receive instant, structured JSON survival protocols in return. - The Sensory HUD: To minimize reliance on external assets, we utilized the native Web Audio API to procedurally generate 880Hz square-wave tactical alarms.
Challenges we ran into
- The "Hydration" Battle: Building an offline-first decentralized mesh inside a modern SSR framework like Next.js caused massive React hydration mismatches. We had to carefully abstract our
MeshContextand use strictuse clientboundaries to ensure the P2P logic executed solely on the client. - Volumetric Rendering Performance: Rendering 3D terrain exaggeration alongside thousands of extruded buildings threatened to crash mobile browsers. We mitigated this by aggressively culling off-screen geometry and implementing low-poly LOD (Level of Detail) fallbacks.
- LLM Latency in Stress States: We initially struggled to get concise, machine-readable data from the AI. We solved this by implementing strict Few-Shot Prompt Engineering and injecting a highly specific "Tactical Persona" into the system instructions, ensuring Gemini only responded with actionable, bulleted extraction steps.
Accomplishments that we're proud of
- Successfully bypassing the internet: Watching two devices seamlessly exchange an encrypted SOS packet with zero Wi-Fi or cellular data via the WebRTC mesh was a monumental breakthrough.
- The "Tactical Dark" Aesthetic: We are incredibly proud of the UI/UX. By combining deep blacks, neon glassmorphism, and procedural auditory cues, we built an interface that genuinely feels like military-grade mission control.
- Bridging AI and Topography: Successfully passing 3D coordinate data from Mapbox directly into the Gemini context window to generate highly specific, localized evacuation routes.
What we learned
We learned that Topological Rigidity is the greatest threat to modern software. Building for the "happy path" (where users have 5G and unlimited bandwidth) is easy. Engineering an architecture that gracefully degrades and relies on decentralized peer-to-peer data channels forced us to completely rethink how state synchronization and data persistence operate at the browser level.
What's next for AEGIS GRID
AEGIS GRID is a living infrastructure. Our immediate roadmap includes:
- WebGPU Local Inference: Transitioning our AI logic from the cloud directly to the Edge by running quantized models (like Gemma-2b) natively in the browser via WebGPU.
- Hardware Bridging: Integrating the browser mesh with ESP32 LoRa (Long Range) radio modules to extend the P2P network to a 15km+ radius per node.
- Real-Time Fluid Dynamics: Advancing our GLSL shaders to simulate true fluid-dynamic water propagation on the 3D map based on live rainfall telemetry.
Built With
- framer-motion
- google-gemini
- mapbox-gl
- nextjs
- peerjs
- react
- tailwind
- three.js
- typescript
- web-audio-api
- webrtc
Log in or sign up for Devpost to join the conversation.