A mobile-first Progressive Web App (PWA) for community-based reporting and monitoring of flood events, public health alerts, and education disruptions. Built for field use in disaster-affected and low-connectivity areas — offline-capable and deployable at zero infrastructure cost.
Developed as part of the HeroX Data-to-Dust Challenge, demonstrating how lightweight digital tools can strengthen community resilience during climate emergencies and humanitarian crises.
| Home | Dashboard | Flood Report |
|---|---|---|
| Community landing with live incident map | Unified reports dashboard with filtering | Structured form for field reporting |
- 📡 Offline-ready — Service Worker caching keeps the app functional when connectivity fails
- 🗺️ Live incident map — Leaflet.js map showing georeferenced flood, health, and education incidents across Sri Lanka
- 📋 Multi-domain reporting — Floods 🌊, public health 🩺, and education/safety 🏫 in one platform
- 📊 Unified dashboard — Filter and view all reports with severity and status badges
- ⚡ Real-time alert ticker — Scrolling live alerts bar on the home page
- 📲 PWA installable — Users can install it like a native app on Android and iOS
- ♿ Accessible — ARIA labels, semantic HTML, keyboard-navigable
- 🌐 Zero-cost hosting — Fully static; deployable on GitHub Pages at no cost
- 📱 Responsive — Optimised for mobile, tablet, and desktop
| Page | Purpose |
|---|---|
index.html |
Landing page with live map, alert ticker, and domain cards |
flood-report.html |
Field form — submit flood observations with severity and location |
health-report.html |
Field form — report health alerts, outbreaks, or supply shortages |
education-report.html |
Field form — report school closures or public safety incidents |
dashboard.html |
Unified view of all reports with filter tabs and status badges |
privacy.html |
Privacy policy for field reporters |
terms.html |
Terms of use and disclaimers |
| Layer | Technology |
|---|---|
| Frontend | HTML5, CSS3, Vanilla JavaScript |
| Map | Leaflet.js + OpenStreetMap |
| Typography | Inter via Google Fonts |
| PWA | Web App Manifest + Service Worker |
| Hosting | GitHub Pages (static, zero-cost) |
| Offline | Cache-first strategy via service-worker.js |
Open the deployed app directly — no installation required:
https://drjeevaraj.github.io/FloodTrackerApp/
git clone https://github.com/drjeevaraj/FloodTrackerApp.git
cd FloodTrackerApp
# Serve with any static file server, e.g.:
npx serve .
# or
python -m http.server 8000Then open http://localhost:8000 in your browser.
Note: The PWA Service Worker requires HTTPS or localhost to activate. GitHub Pages serves over HTTPS automatically.
On supported browsers, visit the live URL and tap "Install FedWatch App" when prompted — or use the browser's "Add to Home Screen" option.
FloodTrackerApp/
├── index.html # Home / landing page
├── dashboard.html # Reports dashboard
├── flood-report.html # Flood reporting form
├── health-report.html # Health alert form
├── education-report.html # Education / safety form
├── privacy.html # Privacy policy
├── terms.html # Terms of use
├── manifest.json # PWA manifest
├── service-worker.js # Offline caching
├── images/
│ └── flood-icon.png # App icon (192×192 & 512×512)
└── LICENSE
Sri Lanka is vulnerable to seasonal flooding, tropical storms, and cascading health and education disruptions. During disaster events, field workers and community members often operate in areas with intermittent connectivity and no access to institutional data systems.
FloodTrackerApp was designed from first-hand experience working in disaster-affected communities in the Eastern Province — where a lightweight, offline-capable reporting tool can make a real difference before formal emergency management systems respond.
This project sits within a broader portfolio of digital public health work including disease surveillance platforms (OutbreakWatch), health statistics visualisers (District Health Stats PWA), and welfare-centre dashboards built for the Sri Lankan context.
|
MBBS · MCGP · MSc Biomedical Informatics I build digital health tools that serve communities, not just institutions — offline-first, zero-cost, field-ready. This app is part of a portfolio of 8 digital health projects developed alongside clinical practice in Sri Lanka.
🌐 drjeevaraj.com ·
📄 Full CV ·
💼 Dev Portfolio 📚 Author of Are You Still Human? (Kindle, 2026) — a literary nonfiction work on AI and human relationships. |
| Project | Description | Stack |
|---|---|---|
| OutbreakWatch | Real-time disease surveillance with anomaly detection | Python · Django |
| District Health Stats PWA | Offline health data visualiser for district level | JS · D3.js |
| Welfare Centre Dashboard | Displaced-population tracking during disasters | React · Firebase |
| Cancer Early Detection Centre | Patient registration & screening workflows | Vue.js · REST API |
Full portfolio: drjeevaraj.com/dev.html
This project is released under the MIT License.
You are free to use, adapt, and redistribute this tool for community and humanitarian purposes. Attribution is appreciated.
- Leaflet.js — open-source interactive maps
- OpenStreetMap — map tile data
- Google Fonts — Inter
- HeroX — Data-to-Dust Challenge platform
- Communities of Trincomalee and the Eastern Province who inspired this work
Built with purpose for communities that need it most.
drjeevaraj.com · Sri Lanka · 2026