Muskan Joshi

Stay Ready. Stay Safe.

Comment

Inspiration

Floods are one of the most common natural disasters, yet many people are unsure how to respond in critical moments. We wanted to create something simple but impactful — a tool that could provide clear guidance and help people stay safe during emergencies. Our goal was to turn important safety information into something accessible and easy to understand for everyone.

What it does

FloodSafe is an interactive web application that helps users stay safe before, during, and after a flood. It provides clear, step-by-step safety instructions, emergency preparedness tips, and guidance for recovery after a flood. The platform includes features like a flood alert system, a shelter information section, and an interactive chatbot that answers safety-related questions. It is designed to be simple, accessible, and easy to use, so people can quickly find important information during emergencies. Overall, FloodSafe turns critical safety information into an engaging and user-friendly experience that helps people make informed decisions and stay safe.

How we built it

We built FloodSafe as a responsive web application using HTML, CSS, and JavaScript. We focused on a clean and modern UI with card-based layouts, icons, and animations to improve user experience. We added features like a flood alert system, a shelter information section, and an interactive chatbot to make the platform feel like a real emergency assistant rather than just a static website.

Challenges we ran into

One of the main challenges was balancing design and functionality — making the website visually appealing while keeping it simple and easy to use. Implementing realistic animations like rain effects and ensuring smooth performance was also challenging. Additionally, structuring information in a way that is both informative and easy to understand required careful planning.

Accomplishments that we're proud of

We’re proud of transforming a simple idea into a fully interactive and visually polished web application. Instead of creating a basic informational page, we built FloodSafe as a dynamic emergency assistant with features like animated UI, a chatbot, and a structured safety guide. We’re especially proud of designing a clean and intuitive user interface that makes critical safety information easy to understand, even under stressful situations. Adding realistic animations like rain effects and interactive elements helped us create a more engaging and real-world experience. Another key accomplishment was integrating multiple features — including safety instructions, emergency tips, and shelter information — into one cohesive platform. This allowed us to create something practical and meaningful, not just visually appealing. Overall, we’re proud that our project combines technical skills with real-world impact, showing how technology can be used to help people stay safe during emergencies.

What we learned

Through this project, we learned how to design user-friendly interfaces that prioritize clarity and accessibility. We also improved our skills in HTML, CSS, and JavaScript while adding interactive features like animations and a chatbot. Most importantly, we learned how technology can be used to solve real-world problems and create meaningful impact.

What's next for Muskan Joshi

In the future, we plan to enhance FloodSafe by integrating real-time data and expanding its capabilities. We aim to connect the platform with live weather and flood alert APIs so users can receive accurate, location-based updates. We also plan to improve the shelter finder by integrating real maps and GPS-based recommendations for nearby safe locations. Another key goal is to upgrade the chatbot into an AI-powered assistant that can provide more detailed and personalized responses. Additionally, we want to make the platform more accessible by optimizing it for mobile devices and adding multilingual support to reach a wider audience. Ultimately, our vision is to evolve FloodSafe into a reliable, real-time emergency support tool that can assist people during natural disasters around the world.

Built With

Share this project:

Updates