Guardian

Inspiration

Most weather apps tell people what the weather is, but not what it means for their specific situation. A typhoon warning can mean very different things for an elderly person living alone on the ground floor, a parent with an infant, or someone who depends on daily medication.

Guardian was inspired by that gap: helping people turn weather warnings into personal, concrete safety decisions before danger becomes real.

What It Does

Guardian is a personal weather safety companion. It combines live weather conditions with a user's vulnerability profile to generate:

• A personal danger score
• Priority safety actions
• A comparison view showing how the same weather affects different people
• Interactive disaster practice scenarios
• A printable and shareable offline Safety Card

The core idea is:

$$ PersonalRisk = WeatherRisk \times (1 + VulnerabilityModifier) $$

Instead of giving generic advice, Guardian explains what the current weather means for the individual user.

How We Built It

We built Guardian as a Next.js PWA using TypeScript, React, Tailwind CSS, Zustand, IndexedDB, and Open-Meteo weather data.

The app has four core engines:

• Profile Engine: turns 8 answers into a vulnerability score
• Risk Engine: combines weather data with user vulnerability
• Action Engine: maps risk factors to safety recommendations
• Practice Engine: runs interactive disaster decision trees

All personal data stays in the browser through IndexedDB. The PWA shell and cached weather/profile data help the app remain useful in low-connectivity situations.

Challenges

The hardest part was making the risk model simple enough to explain, but still meaningful enough to personalize recommendations. We also had to handle offline behavior carefully, especially when generating a Safety Card after the user leaves the dashboard.

Another challenge was making the demo clear for judges: Guardian is not just a weather dashboard. Its value comes from the full loop: profile, risk, action, practice, and offline safety card.

What We Learned

We learned that disaster preparedness tools need to be personal, not just informational. Clear actions matter more than raw data. We also learned how important offline-first design is for emergency tools, because the moment people need help most may be the moment connectivity becomes unreliable.

Accomplishments

We are proud that Guardian is a working end-to-end demo with:

• Real weather API integration
• Personalized risk calculation
• Scenario-based practice mode
• Offline-ready safety card
• PWA support
• Automated tests for key engines
• A deployed public demo

What's Next

Next, we would like to add:

• SMS or WhatsApp safety alerts
• More disaster types such as wildfire and earthquake
• Community vulnerability maps
• Voice-first profile building
• Integration with official emergency alert systems

Built With

• indexeddb
• next.js
• open-meteo-api
• pwa-service-worker
• react
• tailwind-css
• typescript
• vercel
• zustand