Skip to content

Ravikumar-2016/SaviourWeb

BranchesTags

Repository files navigation

Live Demo GitHub

Next.js React TypeScript Firebase TailwindCSS Leaflet Framer Motion


Launch App    Fork

📋 Table of Contents

🌟 About

Purpose Focus

SAVIOUR is a comprehensive disaster management platform designed to save lives and strengthen community resilience during emergencies. Built with modern web technologies, it enables real-time coordination, instant alerts, and efficient resource management.

🎯 Mission

"When disaster strikes, every second counts. SAVIOUR connects communities, coordinates resources, and saves lives through technology."

✨ Features

🆘 Emergency SOS System

  • One-tap SOS Broadcast - Instantly alert your community with GPS location
  • 9 Emergency Types - Medical, Fire, Robbery, Accident, Domestic Violence, Natural Disaster, Missing Person, Public Disturbance, Other
  • 3-Level Priority System - High/Medium/Low urgency categorization
  • Image Attachments - Upload evidence or situation photos
  • SOS Management - Create, edit, view, and delete your SOS requests
  • Real-time Status Tracking - Track responders and SOS status
  • 5-Second Cancel Window - Prevent accidental alerts

🗺️ Interactive Navigation & Mapping

  • Leaflet-based Maps - Visualize all SOS requests on interactive map
  • Real-time SOS Markers - Color-coded by urgency level
  • Emergency Type Filtering - Filter map markers by disaster type
  • Click-to-Respond - View SOS details and respond directly from map
  • Profile-based Location - Auto-center map on user's city
  • Responder Tracking - See who responded to each emergency

🌤️ Advanced Weather Intelligence

  • Dual API System - WeatherAPI.com (primary) + OpenWeatherMap (fallback)
  • 5-Day Combined Forecast - Merges data from both APIs
  • 24-Hour Hourly Predictions - Detailed hourly weather data
  • Current Conditions Widget - Temperature, humidity, wind, UV index
  • Profile-based Location - Automatic weather for user's city
  • Source Transparency - Shows which API provided each forecast
  • Sunrise/Sunset Times - Daily astronomical data

👥 Community Hub & Chat

  • City-based Chat Rooms - Connect with people in your area
  • Real-time Messaging - Instant message delivery via Firebase
  • Media Sharing - Share images, videos, and documents (Base64)
  • Active User Counter - See how many are online in your city
  • Persistent History - Messages stored in Firestore
  • User Identification - Display names and avatars

📦 Resource Management

  • Resource Offers - Share supplies (Medical, Food, Shelter, etc.)
  • Resource Requests - Request needed supplies with urgency levels
  • 8 Categories - Medical, Food/Water, Shelter, Rescue, Communication, Transportation, Tools, Power/Fuel
  • City-based Matching - Connect with resources in your area
  • Status Tracking - Available, Claimed, Fulfilled, Pending
  • Contact Integration - Direct phone contact with resource providers

📞 Emergency Contacts

  • National Emergency Numbers - Quick access to 112, 100, 101, 102
  • Personal Emergency Contacts - Add family/friends as emergency contacts
  • One-tap Calling - Direct call integration
  • Location Sharing - Share GPS location via Google Maps link
  • WhatsApp Integration - Send SOS message with location
  • SMS Emergency Alerts - Send emergency SMS to contacts

📚 Comprehensive Safety Guides

  • 12 Disaster Types Covered:
    • 🩺 First Aid Tutorial
    • 🌊 Flood Safety
    • 🌏 Earthquake Safety
    • 🔥 Fire Safety
    • 🌀 Cyclone Safety
    • 🧪 Chemical Safety
    • ⚡ Electrical Safety
    • 🌩️ Lightning Safety
    • ⛰️ Landslide Safety
    • 🌊 Tsunami Safety
    • ❄️ Extreme Cold Safety
    • 🌡️ Extreme Heat Safety
  • Video Tutorials - Embedded safety videos
  • Step-by-step Protocols - Clear action guides
  • Search Functionality - Quick find safety topics

