Crisis Aid

CrisisAid: Locate Help. Instantly. Verified.

Comment

CrisisAid Project

Inspiration

During natural disasters, conflicts, and emergencies, one of the most critical challenges people face is accessing timely, verified information about available resources. In crisis situations, every second counts, yet people often waste precious time searching through unreliable sources, outdated information, or simply don't know where to find help.

We were inspired by real-world scenarios where:

  • Flood victims couldn't locate nearby emergency shelters
  • Displaced families didn't know where to find food and water distribution points
  • Medical emergencies were complicated by lack of information about operating health facilities
  • Relief organizations struggled to coordinate resources effectively

CrisisAid was born from the vision of creating a unified, real-time platform that connects people in need with verified emergency resources when it matters most. We wanted to build something that could genuinely save lives by reducing response times and eliminating the confusion that often accompanies crisis situations.

What it does

CrisisAid is a comprehensive emergency resource management platform that serves both affected communities and relief organizations:

For Users in Crisis:

  • Interactive Real-Time Map: Visualizes all available emergency resources (shelters, food banks, medical facilities, water points, clothing distribution centers).
  • Location-Based Search: Automatically detects user location and shows nearby resources with precise directions
  • Smart Filtering: Quickly filter resources by type, availability status, and verification level
  • Critical Alerts: Receive real-time emergency notifications based on location, with severity levels (Info, Warning, Danger, Critical) and safety instructions
  • Detailed Resource Information: Access comprehensive details including operating hours, capacity, current occupancy, contact information, and special notes
  • Mobile-First Design: Works seamlessly on all devices, ensuring accessibility even in low-connectivity scenarios

For Relief Organizations & Administrators:

  • Resource Management Dashboard: Create, verify, update, and manage emergency resources with full CRUD capabilities
  • Alert Broadcasting System: Issue geo-targeted emergency alerts with customizable radius and severity levels
  • Community Submission Review: Review and approve user-submitted resource information to maintain data accuracy
  • User Management: Role-based access control (Admin, Volunteer, User) with verification workflows
  • Analytics & Insights: Track resource distribution, submission statistics, and system usage
  • Verification System: Ensure resource authenticity through a multi-level verification process

How we built it

CrisisAid is built with a modern, scalable tech stack designed for performance, reliability, and real-time capabilities:

Frontend (Next.js 16 + TypeScript)

  • Framework: Next.js 16 with App Router for server-side rendering and optimal performance
  • Language: TypeScript for type safety and developer experience
  • Styling: Tailwind CSS 4.0 for responsive, utility-first design
  • UI Components: shadcn/ui for accessible, customizable components
  • Mapping:
    • Leaflet with React-Leaflet for interactive, mobile-friendly maps
    • Custom marker system with status-based color coding
    • Real-time user location tracking
  • State Management: React Context API + React Hook Form for efficient form handling
  • Authentication: Cookie-based JWT token management with role-based routing

Backend (Node.js + Express + Supabase)

  • Runtime: Node.js with Express.js framework
  • Database: Supabase (PostgreSQL) with Row Level Security (RLS) policies
  • Authentication: JWT-based authentication via Supabase Auth
  • API Design: RESTful API with comprehensive endpoint coverage
  • Validation: Zod schema validation for all request/response data
  • Documentation: Swagger/OpenAPI 3.0 for interactive API documentation
  • Geospatial Functions: Custom PostgreSQL functions for location-based queries using Haversine formula

Key Features Implementation:

  1. Real-Time Location Services:

    • Browser Geolocation API for user positioning
    • Haversine distance calculation for proximity searches
    • Custom PostgreSQL functions for radius-based alert targeting

  2. Security Architecture:

    • JWT token-based authentication
    • Role-based middleware authorization (User, Volunteer, Admin)
    • Database-level security with Supabase RLS policies
    • Input sanitization and validation at all layers

  3. Data Management:

    • Database triggers for automatic timestamp updates
    • Foreign key relationships with cascade rules
    • Efficient indexing on frequently queried fields
    • Comprehensive audit trail for all modifications

  4. Alert System:

    • Geographic radius-based targeting
    • Severity classification (Info → Warning → Danger → Critical)
    • Auto-dismiss logic with user override capability
    • Real-time notifications with visual indicators

Challenges we ran into

1. Map Integration Complexity

Challenge: Initially attempted to use Google Maps API, but faced issues with API key management and cost concerns. Solution: Migrated to Leaflet, an open-source mapping library. However, this introduced SSR (Server-Side Rendering) challenges in Next.js. Solved by:

  • Implementing dynamic imports with ssr: false
  • Creating custom marker icons with status-based styling
  • Building a robust location picker component with reverse geocoding

2. Real-Time Data Synchronization

Challenge: Ensuring users see the most current resource availability without overwhelming the backend with requests. Solution:

  • Implemented optimistic UI updates on the frontend
  • Created efficient database queries with proper indexing
  • Used Supabase's real-time capabilities for critical updates
  • Added loading states and error boundaries for better UX

3. Authentication & Authorization Flow

Challenge: Managing secure authentication across multiple user roles while maintaining a seamless UX. Solution:

  • Implemented cookie-based JWT storage (more secure than localStorage)
  • Created middleware for route protection based on user roles
  • Built automatic role-based redirection system
  • Added token refresh logic to maintain sessions

4. Geospatial Calculations

