FloodSafe AI

FloodSafe AI began with a simple question that many families ask during a flood: "Should we leave now, or is it safe to wait?"

Growing up in Kerala, where floods have become an unfortunate reality, I realized that while weather forecasts and emergency alerts tell us that flooding is happening, they rarely tell ordinary people what that actually means for their own homes. Families watch the rain, see water entering their houses, move their belongings upstairs, and hope the situation improves. The hardest part isn't knowing that it's flooding—it's not knowing how much worse it will get or when it becomes too dangerous to stay.

That idea inspired me to build FloodSafe AI.

Rather than creating another dashboard full of technical information, I wanted to build something that people could actually use during an emergency. My goal was to create a personal flood preparedness platform that helps residents understand what is happening now, what is likely to happen next, and what they should do before the situation becomes critical.

I built the project using Next.js, TypeScript, Tailwind CSS, React Leaflet with OpenStreetMap, Google Gemini AI, and deployed it using Vercel. The interactive map visualizes flood risk zones that expand over time based on future forecasts, allowing users to simulate how flooding may evolve over the next few hours. Instead of only showing the present, the application encourages people to think ahead.

To make the platform more practical, I added flood risk scores, predicted flood depth, forecast confidence, nearby emergency shelters, emergency contact numbers, and AI-generated evacuation guidance. Using Google Gemini, the application transforms complex disaster information into simple recommendations that help users understand whether they should prepare, stay alert, or evacuate.

One of the biggest challenges I faced wasn't technical—it was deciding who I was building for. Initially, the application looked like a disaster management dashboard designed for professionals. It was filled with information but didn't feel approachable for everyday users. I stepped back and redesigned the experience from the perspective of a family whose home had just started flooding. That completely changed the direction of the project. I focused on making the interface clean, intuitive, and easy to understand, even during stressful situations.

On the technical side, integrating interactive maps into Next.js presented several challenges because Leaflet relies on browser APIs that don't work during server-side rendering. I also had to solve hydration issues, configure dynamic imports correctly, and ensure the application remained responsive while updating flood predictions dynamically.

The accomplishment I'm most proud of is that FloodSafe AI doesn't just visualize a flood—it helps people make decisions. Instead of simply telling users that flooding exists, it provides context, predicts future impact, identifies nearby shelters, and offers personalized evacuation guidance in one place. I believe technology should reduce uncertainty during emergencies, and that's exactly what I wanted this project to achieve.

Building FloodSafe AI also taught me how to combine AI, interactive mapping, and user-centered design into a real-world application. More importantly, it showed me that solving meaningful problems isn't just about building advanced technology—it's about presenting information in a way that helps people stay calm, make informed decisions, and potentially save lives.

This project is only the beginning. In the future, I plan to integrate real-time weather forecasts, river-level sensors, satellite imagery, GPS-based personalization, dynamic evacuation routing, offline emergency functionality, and official disaster management data. My long-term vision is to transform FloodSafe AI into a trusted personal evacuation companion that helps families prepare before disasters become life-threatening.

FloodSafe AI is built around one simple belief: 'people deserve to know what's coming before it's too late, so they can make safer decisions for themselves and the people they love.'

Built With

• ai
• css3
• google-gemini-api
• mapping
• next.js
• openstreetmap
• react-leaflet
• tailwind
• typescript
• vercel