Arus: Stay Dry Stay Safe

Inspiration

Malaysia faces devastating flash floods every monsoon season, especially in Kuala Lumpur and the Klang Valley. Existing flood information is scattered across government websites, social media, and news outlets. We wanted to build a single platform that combines AI-powered flood analysis, real-time community reporting, and interactive mapping — so Malaysians can stay informed and stay safe.

What it does

Arus is a flood safety assistant that helps Malaysians prepare for, navigate, and survive flash floods

AI Flood Prediction — Enter any location in Malaysia and get an instant AI-generated flood risk assessment Journey Check — Plan your route home and get AI safety recommendations based on known flood-prone areas Interactive Flood Map — A real-time Leaflet map with AI-identified hotspots, community reports, and JPS station data Community Reporting — Citizens can submit flood reports with photos and descriptions for hyper-local awareness Emergency SOS — One-tap access to emergency numbers (999, JPS) and GPS location sharing with rescuers Safety Kit Checklist — A preparedness checklist for before, during, and after a flood event

How we built it

Frontend: React 19 + TypeScript, bundled with Vite Styling: Tailwind CSS v4 with a dark-mode-first design AI: Google Gemini API (gemini-3-flash-preview) for flood prediction, route safety analysis, and real-time hotspot identification using structured JSON output Mapping: Leaflet + React Leaflet for interactive flood maps with OpenStreetMap tiles Animations: Framer Motion for smooth page transitions and micro-interactions Icons: Lucide React for a consistent, modern icon system

Challenges we ran into

Structuring AI prompts to return consistent, parseable JSON for flood risk levels and map coordinates Balancing real-time feel with client-side architecture — simulating live updates without a dedicated backend Map marker customization with Leaflet's divIcon system to show color-coded severity levels Keeping everything in a single SPA while maintaining a smooth, app-like user experience across multiple tabs and modals

Accomplishments that we're proud of

A polished, production-quality UI that feels like a real product, not a hackathon prototype Gemini AI integration that delivers genuinely useful, Malaysia-specific flood insights in seconds The SOS feature with one-tap GPS location sharing — a feature that could actually save lives A fully functional community reporting system with photo uploads and comment threads The interactive flood map that combines AI-generated hotspots with user reports on a real map

What we learned

How to leverage Gemini's structured JSON output mode for reliable, parseable AI responses The power of combining AI intelligence with community-sourced data for hyper-local relevance How to build an accessible emergency tool that works under pressure — simple, fast, and clear The importance of designing for real-world Malaysian flood scenarios (e.g. Manglish tone, local landmarks, JPS station references)