Challenge: Accurately calculating distances between user location and resources, especially across different coordinate systems. Solution:

  • Implemented Haversine formula for distance calculation
  • Created PostgreSQL stored procedures for server-side computation
  • Added radius-based filtering for efficient queries
  • Handled edge cases (null coordinates, invalid inputs)

5. Form Validation & Error Handling

Challenge: Ensuring data integrity across complex multi-field forms while providing clear user feedback. Solution:

  • Implemented Zod schemas for both frontend and backend validation
  • Created reusable validation middleware
  • Built comprehensive error messages with field-level feedback
  • Added visual indicators for validation states

6. Mobile Responsiveness

Challenge: Creating an intuitive mobile experience for map interaction and form submission. Solution:

  • Adopted mobile-first design approach
  • Implemented responsive drawer components for resource details
  • Optimized map controls for touch interfaces
  • Created collapsible sections for better space utilization

Accomplishments that we're proud of

  1. User-Centric Design: Created an intuitive interface that even users under stress can navigate easily. The map-first approach reduces cognitive load during emergencies.

  2. Robust Security: Implemented enterprise-grade security with RLS policies, JWT authentication, and role-based access control—all while maintaining excellent performance.

  3. Comprehensive Admin Dashboard: Built a powerful yet accessible admin panel that gives relief organizations full control over resource management and alert broadcasting.

  4. Advanced Geospatial Features: Successfully implemented complex location-based queries, radius targeting, and real-time distance calculations with high accuracy.

  5. Excellent Mobile Experience: Despite the complexity of map interactions, achieved a smooth, responsive mobile experience that rivals native applications.

  6. Complete API Documentation: Created comprehensive Swagger documentation that makes the API accessible to third-party developers and integrations.

  7. Accessibility Focus: Used semantic HTML, ARIA labels, and keyboard navigation support throughout the application.

  8. Performance Optimization: Achieved fast load times through code splitting, lazy loading, and efficient database queries—critical for users with poor internet connectivity.

What we learned

Technical Learnings:

  • Next.js 16 App Router: Mastered the new routing paradigm, server components, and streaming SSR
  • Supabase Integration: Learned to leverage PostgreSQL's advanced features through Supabase's excellent DX
  • TypeScript Best Practices: Improved type safety across the entire stack, reducing runtime errors
  • Geospatial Computing: Gained deep understanding of coordinate systems, distance calculations, and map projections
  • Real-Time Architecture: Learned to design systems that balance real-time updates with performance constraints

Product & Design Learnings:

  • Crisis UX Design: Understood the importance of simplicity, clarity, and reliability in emergency interfaces
  • Information Hierarchy: Learned to prioritize critical information (status, location, contact) over nice-to-haves
  • Progressive Enhancement: Realized the value of building core functionality first, then adding enhancements
  • Accessibility in Emergencies: Appreciated how accessibility features benefit all users, especially under stress

Team & Process Learnings:

  • API-First Development: The value of designing and documenting APIs before implementation
  • Security by Design: Integrating security considerations from the beginning rather than as an afterthought
  • User Feedback: The importance of testing with real users in simulated emergency scenarios
  • Documentation: Comprehensive documentation accelerates development and reduces errors

What's next for Crisis Aid

Short-term Enhancements (Next 3-6 Months):

  1. Progressive Web App (PWA):

    • Offline functionality for viewing cached resources
    • Push notifications for critical alerts
    • Install-to-homescreen capability

  2. Multilingual Support:

    • Interface translation for major languages
    • Locale-based default settings
    • RTL (Right-to-Left) support for Arabic, Hebrew, etc.

  3. SMS Integration:

    • Send resource information via SMS for users without internet
    • SMS-based alert notifications
    • USSD support for feature phones

  4. AI-Powered Features:

    • Chatbot for natural language resource queries
    • Predictive analytics for resource demand
    • Automated data verification using ML

Medium-term Goals (6-12 Months):

  1. Third-Party Integrations:

    • WhatsApp Business API for communication
    • Integration with official emergency services (911, Red Cross, etc.)
    • Weather API integration for proactive alerts
    • Social media monitoring for crisis detection

  2. Advanced Analytics:

    • Heat maps for resource demand vs. availability
    • Predictive modeling for resource allocation
    • Impact reports for relief organizations
    • Real-time dashboard for emergency coordinators

  3. Community Features:

    • User ratings and reviews for resources
    • Photo uploads for resource verification
    • Community-driven resource updates
    • Volunteer coordination platform

  4. Enhanced Mapping:

    • Satellite imagery overlay
    • Traffic and road condition data
    • Safe routes calculation during emergencies
    • Hazard zone visualization

Long-term Vision (1-2 Years):

  1. Global Expansion:

    • Multi-country deployment with localized resources
    • Partnerships with international relief organizations
    • Integration with global emergency response networks

  2. Government Partnerships:

    • Official recognition as emergency resource platform
    • Integration with national emergency management systems
    • Access to government resource databases

  3. Training & Education:

    • Emergency preparedness guides
    • Crisis response training modules
    • Best practices library for relief organizations

  4. Native Mobile Apps:

    • iOS and Android apps with offline-first architecture
    • Enhanced GPS functionality
    • Bluetooth-based proximity alerts for nearby resources

For Admin Login

username/email: admin@crisisaid.com password: crisisAidAdmin

Share this project:

Updates