CrisisAI — Real-Time Disaster Intelligence Platform

• 

  CrisisAI landing page where users can quickly report emergencies or access the live crisis map.

• 

  Emergency reporting interface where users describe incidents, select location, and submit real-time alerts to responders.

• 

  Interactive crisis map displaying live emergency reports with color-coded urgency levels and real-time updates.

• 

  Real-time command dashboard showing live incident statistics, AI-generated crisis summary, and incoming emergency reports.

🚨 Inspiration

During disasters, people often struggle to communicate their situation, while responders struggle to identify who needs help first. We noticed that emergency information is scattered across calls, social media, and local alerts, which slows down rescue operations.

We wanted to build a system that could turn scattered distress messages into a real-time, intelligent emergency dashboard. That idea led to the creation of CrisisAI.

💡 What it does

CrisisAI is an AI-powered disaster response platform where victims can submit emergency reports and responders can monitor incidents in real time.

When a report is submitted:

• AI automatically classifies urgency (Critical, Urgent, Stable)
• The report is stored in the database instantly
• A marker appears on the live crisis map
• The command dashboard updates in real time
• AI generates a situation summary to help decision makers prioritize response

This transforms raw messages into coordinated emergency intelligence.

🛠️ How we built it

We built CrisisAI as a full-stack real-time web application:

• React + TailwindCSS for a responsive and professional UI
• Supabase for database and realtime event streaming
• Google Gemini API for AI classification and summaries
• Leaflet for the interactive crisis map
• Vercel for deployment and hosting

We structured the backend using service layers so that the UI remains clean while data and AI logic stay modular and scalable.

⚠️ Challenges we ran into

• Ensuring real-time updates without page refreshes
  
• Handling AI failures safely so the app never freezes
  
• Designing a dashboard that looks professional and intuitive
  
• Managing mock vs real data without breaking the pipeline
  
• Deploying with environment variables configured correctly
  

We solved these by adding fallback logic, caching AI responses, and separating demo data from real backend data.

📚 What we learned

• How to build real-time applications using Supabase subscriptions
  
• How to safely integrate AI into production-style workflows
  
• The importance of graceful error handling for demos
  
• How UI clarity affects user trust in emergency systems
  
• How to structure a hackathon project like a real product
  

🚀 What's next for CrisisAI

Future improvements include:

• SMS/WhatsApp emergency reporting
• Voice-based multilingual input
• Predictive analytics for disaster spread
• Responder login and zone-based coordination
• Mobile app version for field teams

CrisisAI demonstrates how AI and real-time data can transform disaster response into a faster, smarter, and more coordinated process.

Built With

• api
• css
• gemini
• google
• javascript
• leaflet.js
• react
• supabase
• tailwind
• typescript
• vercel
• vite