Inspiration
Floods are among the most frequent and devastating natural disasters in Southeast Asia, especially in Malaysia during the monsoon season. Many families are caught unprepared, often lacking clear guidance on what to do before, during, and after a flood. We were inspired by real-life incidents where timely information could have saved lives and reduced damage. SafeFlood was created to bridge that gap — transforming scattered emergency knowledge into a simple, accessible, and actionable platform.
What it does
SafeFlood is an interactive web-based emergency preparedness platform focused on flood safety. It provides:
- A structured 3-phase guide (Before, During, After floods)
- Clear, actionable safety steps and checklists
- Emergency kit recommendations
- Real-time decision guidance during disasters
- Region-specific emergency contact information
The goal is to help users prepare early, act correctly during emergencies, and recover safely afterward.
How we built it
We built SafeFlood using:
- HTML5 for structure and content
- CSS3 for modern, responsive UI design and animations
- Vanilla JavaScript for interactivity (section switching, tabs)
- A component-based layout approach for scalability
The design focuses on:
- Clean UI/UX for readability during stressful situations
- Mobile responsiveness for accessibility during emergencies
- Visual hierarchy to prioritise critical information
Challenges we ran into
- Information overload: Condensing extensive disaster guidelines into simple, digestible steps without losing accuracy
- User experience under stress: Designing an interface that remains clear and usable in high-pressure situations
- Content prioritisation: Deciding what information is critical vs. secondary during different flood phases
- Localization: Ensuring relevance to Malaysia while keeping the platform adaptable for other regions
Accomplishments that we're proud of
- Created a clear and structured emergency flow that users can follow بسهولة during a crisis
- Designed a visually intuitive interface that emphasizes critical actions
- Integrated real-world safety data (e.g., water depth dangers, rescue windows)
- Built a platform that is both educational and potentially life-saving
What we learned
- Simplicity is crucial — especially in emergency tools
- Users under stress need guidance, not complexity
- Visual design can significantly impact how quickly information is understood
- Real-world problems require empathetic and user-centered solutions
What's next for SafeFlood
-Add real-time flood alerts integration (API from weather and government sources) -Implement location-based risk detection -Develop a mobile app version for offline access -Include interactive evacuation maps -Integrate AI chatbot assistance for emergency guidance -Expand support for more countries and disaster types (landslides, storms)
SafeFlood aims to evolve into a comprehensive disaster preparedness ecosystem, helping communities stay informed, prepared, and resilient.
Team Name: Sparkpay Contact:jevinhhh123@gmail.com
Log in or sign up for Devpost to join the conversation.