EcoPulse

EcoPulse: An offline-first emergency PWA. When the grid goes down, users access shelter maps, AI triage, and file reports into a local queue that auto-syncs when internet returns.

Comment

Inspiration

When natural disasters like Hurricane Harvey or the 2021 Texas Winter Storm Uri hit, the first thing to fail is often the infrastructure we rely on most: the internet. When cell towers go down, standard web applications break, leaving communities unable to find safe shelters, medical aid, or clean water. We were inspired to build a solution that bridges this gap—an application that doesn't just survive a grid failure but continues to provide critical life-saving information. We wanted to build a tool that turns any smartphone into a resilient emergency companion.

What it does

EcoPulse is an offline-first emergency resilience Progressive Web App (PWA). It serves two primary functions based on connectivity:

When Online: It operates as a live community coordination dashboard. Users can view real-time shelter statuses, submit emergency reports, and access an AI-powered triage assistant.

When Offline (The Magic): When the network drops, EcoPulse seamlessly transitions to a local survival companion.

  • Cached Maps: Users can still view an interactive map of nearby shelters, medical stations, and water drop-offs.
  • AI Triage: The AI assistant falls back to a hardcoded local decision tree, providing step-by-step first-aid and survival protocols without needing a server.
  • Offline Queueing: Users can submit status reports (e.g., "Shelter B is full" or "Medical Emergency"). These are securely stored locally in IndexedDB.
  • Auto-Sync Engine: The moment connectivity is restored, our background Sync Engine automatically flushes the queued reports to the central Admin Dashboard for emergency coordinators.

How we built it

We built EcoPulse using a modern, resilient tech stack:

  • Frontend: Next.js 14+ (App Router, TypeScript) styled with Tailwind CSS for a high-contrast, mobile-first emergency aesthetic.
  • PWA & Caching: @ducanh2912/next-pwa and Workbox to precache the app shell and static assets, ensuring the app loads with zero internet.
  • Map: react-leaflet with CartoDB Dark Matter tiles, dynamically imported to prevent server-side rendering conflicts.
  • Local Storage: Dexie.js (IndexedDB) to manage the offline queue of reports and cached shelter data.
  • AI Engine: Google Gemini API for dynamic triage when online, with a custom JSON decision tree fallback for offline scenarios.
  • Backend: Next.js API Routes handling the sync endpoint and mock in-memory database.

Challenges we ran into

Building an offline-first app comes with unique hurdles.

  1. Service Workers in Dev Mode: We learned the hard way that Next.js PWAs often fail in development mode. We had to configure the build to strictly generate Service Workers for production and use Chrome DevTools to simulate offline behavior properly.
  2. Leaflet in Next.js: The window is not defined error is a rite of passage. We solved this by using Next.js dynamic imports with ssr: false to ensure the map only renders client-side.
  3. The Sync Queue: Designing the IndexedDB schema to handle synced: false boolean flags, and managing the React state to accurately reflect when a queue is pending versus synced, was a complex logic puzzle.
  4. AI Graceful Degradation: We had to ensure the AI Triage interface didn't just crash when the internet dropped, leading us to build a robust offline JSON protocol map.

Accomplishments that we're proud of

We are incredibly proud of the Sync Engine. Watching the Chrome DevTools toggle from "Offline" to "Online," seeing the pending report queue banner disappear, and then watching those exact reports populate the Admin Dashboard in real-time was pure magic. We successfully built an app that genuinely works with zero connectivity—a true test of resilience that most hackathon projects don't attempt. We are also proud of the UI, which maintains a calm, urgent, and readable dark aesthetic designed for high-stress situations.

What we learned

This project taught us the deep intricacies of Progressive Web Apps, specifically Service Worker lifecycles and caching strategies. We learned how to manage complex offline states in React using IndexedDB, how to architect for graceful degradation, and how to build UI/UX that prioritizes clarity and speed for panicked users. Most importantly, we learned that the most impactful technology is the kind that works when everything else fails.

What's next for EcoPulse

The next phase for EcoPulse involves scaling the backend and expanding its reach:

  1. Real Backend & Database: Migrating from the mock in-memory API to a production Supabase (PostgreSQL) database with real-time subscriptions and geolocation queries.
  2. P2P Mesh Networking: Implementing Bluetooth Low Energy (BLE) mesh capabilities so users can broadcast SOS signals to nearby devices even if no cell towers are operational.
  3. SMS Fallback: Integrating Twilio so users with feature phones (no internet) can text their status reports to the EcoPulse dashboard.
  4. Geofenced Alerts: Push notifications to alert users in specific zip codes about incoming severe weather or immediate resource shortages.

Built With

  • dexie.js
  • disaster-relief
  • emergency-response
  • framer-motion
  • gemini-api
  • google-ai
  • indexeddb
  • leaflet.js
  • next.js
  • node.js
  • offline-first
  • progressive-web-app
  • react
  • service-workers
  • tailwind-css
  • typescript
  • vercel
  • workbox
Share this project:

Updates

Submission history