HazardWatch

Inspiration

During any major emergency - an earthquake, a wildfire, a tornado warning - the real data already exists. It's just scattered across a dozen different government websites, each with its own clunky interface from a decade ago. We wanted to pull it all into one live, unified view: no app to download, no sign-up, just open a page and see what's actually happening right now, straight from the agencies responsible for tracking it.

What it does

HazardWatch is a real-time hazard map that pulls live data directly from:

• USGS - every earthquake of magnitude 1.5+ worldwide from the past hour and past 24 hours
• NWS (National Weather Service) - every active severe weather alert in the US right now: tornado warnings, flash flood warnings, hurricane watches, red flag fire warnings, and more

Each incident appears on the map with a distinct icon for its hazard type (a seismic line for earthquakes, a cloud for weather, wave lines for floods, a flame for fires) and a color-coded ring showing urgency, from low to critical. A live feed on the side lets you filter by severity or type, click into any incident for full details, and jump straight to the original government source.

How we built it

We designed and built the core architecture, data pipeline, and UI ourselves, and used Claude (Anthropic's AI assistant) as a coding partner throughout - particularly for debugging tricky CORS issues, iterating quickly on the frontend design, and catching syntax errors during rapid prototyping. That collaboration let us move fast through several full architecture pivots in a short timeframe while keeping the codebase clean.

The core technical work was solving a real data integration problem: USGS returns clean GeoJSON points, but NWS alerts come back as full geographic polygons, so we built logic to compute centroids from arbitrary polygon shapes to get a single plottable coordinate for each alert. The two APIs also have completely different schemas for severity - numeric earthquake magnitude versus NWS's named event types like "Tornado Warning" or "Flood Watch" - so we built a normalization layer mapping both into one consistent urgency scale across the whole app.

The entire frontend is vanilla HTML, CSS, and JavaScript - no framework, no build step - using Leaflet.js for the map, with everything running client-side and zero backend infrastructure.

Challenges we ran into

CORS was the biggest recurring obstacle. Several data sources we initially wanted to include - FEMA disaster declarations, GDELT global news event monitoring - actively block direct browser requests, which would have required standing up a backend proxy. We made the call to drop those sources and keep the architecture genuinely backend-free, prioritizing a smaller set of sources we could trust completely over a larger set that would silently fail or need extra infrastructure.

We also iterated through earlier versions of this concept - including one that monitored the Bluesky social media firehose for distress signals - before realizing that social posts are far too noisy and unreliable to represent real emergencies. Pivoting away from social signals toward verified, authoritative government data was the single biggest decision that made this project trustworthy, and we made that call ourselves after testing the social media version and seeing how unreliable it was in practice.

What we learned

That "real-time" is much harder than it sounds once you're combining multiple independent data sources with no shared schema. We also learned the value of using AI tools like Claude as a force multiplier during debugging - it sped up our iteration cycles significantly - while the core design decisions, architecture tradeoffs, and final polish were ours to make.

What's next

• A lightweight serverless proxy to safely reintroduce FEMA disaster declarations
• Wildfire perimeter data from NASA FIRMS
• Saved regions with push notifications for critical alerts near a user's location

Built With

• claude
• css
• html
• javascript
• leaflet.js
• national-weather-service-(nws)-api
• netlify
• openstreetmap
• usgs-earthquake-hazards-program-api