Flood Safe

Know Your Flood Risk

Comment 1

FloodSafe 🌊 — Project Story

Inspiration

In 2025, climate change is no longer a distant threat — it’s a daily reality.
This year alone, multiple countries have faced severe floods, displacing millions and damaging infrastructure.
Seeing these disasters motivated me to build a solution that helps communities stay informed, prepare early, and act confidently.

I wanted to make something lightweight, accessible, and intelligent — something that even works on basic browsers and can still guide people during an emergency. This is how FloodSafe was born.

What it does

FloodSafe is a three-page web application designed to keep users safe during floods:

  • Home Page (Map & Risk Level):

    • Users can search or click a location on an interactive map.
    • The system highlights safe zones and shows the best routes to reach them.
    • Below the map, users can see the flood risk level for that location (Low / Medium / High).

  • Evacuation Guide (Printable):

    • A step-by-step checklist on what to do before, during, and after a flood.
    • A printable list of items to keep ready: food, water, medicine, clothes, and documents.

  • AI Planner (Powered by Groq):

    • Users enter their details: location, household size, transport, pets, and medical needs.
    • The backend calls Groq’s AI API to generate a personalized evacuation plan in natural language.
    • If offline, the system falls back to a heuristic model that still gives useful guidance.

How we built it

  • Frontend: Built with HTML, CSS, and vanilla JavaScript for maximum portability and speed.
  • Backend: A single PHP file (backend.php) receives user input, calls Groq AI via REST API, and returns structured JSON.
  • Risk Model: A simple scoring algorithm estimates risk even without AI

Challenges we ran into

  • Setting up Groq API calls in PHP and parsing responses as strict JSON.
  • Ensuring the app worked offline with heuristics when API access was unavailable.
  • Designing a calm, modern UI that feels reassuring during stressful situations.
  • Keeping the architecture framework-free (no Node.js) while still supporting server logic.

Accomplishments that we're proud of

  • Delivered a fully functional AI-powered evacuation planner that runs in any browser.
  • Designed a map-based risk detection system that shows safe zones and routes.
  • Built a printable evacuation checklist, bridging online and offline preparedness.
  • Achieved a clean architecture using just HTML, CSS, JS, and PHP — simple to set up for anyone.

What we learned

  • How to integrate Groq AI for fast and cost-effective inference.
  • How important it is to provide graceful fallback when internet or AI services are unavailable.
  • The power of good UX: clear, structured output reduces confusion and panic in emergencies.
  • Writing secure backend code to keep API keys private while sharing open-source code.

What's next for FloodSafe

  • Integrate real-time flood alerts from government APIs.
  • Build SMS notification support for low-connectivity regions.
  • Add multi-language support for wider accessibility.
  • Package as a PWA so it can work like a native mobile app offline.
Share this project:

Updates