🔐 Secure Authentication & Profile

  • Firebase Authentication - Email/Password + Google Sign-in
  • Profile Management - Complete user profiles with location
  • Location Validation - OpenStreetMap Nominatim geocoding
  • First-time User Flow - Guided profile completion
  • Protected Routes - Dashboard requires authentication
  • Session Persistence - Stay logged in across sessions
  • Context-based Auth - Global auth state management

🏗️ Architecture & Flow

Application Flow

┌─────────────────────────────────────────────────────────────────┐
│                        USER ENTRY POINTS                        │
├─────────────────────────────────────────────────────────────────┤
│  Landing Page (/) → HeroSection + Features + Contact            │
│       ↓                                                         │
│  Auth Required → Login/Signup (Firebase Auth)                   │
│       ↓                                                         │
│  Profile Setup (First-time users must set city)                 │
│       ↓                                                         │
│  Dashboard (Protected Route)                                    │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│                     DASHBOARD MODULES                           │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐             │
│  │  Dashboard  │  │   Profile   │  │     SOS     │             │
│  │   Overview  │  │  Management │  │   System    │             │
│  │ • Weather   │  │ • Edit Info │  │ • Create    │             │
│  │ • Stats     │  │ • Location  │  │ • Manage    │             │
│  │ • Actions   │  │ • Avatar    │  │ • Track     │             │
│  └─────────────┘  └─────────────┘  └─────────────┘             │
│                                                                 │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐             │
│  │   Weather   │  │  Community  │  │  Emergency  │             │
│  │   Center    │  │    Chat     │  │   Contacts  │             │
│  │ • Current   │  │ • Messages  │  │ • National  │             │
│  │ • Hourly    │  │ • Media     │  │ • Personal  │             │
│  │ • Daily     │  │ • Users     │  │ • Share     │             │
│  └─────────────┘  └─────────────┘  └─────────────┘             │
│                                                                 │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐             │
│  │ Navigation  │  │  Resources  │  │   Safety    │             │
│  │    Map      │  │   Sharing   │  │   Guides    │             │
│  │ • SOS Map   │  │ • Offers    │  │ • 12 Types  │             │
│  │ • Respond   │  │ • Requests  │  │ • Videos    │             │
│  │ • Filter    │  │ • Contact   │  │ • Search    │             │
│  └─────────────┘  └─────────────┘  └─────────────┘             │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│                    DATA FLOW ARCHITECTURE                       │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Client (Next.js)  ←→  API Routes  ←→  External APIs            │
│       ↕                    ↕                                    │
│  Firebase Firestore (Real-time DB)                              │
│       ↕                                                         │
│  Firebase Auth (Authentication)                                 │
│                                                                 │
│  Collections:                                                   │
│  • users - User profiles with location                          │
│  • sos_requests - Emergency SOS data                            │
│  • chats_users/{city}/messages - Community chat                 │
│  • personal_contacts - Emergency contacts                       │
│  • resources_offers - Resource sharing                          │
│  • resources_requests - Resource needs                          │
│  • notifications - User notifications                           │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Key Technical Highlights

Feature Implementation
Real-time Updates Firebase Firestore onSnapshot listeners
Authentication Firebase Auth with Context Provider
Location Services OpenStreetMap Nominatim API for geocoding
Weather Data Dual API (WeatherAPI + OpenWeatherMap) with fallback
Maps Leaflet with React-Leaflet wrapper
Animations Framer Motion for smooth transitions
State Management React hooks + Context API
UI Components shadcn/ui + Radix UI primitives
Styling Tailwind CSS with dark mode support
Form Handling React Hook Form + Zod validation

👥 Community Hub

  • Local Chat Rooms - Coordinate with neighbors
  • Resource Sharing - Offer/request supplies
  • Volunteer Network - Connect helpers
  • Admin Dashboard - Manage community

