Crisis Compass

Inspiration

Every flood, earthquake, or disaster follows the same pattern: the people who need help most are the ones with the least access to technology. A WhatsApp group doesn't work when there's no signal. A complex app doesn't help when someone has 2% battery and a cracked phone. While building for the YRI hackathon's "social good" theme, we kept coming back to one question: what if the most vulnerable people in a crisis could send a single signal for help, in their own language, on the worst possible connection — and have that signal actually reach someone who can act on it? That question became Crisis Compass.

What it does

Crisis Compass is a real-time crisis coordination platform connecting three groups during a disaster: survivors who need help, volunteers who can respond, and aid organizations who need situational awareness. A survivor can report a need in seconds — selecting a category like medical emergency, trapped, or no clean water, optionally pinning their exact location on an interactive map (with GPS detection and place search built in), and describing their situation in plain language. That signal appears instantly on a live map visible to nearby volunteers, who can claim it with one tap and mark it resolved once help arrives. Aid organizations get a dashboard with real-time stats, severity breakdowns, and the full operational picture. The entire interface works in six languages and is built to function on slow connections, because disaster doesn't wait for good WiFi.

How we built it

We built Crisis Compass as a React single-page application using Vite for fast builds, Tailwind CSS for the visual system, and React Router for navigation between the report, volunteer, and dashboard views. State management runs through React Context so that a report submitted on one screen instantly reflects across the entire app in real time, simulating the kind of live coordination a production backend would provide. The interactive map uses Leaflet with OpenStreetMap's dark tile layer, plus the free Nominatim API for location search and reverse geocoding, so users can search a place by name or drop a pin directly. LocalStorage persists data between sessions so the demo survives refreshes. We designed the visual identity intentionally around the subject matter: a dark, mission-control aesthetic with a glowing radar-style live map as the literal centerpiece of the homepage, rather than burying it on a sub-page.

Challenges we ran into

Getting real interactivity right under serious time pressure was the biggest challenge — it's easy to build a UI that looks functional but doesn't actually connect; we had to rebuild our state management from scratch partway through to make sure a report submitted by a "survivor" genuinely showed up live for a "volunteer," not just as disconnected mock data. We also hit real-world tooling friction: package manager version mismatches, a corrupted initial project scaffold that needed a full clean rebuild, and broken external image services that taught us to verify every dependency before relying on it. Each of these forced us to debug methodically rather than guess, which ultimately made the final build more stable.

Accomplishments that we're proud of

We're proud that Crisis Compass isn't just a static mockup — every core interaction actually works end-to-end. A report submitted from the help-request flow genuinely appears on the live map and in the volunteer queue in real time. The location picker lets users search any place worldwide or drop a precise pin, with real reverse geocoding. The interface supports six languages, which matters enormously in disaster zones where the affected population often doesn't speak the local administrative language. And we built all of this solo, in under 24 hours, with a visual design that doesn't look like a generic hackathon template.

What we learned

We learned that "social good" technology has to be designed for the lowest common denominator of access, not the highest — every decision about language support, connection speed, and interface simplicity came back to that principle. We also learned a lot about React state architecture, specifically how Context can simulate real-time multi-user coordination convincingly even without a full backend, which is a pattern we'll carry into future projects. And we relearned the basics: verify your tools, your dependencies, and your assumptions before building on top of them, because small failures compound fast under time pressure.

What's next for Crisis Compass

The next step is replacing our simulated real-time state with an actual backend using Firebase or Supabase, so reports sync across real users and devices instead of a single browser session. We'd add SMS-based reporting through Twilio for users without smartphone data access at all, push notifications for volunteers near a new urgent signal, and integration with real disaster relief organizations so the aid dashboard reflects genuine operational data. Longer term, we want to partner with local NGOs in flood-prone regions of South Asia to pilot Crisis Compass in a real disaster response scenario, validating whether it can actually reduce response time when it matters most.

Built With

• javascript
• json
• react
• tailwind
• vscode