SigapBencana

Automated early detection response loop built for speed: AI verifies in seconds, you signal in one tap, rescue follows in real time.

Comment

Inspiration

Indonesia is geographically located on the Pacific Ring of Fire, making it highly susceptible to devastating earthquakes and tsunamis. Traditional disaster warning systems often just blast a generic notification without giving actionable, personalized guidance. We realized that during a critical disaster, panic takes over—people don't know where to run or how to get help. We were inspired to build SigapBencana, an intelligent platform that not only warns users but actively guides them to safety and streamlines rescue operations.

What it does

SigapBencana is a dual-interface Web App (Citizen App & Admin Command Center) designed for extreme emergencies. It has three core functionalities and a dedicated dashboard:

  1. 🌊 Smart Tsunami Evacuation: Integrates with earthquake data. If a massive quake (e.g., Megathrust >8.0) or tsunami warning occurs, the app instantly calculates the nearest coastline and generates a dynamic, winding evacuation route guiding the user strictly inland towards high ground (Posko Aman).
  2. 🚨 Intelligent SOS System: Users can send an SOS with specific needs (Medical, Evacuation, Logistics).
  3. 🤖 AI Validation Layer: To prevent false alarms (prank SOS or sensor glitches), an AI verification layer validates incoming distress signals and disaster conditions before triggering a full-scale panic response.
  4. 💻 Admin Command Center: A specialized dark-mode dashboard for rescue teams. It features a sweeping radar UI, real-time tracking of active SOS requests, and automated dispatch routing for medics and logistics.

How we built it

To ensure the application is scalable, maintainable, and lightning-fast during emergencies, we built it entirely on modern web standards. This guarantees maximum compatibility across all devices without requiring users to download a standalone mobile app during a crisis.

  1. Frontend: React.js, HTML5, CSS3, Tailwind CSS
  2. Routing & Build Tool: React Router DOM, Vite
  3. Core Logic: JavaScript (ES6+ / JSX)
  4. APIs & Integrations: Google Maps Embed API, FontAwesome, Simulated BMKG & AI Endpoints
  5. Architecture: Component-based UI with React Context API for global state management

The process relies on modern JavaScript to handle asynchronous data fetching (simulating real-time BMKG APIs) and AI validation logic. We utilized the Google Maps Embed API, manipulating URL parameters dynamically based on earthquake magnitude. Complex, hardware-accelerated micro-animations, like the sweeping Admin Radar and winding rescue routes, are driven entirely by raw CSS3 keyframes and FontAwesome vector icons to ensure high frame-rate efficiency and rapid visual processing during panic scenarios.

Challenges we ran into

  1. Dynamic Geographic Routing: Plotting realistic, winding evacuation routes that strictly went inland (e.g., Eastwards from the West coast of Banten) without accidentally clipping through the ocean.
  2. Responsive UI under Pressure: Balancing vibrant alert colors with clean typography to remain legible and non-distracting during a panic scenario.
  3. State Synchronization: Creating clever offline fallback logic and simulated asynchronous Promises to mimic real-world network resilience and latency.

Accomplishments that we're proud of

  1. Built a highly polished, premium-feeling application that looks and behaves like a native mobile app but runs directly in the browser.
  2. Developed incredibly robust map logic that intelligently changes zoom levels and shifts danger zones based on real-time earthquake magnitude.
  3. Created an exceptionally intuitive UI/UX where animations (like radar and routing) communicate urgency much faster than text warnings could.

What we learned

  1. How to intricately manipulate SVG paths and CSS keyframes to create complex, synchronized geographic map animations.
  2. How to structure React state for immediate, synchronous UI updates across dual dashboards.
  3. The paramount importance of user psychology in UX design—specifically how colors, motion, and clear visual cues direct human behavior in high-stress situations.

What's next?

Looking ahead, SigapBencana will transition from simulated data to live streaming earthquake metrics via WebSockets for the BMKG API integration. We also plan to implement an offline Bluetooth/Wi-Fi Direct mesh network so the SOS feature functions even if cellular infrastructure collapses. Ultimately, we aim to integrate AI route optimization using real-time traffic data to dynamically reroute citizens and rescue teams around collapsed bridges and flooded zones.

Share this project:

Updates