📚 Safety Resources

  • Disaster Guides - Step-by-step protocols
  • Video Tutorials - First aid & safety
  • Offline Access - Critical info without internet
  • Multi-language - Inclusive support

🔐 Secure Platform

  • Firebase Auth - Google & Email login
  • Role-based Access - User & Admin roles
  • Data Encryption - Secure communications
  • Privacy First - GDPR compliant

🛠️ Tech Stack

Category Technologies
Frontend Next.js React TypeScript
Styling TailwindCSS Framer shadcn/ui Radix UI
Backend & Database Firebase Firestore Vercel
Maps & Location Leaflet React-Leaflet OpenStreetMap
Weather APIs WeatherAPI OpenWeatherMap
Forms & Validation React Hook Form Zod
State & Hooks React Context Custom Hooks
Analytics Vercel Analytics

Dependencies Overview

Core Framework:     Next.js 15.3, React 18.2, TypeScript 5
UI Components:      shadcn/ui, Radix UI, Lucide Icons, Heroicons
Styling:            TailwindCSS 3.4, Framer Motion, tailwind-merge
Authentication:     Firebase Auth (Email + Google), NextAuth.js
Database:           Firebase Firestore (Real-time)
Maps:               Leaflet, React-Leaflet
Weather:            WeatherAPI.com, OpenWeatherMap
Forms:              React Hook Form, Zod validation
HTTP Client:        Axios
Date Handling:      date-fns
Charts:             Recharts
Utilities:          clsx, class-variance-authority

📁 Project Structure

saviour/
├── 📂 public/                    # Static assets & safety videos
│   └── 📂 safety-videos/         # Tutorial videos for safety guides
├── 📂 src/
│   ├── 📂 app/                   # Next.js App Router
│   │   ├── 📄 layout.tsx         # Root layout with providers
│   │   ├── 📄 page.tsx           # Landing page (Hero, Features, Contact)
│   │   ├── 📄 globals.css        # Global styles
│   │   ├── 📄 providers.tsx      # Auth & theme providers
│   │   ├── 📂 api/               # API routes
│   │   │   ├── 📂 weather/       # Weather API (dual source)
│   │   │   ├── 📂 weather-widget/# Dashboard weather widget
│   │   │   └── 📂 send-email/    # Contact form email handler
│   │   ├── 📂 auth/              # Authentication pages
│   │   │   ├── 📂 login/         # Login page
│   │   │   ├── 📂 signup/        # Signup page
│   │   │   └── 📂 error/         # Auth error page
│   │   ├── 📂 dashboard/         # Protected dashboard routes
│   │   │   ├── 📄 layout.tsx     # Dashboard layout with sidebar
│   │   │   ├── 📄 page.tsx       # Dashboard overview
│   │   │   ├── 📂 profile/       # User profile management
│   │   │   ├── 📂 sos/           # SOS create & manage
│   │   │   ├── 📂 weather/       # Weather forecasts
│   │   │   ├── 📂 community/     # City-based chat
│   │   │   ├── 📂 emergency/     # Emergency contacts
│   │   │   ├── 📂 navigation/    # SOS map view
│   │   │   ├── 📂 resources/     # Resource sharing
│   │   │   └── 📂 safety/        # Safety guides
│   │   ├── 📂 about/             # About page
│   │   ├── 📂 services/          # Services page
│   │   ├── 📂 contact/           # Contact page
│   │   ├── 📂 privacy/           # Privacy policy
│   │   └── 📂 terms/             # Terms of service
│   ├── 📂 components/
│   │   ├── 📂 Safety/            # 12 disaster-specific safety guides
│   │   │   ├── First-Aid-Tutorial.tsx
│   │   │   ├── Flood-Safety.tsx
│   │   │   ├── Earthquake-Safety.tsx
│   │   │   ├── Fire-Safety.tsx
│   │   │   ├── Cyclone-Safety.tsx
│   │   │   ├── Chemical-Safety.tsx
│   │   │   ├── Electrical-Safety.tsx
│   │   │   ├── Lightning-Safety.tsx
│   │   │   ├── Landslide-Safety.tsx
│   │   │   ├── Tsunami-Safety.tsx
│   │   │   ├── Extreme-Cold-Safety.tsx
│   │   │   └── Extreme-Heat-Safety.tsx
│   │   ├── 📂 ui/                # shadcn/ui components
│   │   ├── 📂 weather/           # Weather display components
│   │   ├── 📂 Modals/            # Modal components (SOSEditModal)
│   │   ├── 📄 HeroSection.tsx    # Landing hero
│   │   ├── 📄 FeatureSection.tsx # Features showcase
│   │   ├── 📄 community-chat.tsx # Chat component
│   │   ├── 📄 MapWrapper.tsx     # Leaflet map component
│   │   ├── 📄 Sidebar.tsx        # Dashboard sidebar
│   │   └── 📄 ...                # Other components
│   ├── 📂 hooks/                 # Custom React hooks
│   │   ├── 📄 useUserCity.ts     # User location hook
│   │   ├── 📄 use-toast.ts       # Toast notifications
│   │   ├── 📄 use-mobile.tsx     # Mobile detection
│   │   └── 📄 useResponsive.ts   # Responsive utilities
│   ├── 📂 lib/                   # Utilities & config
│   │   ├── 📄 firebase.ts        # Firebase initialization
│   │   ├── 📄 auth-context.tsx   # Auth context provider
│   │   ├── 📄 sidebarItems.ts    # Sidebar navigation config
│   │   ├── 📄 utils.ts           # Utility functions
│   │   └── 📄 env.ts             # Environment helpers
│   └── 📂 types/                 # TypeScript definitions
│       └── 📄 user.ts            # User type definitions
├── 📄 middleware.ts              # Next.js middleware
├── 📄 next.config.js             # Next.js configuration
├── 📄 tailwind.config.js         # Tailwind configuration
├── 📄 tsconfig.json              # TypeScript configuration
├── 📄 components.json            # shadcn/ui configuration
└── 📄 package.json               # Dependencies & scripts

