Floodly

Every year, floods claim thousands of lives — most of them preventable. Floodly is the interactive safety guide that turns fear into action, so when the water rises, you're ready.

Comment

Floodly — Because Every Second Counts When the Water Rises

Inspiration

Last year, I lost a friend to a flood.

It wasn't a hurricane. It wasn't on the news for weeks. It was a sudden flash flood — the kind that fills a road in minutes. They tried to drive through. The water was only knee-deep. It didn't look dangerous. But ( 6 ) inches of moving water can knock you off your feet, and ( 2 ) feet can carry away a vehicle. They didn't know that. Most people don't.

After the funeral, I kept thinking: what if they had known? What if someone had shown them — not just told them, but shown them — how fast water becomes deadly? That question wouldn't leave me alone.

Floodly was born from grief, but it's built on hope — the hope that interactive education can turn a moment of panic into a moment of action, and that the next person facing rising water makes a different choice.

What it does

Floodly is an interactive flood safety web app that teaches users how to survive before, during, and after a flood through hands-on experiences rather than passive reading.

  • 🌊 Water Danger Visualizer — A real-time slider showing how water depth affects people, cars, and buildings. At ( h = 6'' ), you lose footing. At ( h = 24'' ), a car floats. Users see the danger scale.
  • 🗺️ Animated Evacuation Map — A grid-based flood simulation with two modes:
    • Watch Mode: observe a 6-stage flood engulf a neighborhood in real time
    • Draw Mode: race to plot an escape route from home 🏠 to shelter ⛑️ before floodwater cuts you off
  • 🎒 Emergency Kit Builder — Drag-and-select your survival kit. The app scores your choices and reveals what you missed — because forgetting a whistle could cost your life.
  • 🧠 Scenario Simulator — A branching decision tree: "The water is rising. Do you drive through or turn around?" Every choice has consequences, scored and explained.
  • 📝 Flood Safety Quiz — A 5-question assessment with instant feedback and a shareable result card.
  • 🤖 Floodly AI — A real-time AI chatbot powered by Lovable AI that gives personalized flood safety advice based on your situation. Ask it anything: "I live in a basement apartment near a river — what's my plan?"

Every feature ends with a shareable result card — an animated score ring users can screenshot and post, spreading awareness organically.

How we built it

Floodly is a React 18 + TypeScript single-page application with a serverless backend:

Layer Technology
Frontend React 18, Vite 5, Tailwind CSS v3
UI Components shadcn/ui, Radix primitives
Routing React Router v6 (4 pages: Home, Learn, Practice, Quiz)
AI Backend Lovable Cloud Edge Functions
AI Model Google Gemini 3 Flash (via Lovable AI Gateway)
Streaming Server-Sent Events (SSE) for token-by-token chat rendering
Design Glassmorphism design system with dark/light mode

The AI chat uses streaming SSE — each token arrives and renders in real-time, parsed line-by-line:

$$ \text{latency}{\text{perceived}} = t{\text{first_token}} \ll t_{\text{full_response}} $$

This makes the chatbot feel alive and responsive, even for long safety explanations.

The evacuation map uses a cellular automaton flood model where water spreads from source cells outward across a ( 10 \times 8 ) grid over 6 discrete time steps:

$$ \text{flood}(x, y, t+1) = \begin{cases} 1 & \text{if } \exists \, \text{neighbor}(x', y') : \text{flood}(x', y', t) = 1 \ 0 & \text{otherwise} \end{cases} $$

Users in Draw Mode must find a connected path ( P = {c_1, c_2, \dots, c_n} ) from Home to Shelter where:

$$ \forall \, c_i \in P : \text{flood}(c_i) = 0 \land \text{isAdjacent}(c_i, c_{i+1}) $$

Sound effects and haptic feedback (via the Vibration API) reinforce every interaction — correct answers ping, wrong ones buzz.

Challenges we ran into

1. Making danger feel real without being traumatizing. There's a fine line between educational urgency and fear-mongering. We iterated on the Water Danger Visualizer multiple times — early versions felt clinical, later ones felt alarming. The final version uses color gradients and calm iconography that escalates naturally.

2. SSE streaming parsing edge cases. Streaming AI responses sound simple until JSON payloads split across TCP chunks. We had to handle partial JSON re-buffering, \r\n vs \n line endings, SSE comments (: lines), and the [DONE] sentinel — all while updating React state without creating a new message bubble on every token.

3. Flood simulation pathfinding. The Draw Mode route checker needed to validate adjacency (no diagonals), avoid flooded cells, and connect Home to Shelter — essentially a BFS/DFS connectivity check on a dynamic grid. Getting the UX right (tap to toggle cells, visual feedback, error states) required multiple iterations.

4. Emotional authenticity. Building something inspired by personal loss means every design decision carries weight. We asked ourselves constantly: "Would this have helped?" That question kept us honest.

Accomplishments that we're proud of

  • The shareable result cards — animated SVG score rings with dynamic themes that users actually want to screenshot and share. Organic awareness without a marketing budget.
  • Real-time AI flood advisor — not a toy chatbot, but a genuinely useful tool. Ask it about your specific location, your basement apartment, your elderly neighbor — it gives tailored, actionable advice.
  • The "Turn Around, Don't Drown" moment in the Scenario Simulator — when you choose to drive through floodwater and the app shows you exactly why that kills people. That moment is the entire reason Floodly exists.
  • Full glassmorphism design system — semantic CSS tokens, dark/light mode, responsive across all devices. It looks beautiful because flood safety deserves to feel important.
  • Zero-backend persistence — the entire app runs client-side with a single serverless edge function for AI. No database, no auth required. Open it and learn.

What we learned

  • ( 1 ) in ( 3 ) flood deaths happen when people drive into floodwater (FEMA). Education literally saves lives.
  • Streaming APIs are harder than they look — but the UX payoff is massive.
  • Emotional design isn't manipulative when it's honest. People should feel something when learning about flood danger.
  • Gamification (scores, kits, quizzes) dramatically increases engagement with safety content that would otherwise be ignored.
  • The best accessibility feature is simplicity — if a 12-year-old can use Floodly, it works.

What's next for Floodly

  • Real-time flood data integration — connect to NOAA/NWS APIs to show actual flood warnings for the user's location and overlay them on the evacuation map.
  • Multilingual support — floods don't check what language you speak. Spanish, Hindi, and Mandarin are priorities.
  • Offline PWA mode — when the flood hits, the internet goes down. Floodly should work without connectivity.
  • School curriculum toolkit — partner with educators to bring Floodly into classrooms as an interactive lesson plan.
  • Community flood maps — let users crowdsource local flood-prone areas and share verified evacuation routes.
  • AR water level visualization — use your phone camera to see "this is what 2 feet of water looks like in YOUR living room."

For my friend — I wish you'd had this. I'll make sure others do. 💙

Built With

Share this project:

Updates