FloodGuard

Inspiration

What it does

Every monsoon, many parts of Pakistan face severe floods that wash out roads, isolate families, and make communication hard. I wanted a small, no-install web tool anyone could open in a browser even on weak internet to keep emergency contacts, incident reports, and weather updates together. That idea became FloodGuard.

How we built it

Frontend: Plain HTML, Tailwind CSS, and Vanilla JavaScript for speed and offline reliability.
Data Storage: LocalStorage so all data stays on the user’s device; no accounts or servers.
Key Features:
- Add, edit, or delete emergency contacts with one-tap Call or SMS
- Log incident reports (date, notes) for local tracking
- Live weather panel for current conditions
- Export contacts as JSON for backup or sharing
UI: Mobile-first, calm colors, clear buttons—built for quick use during stressful moments. ## Challenges we ran into Keeping the UI simple but useful in emergencies. Also I struggled a bit while adding apis to the project and making them work without any issue.

Accomplishments that we're proud of

I’m grateful to have built something that can truly support communities across Pakistan, especially those suffering from recurring floods. Even a small tool can make a big difference when people need help most.

What we learned

Even simple web technologies (HTML, CSS, JS) can create tools that save time in disasters.
Offline-first design is critical when mobile data drops or networks fail.

What's next for FloodGuard

Add multilingual support (Urdu, Pashto, Sindhi) for wider accessibility.
Map integration to mark flooded roads, shelters, and rescue points.
Push alerts for heavy rainfall or evacuation notices.
Offline maps & printable contact sheets for areas with zero connectivity.
Build a lightweight PWA (Progressive Web App) so users can install it on phones.
Explore secure data sharing with local volunteers or relief teams without exposing private info.