🚀 Quick Start

Prerequisites

Installation

# 1. Clone the repository
git clone https://github.com/Ravikumar-2016/SaviourWeb.git
cd SaviourWeb/saviour

# 2. Install dependencies
npm install

# 3. Setup environment variables
cp .env.example .env.local
# Edit .env.local with your API keys

# 4. Start development server
npm run dev

# 5. Open in browser
# http://localhost:3000

🔥 Firebase Setup

🔧 Click to expand Firebase configuration steps

Step 1: Create Firebase Project

  1. Go to Firebase Console
  2. Click "Create a project"
  3. Enter project name (e.g., "saviour-app")
  4. Enable Google Analytics (optional)

Step 2: Enable Authentication

  1. In Firebase Console, go to Authentication > Sign-in method
  2. Enable Email/Password
  3. Enable Google provider
  4. ⚠️ IMPORTANT: Add your domain to Authorized domains:
    • localhost (for development)
    • saviour-web.vercel.app (for production)
    • Your custom domain (if any)

Step 3: Create Firestore Database

  1. Go to Firestore Database > Create database
  2. Start in production mode
  3. Choose a location closest to your users

Step 4: Get Configuration

  1. Go to Project Settings > General
  2. Under "Your apps", click Web icon (</>)
  3. Register app and copy the config values

Step 5: Add to Environment

Copy the Firebase config values to your .env.local file.

🔐 Environment Variables

Create a .env.local file in the root directory:

# ═══════════════════════════════════════════════════════════
# 🔥 FIREBASE CONFIGURATION (Required)
# ═══════════════════════════════════════════════════════════
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789
NEXT_PUBLIC_FIREBASE_APP_ID=1:123456789:web:abcdef123456
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX

