Inspiration
When disasters like wildfires and floods strike, most people rely on official alerts from agencies like FEMA or city governments. But these systems often lag behind the reality on the ground. Just last night, a fire broke out behind my house. It started as a 3-acre burn and grew to 15 acres by the next morning. No alerts came through. The only reason I even knew about it was because someone posted about it on a community group chat. That moment made something really clear to us: danger can spread faster than official warnings do, and community is very important in these situations. This isn't just my experience. Studies show that nearly 49% of emergency teams report delays in executing standard procedures due to late alerts. And in rural areas, emergency medical services can take over 14 minutes to arrive, sometimes nearly 30. That’s way too long when your home is in danger. On top of that, the tools people do have, like maps and city dashboards, aren’t dynamic. They don’t show if a road is blocked, if a fire has changed direction, or if trees have fallen. And there’s no centralized place where community members can report what they’re seeing. Meanwhile, over 1.2 million homes in California alone are at extreme wildfire risk. So the question becomes: why are we still relying on just these systems when our communities can help fill in the gaps?
What it does
Our platform is a community-powered emergency awareness tool that supplements official alerts with real-time data and user reports. In real time, it helps users detect danger earlier, navigate safer routes, and stay connected. It includes:
- Fire Risk Panel: Live weather, satellite, and environmental data is used to tell you your current fire risk.
- Crowdsourced Hazard Reporting: Live users drop pins on the map to report roadblocks, smoke, fire sightings, floods, or fallen trees.
- Dynamic Evacuation Mapping: Routes update in real time to avoid blocked roads or nearby threats.
- Community Forum: A space for neighbors and verified responders to share updates, shelter info, and warnings. Together, these features help users act sooner, evacuate smarter, and stay safer, even before an alert arrives.
How we built it
Beacon is built on a modern, full-stack architecture designed for speed, scalability, and real-time responsiveness. Frontend React with TypeScript for a type-safe, modular UI Vite as our build tool and dev server TailwindCSS (with plugins) for responsive styling Radix UI for accessible component primitives Leaflet / React-Leaflet for dynamic map rendering React Query for efficient data fetching Framer Motion for smooth animations Recharts for risk visualizations Wouter for lightweight routing Zod for data validation Backend Node.js + Express.js server TypeScript across the stack Drizzle ORM + PostgreSQL for structured, type-safe data Express Sessions + connect-pg-simple for session management Passport.js for authentication WebSocket (ws) for real-time map and forum updates APIs & Services FEMA API for official emergency data Open-Meteo API for live weather and environmental risk info OpenRouteService API for evacuation routing Photon API for geocoding and address search Architecture Clean client-server separation with shared types and schemas Component-based UI structure with reusable elements Custom hooks and services to isolate business logic Condition polygon merging for advanced zone detection and fire risk modeling
This tech stack allowed us to build a platform that is not only powerful and real-time, but also intuitive and accessible for users facing high-stress emergencies.
Challenges we ran into
- Merging condition polygons (fire zones, hazards, and road closures) from multiple sources without lag was a major technical challenge, especially when working with real-time map rendering.
- Integrating multiple external APIs (like FEMA, Open Meteo, and OpenRouteService) required handling inconsistent data formats and frequent throttling.
- Building dynamic route updates that respond to live hazard reports took time to optimize for both speed and safety.
- Designing a user-friendly UI while preserving the complexity of disaster data was a careful balancing act.
Accomplishments that we're proud of
- Built a custom route updater that reroutes users in real time based on nearby reports.
- Successfully combined official alerts with crowdsourced data in one cohesive interface.
- Designed an experience that’s accessible, intuitive, and genuinely capable of saving lives.
What we learned
- How to combine complex APIs and real-time systems into a cohesive user experience.
- How community action and official infrastructure can work together to create more responsive emergency systems.
What's next for Beacon
- Partnering with local governments and emergency responders to verify alerts posted through the platform and build trust in community-reported data.
- Adding push notifications and offline support to help users stay updated even when power or cell service is spotty.
- Convert it to a mobile app.
- Exploring AI-powered threat detection using patterns in satellite imagery and user reports.
Built With
- express.js
- femaapi
- javascript
- leaflet.js
- node.js
- open-meteo
- openrouteservice
- passport.js
- photongeocoding
- radixui
- react
- reactquery
- recharts
- replit
- sql
- tailwindcss
- typescript
- vite
- websockets
Log in or sign up for Devpost to join the conversation.