BagyoAlerto

Your digital go-bag checklist for every bagyo — always ready, even offline.

Comment

Inspiration

Every year, the Philippines faces multiple typhoons that disrupt lives and put families at risk. While many disaster apps exist, most are either too complicated, require accounts, or rely on internet connectivity that often fails during emergencies. We wanted to build a simple, privacy-first, offline-ready tool that helps families prepare and stay safe.

What it does

BagyoAlerto is a Progressive Web App (PWA) designed for typhoon preparedness.

  • Emergency Checklist: Pre-loaded kits (Personal, Family, Pet) + ability to add custom items.
    • Weather Alerts: Displays real-time alerts with severity levels (info, warning, danger).
    • Emergency Contacts: Quick access to important hotlines, with "Call Now" or "Copy" buttons.
    • Themes & Offline Mode: Works even without internet; light/dark theme toggle.
    • Add to Home Screen: Installable like a native app on both Android and iOS. ## How we built it
    • Frontend: Vanilla JavaScript (modular ES6 imports), HTML5, CSS3 with reusable components.
    • Storage: Browser localStorage for saving kits, progress, and user settings.
    • PWA Features: Service Worker for offline support, Manifest for installability.
    • Design: Responsive UI with category cards, progress bars, and clean visual hierarchy.
    • Collaboration: GitHub for version control with branch rules (PR approvals required).
    • API: Weather API for weather forecast data. ## Challenges we ran into
    • Progress bar animation: Making progress update smoothly without resetting other categories.
    • Syncing checklist states: Ensuring checked/unchecked items persist across sessions.
    • Add to Home Screen flow: Capturing the beforeinstallprompt event and integrating it cleanly into the guide page.
    • Offline reliability: Debugging service worker cache strategies to ensure the app loads offline. ## Accomplishments that we're proud of
    • Building a fully offline-capable PWA that works like a native mobile app.
    • Designing a customizable checklist system with progress tracking by categories.
    • Successfully integrating emergency contacts and weather alerts in one lightweight app.
    • Keeping everything account-free, privacy-first, and community-friendly. ## What we learned
    • How to design modular JS structures for scalable features.
    • Handling dynamic UI rendering with smooth animations.
    • Best practices for PWA install prompts and service worker caching.
    • The importance of UX in disaster preparedness tools — clarity and simplicity save lives.
    • Fetching API data. ## What's next for BagyoAlerto
    • Community-shared kits: Allow exporting/importing checklist templates across users.
    • Push notifications: Real-time weather alerts via web push.
    • Weather API: A more accurate weather api for user reliability of the app.
Share this project:

Updates