# ═══════════════════════════════════════════════════════════
# 🌐 API KEYS (Server-side only - secure)
# ═══════════════════════════════════════════════════════════
WEATHER_API_KEY=your_weatherapi_key        # Primary weather source
OPENWEATHERMAP_API_KEY=your_openweathermap_key  # Fallback weather source
GEMINI_API_KEY=your_gemini_api_key

# ═══════════════════════════════════════════════════════════
# 🗺️ GOOGLE MAPS (Client-side - restrict in Google Console)
# ═══════════════════════════════════════════════════════════
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_key

# ═══════════════════════════════════════════════════════════
# 🔒 AUTH CONFIGURATION (Required)
# ═══════════════════════════════════════════════════════════
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_super_secret_key_here
JWT_SECRET=your_jwt_secret_key
BASE_URL=http://localhost:3000

# ═══════════════════════════════════════════════════════════
# 📧 EMAIL CONFIGURATION (Optional - for contact form)
# ═══════════════════════════════════════════════════════════
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=your-email@gmail.com
SMTP_PASSWORD=your_app_password
SMTP_FROM_EMAIL=noreply@saviour.app
SMTP_FROM_NAME=Saviour Team
CONTACT_RECIPIENT_EMAIL=contact@saviour.app

⚠️ Important: Never commit .env.local to version control!

📱 Screenshots

🏠 Home Page

The main landing page showcasing the disaster management platform with a modern, animated design featuring Hero section, Feature showcase, and Contact form.

📊 Dashboard Overview

Real-time dashboard with weather widget, quick action buttons (Create SOS, View Map, Resources, Community), safety stats (SOS Raised/Responded), and safety guides.

🆘 SOS Emergency System

  • Create SOS: 9 emergency types, 3 urgency levels, description, image upload
  • Manage SOS: View, edit, delete your SOS requests with status tracking
  • 5-second cancel: Prevent accidental emergency alerts

🗺️ Navigation Map

Interactive Leaflet map showing all SOS requests with:

  • Color-coded markers (Red: High, Yellow: Medium, Blue: Low)
  • Emergency type filtering
  • Click-to-view details and respond

🌤️ Weather Center

Comprehensive weather page with:

  • Current conditions (temp, feels like, humidity, wind, UV)
  • 24-hour hourly forecast
  • 5-day daily forecast (combined from WeatherAPI + OpenWeatherMap)

👥 Community Chat

City-based real-time chat with media sharing (images, videos, documents), user avatars, and message history.

📦 Resource Management

Three tabs: Available Offers, My Offers, My Requests with 8 resource categories and urgency-based prioritization.

📞 Emergency Contacts

National emergency numbers (112, 100, 101, 102) + personal emergency contacts with location sharing.

📚 Safety Guides

12 comprehensive safety guides with search, video tutorials, and step-by-step protocols.

👤 Profile Management

User profile with location validation (OpenStreetMap Nominatim), photo, and contact information.


💡 Tip: Visit our live demo to explore all features in action!

🤝 Contributing

We welcome contributions! Here's how you can help:

# 1. Fork the repository
# 2. Create your feature branch
git checkout -b feature/AmazingFeature

# 3. Make your changes and commit
git commit -m '✨ Add AmazingFeature'

# 4. Push to your branch
git push origin feature/AmazingFeature

# 5. Open a Pull Request

📝 Contribution Guidelines

  • Follow the existing code style
  • Write meaningful commit messages
  • Update documentation as needed
  • Test your changes thoroughly

📄 License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

Copyright 2024-2026 Ravikumar & Saviour Team

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

⭐ Star this repository if it helped you!

Built with ❤️ by Ravikumar & the Saviour Team


🌐 Website • 📦 GitHub • 🐛 Report Bug • 💡 Request Feature

About

SAVIOUR is a cutting-edge disaster management platform designed to save lives and enhance community resilience during emergencies. By harnessing modern web technologies, it provides real-time emergency coordination, instant alerts and notifications, and location-based resource tracking.

saviour-web.vercel.app

Resources

Readme

License

Apache-2.0 license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages