BagyoAlerto is a simple website application that supports mobile view and an installable web app that helps typhoon-prone families or individuals to stay prepared for typhoons. Users can manage a customizable emergency checklist, toggle dark/light mode, and receive smart weather-based reminders. The app works offline, stores data using localStorage, and includes emergency contact section — all built using vanilla HTML, CSS, and JavaScript with PWA support.
John Gabrielle Ofiangga |
Alwyn Adriano |
John Asher Manit |
Joshua Paul Colmo |
🔗 https://bagyo-alerto.vercel.app
- Promote typhoon readiness and disaster risk reduction in the Philippines.
- Offer an offline-capable checklist tool that can be "installed" like a native app.
- Send reminders if it starts raining, prompting users to check their emergency kit.
- Check/Uncheck Emergency Items – Mark items as packed or pending
- Add/Remove Custom Items – Users can personalize the checklist
- Save Checklist using localStorage – Data persists even when offline
- Categorize Items – Items grouped by category (e.g., Food, Medical, Documents)
- Checklist Versions – Switch between pre-defined packs (e.g., Personal Kit, Family Kit, Pet Kit)
- Check All/Uncheck All by Category or by Checklist – Quickly manage item status by group
- Remove All Items in a Category – Declutter with one click
- Import Checklist via File Upload/Export Checklist as .json file – Sync data between devices
- Mobile Responsive UI – Seamless use on any device
- Dark/Light Mode Toggle – Accessible in various lighting conditions
- Reset Entire Checklist – Clear everything in one tap
- User Guide Page - A dedicated help page with step-by-step on how to use this app
- In-App Weather Alerts – Get reminders if rain is detected in user’s area (via weather API)
- In-App Notifications – Reminds user to review checklist before typhoon hits (PWA + Notification API)
- Export as PDF – One-click export of contacts
- Tap-to-Call Hotlines (Mobile only) – Directly call government/emergency agencies from the app
- Copy Contact Info Button – Quick copy for text messaging or sharing
- Add to Home Screen Support – Works like a native app on mobile
- Offline-Ready – View and manage checklist even without internet
- Data Stays Local – Privacy-first approach, no account/login required
These may be implemented if there are still remaining time.
- Suggest recommended items based on user location or typhoon severity.
- Auto-detect city using Geolocation API for more accurate weather data.
- Use IndexedDB or alternative local storage for richer offline state and for bigger storage capacity.
| Category | Technology |
|---|---|
| Markup/Style | HTML5, CSS3 |
| Logic | Vanilla JavaScript |
| APIs | WeatherAPI (fallback: sample JSON) |
| Storage | localStorage |
| App-Like Setup | Progressive Web App (PWA) |
| Notifications | JS Notifications API |
| Hosting | Vercel |