🚨 Emergency Animal Rescue & Adoption Web Application — A life-saving platform connecting people with nearby animal rescue services instantly.
- 🎯 Overview
- ❓ Problem Statement
- 💡 Solution
- ✨ Key Features
- 🎨 UI/UX Design
- 🛠️ Tech Stack
- 📂 Project Structure
- 🚀 Getting Started
- 🔄 Application Flow
- 🌐 Deployment
- 🔮 Future Roadmap
- 🤝 Contributing
- 📄 License
The Animal Rescue Platform is a comprehensive full-stack web application designed to bridge the critical gap between compassionate citizens and animal rescue services. Built using modern web technologies and following NGO design best practices, this platform creates a unified ecosystem for emergency response, pet adoption, community engagement, and animal welfare education.
- Live Deployed Project: https://rescue-plus.vercel.app
- Postman Documentation: https://documenter.getpostman.com/view/50839172/2sBXqKoL8b
- Backend Deployed Link: https://rescuenet-backend-02ao.onrender.com
- YouTube Demo: https://www.youtube.com/watch?v=-OHl1ejRTmE
- Figma Design: View Design
- Figma Prototype: View Prototype
| Homepage & Mission | Live Operations Stream |
|---|---|
![]() |
![]() |
| Global Operations Grid | Public Utility & Sanctuaries |
![]() |
![]() |
(Note: Please save the 4 screenshot images you provided into a screenshots folder in your project root with the names hero_section.png, live_operations.png, operations_grid.png, and public_utility.png so they load perfectly!)
- 🚑 GPS-based Smart Rescue System — Real-time location detection with instant routing
- 🗺️ Interactive Map Integration — Leaflet.js powered mapping with color-coded rescue centers
- 🐶 Community-Driven Adoption — Comprehensive pet listing and adoption workflow
- 📚 Educational Hub — Pet care guides, first aid instructions, and awareness content
- 💰 Impact-Based Donations — Transparent contribution system showing real-world impact
- 📱 Mobile-First Design — Optimized for emergency use on any device
UI/UX System: Stitch by Google
This project implements the complete design system created in Stitch, featuring:
- Modern NGO-inspired visual language
- Emotional connection through animal-centric imagery
- High-contrast emergency CTAs
- Accessible, responsive layouts
Why do citizens and animal lovers struggle to find reliable and immediate help for stray animals in distress?
76 / 100 (Overall Itch Score)
Emergency Services / Animal Welfare
When compassionate citizens encounter injured, trapped, or sick stray animals, they face a critical information asymmetry problem. They cannot find a centralized directory of rescue services and waste precious minutes manually searching for help during emergencies. Existing information is often outdated or geographically irrelevant, leading to high-stress decision-making. No unified platform connects citizens with verified NGOs, veterinary hospitals, and government helplines offering real-time location-based routing, instant contact, and proper guidance for emerging animal welfare emergencies.
The Animal Rescue Platform addresses the core problem through:
- HTML5 Geolocation API for precise user positioning
- Real-time calculation of nearest rescue services
- One-tap calling and navigation
- NGOs, veterinary hospitals, government helplines
- Contact verification and regular updates
- Service categorization and filtering
- Pet adoption listings with emotional storytelling
- Success stories to build trust
- Educational content for prevention and awareness
- Emergency hotlines (Gujarat 1962 Karuna Abhiyan)
- Direct NGO contact
- Government wildlife departments
The Life-Saving Button
┌─────────────────────────────────┐
│ 🚨 FIND NEAREST HELP NOW 🚨 │
│ │
│ GPS Location: Auto-detected │
│ Searching radius: 10 km │
└─────────────────────────────────┘
What It Does:
- Detects user's real-time GPS location
- Queries database for nearest services
- Displays results sorted by distance
- Provides instant actions:
- 📞 Call Now — Direct phone connection
- 🧭 Get Directions — Open in Maps app
- ℹ️ View Details — Full service information
Supported Services:
- 🏥 Veterinary Hospitals
- 🚑 Animal Ambulances
- 🏢 NGO Rescue Centers
- 📞 Government Helplines
Technology: Leaflet.js + OpenStreetMap
Features:
- Live User Marker with pulse animation
- Color-Coded Service Pins:
- 🟢 Green — NGO Rescue Centers
- 🔵 Blue — Veterinary Hospitals
- 🔴 Red — Emergency Ambulances
- Bottom Sheet List (mobile-optimized)
- Distance Calculation in real-time
- Clustering for dense urban areas
Filter Options:
- Service Type (Vet / NGO / Ambulance)
- Maximum Distance Radius
- Operating Hours
- Availability Status
The Emotional Connection
📌 Research shows: Animal-focused UI increases adoption engagement by 60%
Adoption Gallery:
- Grid layout with high-quality images
- Quick info cards:
- Name & Age
- Breed
- Health Status
- Personality Traits
Advanced Filters:
- Animal Type (Dog / Cat / Rabbit / Bird)
- Age Range (Puppy / Adult / Senior)
- Size (Small / Medium / Large)
- Special Needs
Detailed Pet Profile:
┌────────────────────────────────────┐
│ [Large Image Gallery - Swipeable] │
│ │
│ 🐕 Charlie | 2 years old │
│ Breed: Golden Retriever Mix │
│ Health: ✅ Vaccinated & Neutered │
│ │
│ 📖 Story: │
│ "Found abandoned near highway... │
│ now looking for forever home" │
│ │
│ 📍 Shelter: Happy Paws NGO │
│ 📞 Contact: +91-XXXXXXXXXX │
│ │
│ [💚 ADOPT CHARLIE NOW 💚] │
└────────────────────────────────────┘
Success Story Showcase
Purpose:
- Build emotional trust in the platform
- Encourage donations through real impact
- Create community identity
Story Elements:
- Before/After rescue images
- Timeline of recovery
- Adopter testimonials
- Total impact metrics
Example:
"From Street to Sweet Home: Luna's Journey"
- Rescued: Injured pup found in ditch
- Treatment: 45 days at Happy Tails Shelter
- Adopted: Forever home with loving family
- Impact: Your ₹500 donation helped save Luna
Pet Care Knowledge Base
Categories:
-
Emergency First Aid
- CPR for animals
- Wound treatment
- Poisoning response
-
Pet Care Guides
- Nutrition basics
- Training tips
- Health monitoring
-
Awareness Articles
- Stray animal rights
- Adoption process
- Volunteer opportunities
Format:
- Clean reading layout
- Step-by-step instructions
- Infographics and videos
- Downloadable PDF guides
Transparent Impact-Based Giving
📌 Impact visibility increases donation conversion by 45%
Donation Tiers:
┌─────────────────────────────────────┐
│ ₹200 → Food for 5 animals (1 day)│
│ ₹500 → Emergency medicine │
│ ₹1000 → Vaccination drive (10 pets)│
│ ₹5000 → Monthly shelter support │
└─────────────────────────────────────┘
Features:
- Quick-donate buttons
- Custom amount input
- Multiple payment options:
- UPI / PhonePe / GPay
- Credit/Debit Cards
- Net Banking
- Donation receipt generation
- Monthly subscription option
Impact Dashboard:
- Total animals helped
- Medicines purchased
- Vaccinations completed
Join the Rescue Community
Volunteer Roles:
- 🚑 Rescue Operations — Field response
- 🏠 Foster Care — Temporary shelter
- 🚗 Transport Support — Emergency drives
- 📸 Media & Awareness — Social media
- 🎓 Education — Community workshops
Registration Process:
- Fill interest form
- Background verification
- Training session (online/offline)
- Active assignment
Empowering Rescue Organizations
For NGOs/Vets to Register:
- Organization details
- Service type selection
- Location (GPS + address)
- Operating hours
- Contact information
- Verification documents
Benefits:
- Free listing on platform
- Increased visibility
- Direct citizen connection
- Impact analytics
📌 73% of NGO website traffic comes from mobile devices
Optimization Strategy:
- Touch-friendly buttons (min 44px)
- Swipe gestures for galleries
- Bottom navigation for thumbs
- Offline-first architecture
- Progressive Web App (PWA)
Performance Targets:
- ⚡ First Contentful Paint: < 1.5s
- 📊 Lighthouse Score: > 90
- 📱 Mobile-optimized images
SOS Floating Button
- Visible on every page
- Sticky positioning
- One-tap emergency call
Offline Mode
- Service worker caching
- Offline page with helpline numbers
- Sync when connection restored
Push Notifications
- Rescue updates
- Adoption matches
- Donation receipts
Multi-Language Support
- English (primary)
- Hindi (हिन्दी)
- Gujarati (ગુજરાતી)
User Dashboard
- Saved rescues
- Adoption favorites
- Donation history
- Volunteer hours
The interface follows NGO design principles optimized for:
- ⚡ Fast action during emergencies
- ❤️ Emotional connection for adoptions
- 🤝 Trust through transparency
🎨 Color Palette
/* Primary Colors */
--rescue-green: #2ECC71; /* Safety, Life, Hope */
--trust-blue: #3498DB; /* Reliability, Calm */
--emergency-red: #FF6B6B; /* Urgency, Action */
/* Neutrals */
--bg-light: #F9FAFB; /* Clean background */
--text-dark: #1F2937; /* Readable text */
--gray-medium: #6B7280; /* Secondary text */
/* Semantic Colors */
--success: #10B981;
--warning: #F59E0B;
--info: #3B82F6;🔤 Typography
/* Font Families */
--heading-font: 'Poppins', sans-serif;
--body-font: 'Inter', sans-serif;
/* Font Sizes */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
--text-4xl: 36px;
/* Font Weights */
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;📐 Spacing & Layout
/* 8px Grid System */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 40px;
--space-6: 48px;
/* Border Radius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);Reusable UI Components:
-
Navigation
- Navbar (desktop + mobile)
- Sidebar
- Bottom Navigation
- Breadcrumbs
-
Cards
- Rescue Service Card
- Pet Adoption Card
- Story Card
- Article Card
-
Interactive Elements
- Primary Button
- Secondary Button
- Danger Button (Emergency)
- Icon Buttons
- Toggle Switches
-
Forms
- Text Inputs
- Dropdowns
- File Upload
- Radio Buttons
- Checkboxes
-
Feedback
- Modals
- Alerts
- Toasts
- Loading Skeletons
-
Map Components
- Service Pin Markers
- User Location Marker
- Info Window
- Filter Panel
Complete Design System Includes:
- ✅ All 10 pages fully designed
- ✅ Component library (50+ components)
- ✅ Responsive layouts (mobile, tablet, desktop)
- ✅ Interactive prototype with click-through flow
- ✅ Dark mode variants
- ✅ Accessibility annotations
View Full Design: 🔗 Stitch by Google — Animal Rescue Platform
| Technology | Version | Purpose |
|---|---|---|
| React.js | 18.2+ | UI Framework |
| Vite | 4.0+ | Build Tool & Dev Server |
| Tailwind CSS | 3.3+ | Utility-first Styling |
| Leaflet.js | 1.9+ | Interactive Maps |
| React Router | 6.0+ | Client-side Routing |
| Axios | 1.4+ | HTTP Client |
| React Query | 4.0+ | Server State Management |
| Zustand | 4.3+ | Client State Management |
| Framer Motion | 10.0+ | Animations |
| Technology | Version | Purpose |
|---|---|---|
| Node.js | 18+ | Runtime Environment |
| Express.js | 4.18+ | Web Framework |
| MongoDB | 6.0+ | NoSQL Database |
| Mongoose | 7.0+ | ODM Library |
| JWT | 9.0+ | Authentication |
| Bcrypt | 5.1+ | Password Hashing |
| Multer | 1.4+ | File Uploads |
| Nodemailer | 6.9+ | Email Service |
| Service | Purpose |
|---|---|
| Leaflet + OpenStreetMap | Base mapping |
| MapTiler / Geoapify | Geocoding & routing |
| HTML5 Geolocation | User location detection |
| Cloudinary | Image hosting & optimization |
| Razorpay / Stripe | Payment processing |
| Tool | Purpose |
|---|---|
| Git & GitHub | Version control |
| Render / Vercel | Frontend hosting |
| Railway / Render | Backend hosting |
| MongoDB Atlas | Database hosting |
| GitHub Actions | CI/CD Pipeline |
- Google Antigravity IDE — Agentic development environment
- ESLint + Prettier — Code quality
- Husky — Git hooks
- Postman — API testing
- React DevTools — Component debugging
animal-rescue-platform/
│
├── 📁 frontend/ # React Application
│ ├── 📁 public/
│ │ ├── favicon.ico
│ │ ├── manifest.json
│ │ └── robots.txt
│ │
│ ├── 📁 src/
│ │ ├── 📁 assets/ # Static files
│ │ │ ├── 📁 images/
│ │ │ ├── 📁 icons/
│ │ │ └── 📁 fonts/
│ │ │
│ │ ├── 📁 components/ # Reusable UI Components
│ │ │ ├── 📁 common/
│ │ │ │ ├── Navbar.jsx
│ │ │ │ ├── Footer.jsx
│ │ │ │ ├── Button.jsx
│ │ │ │ ├── Card.jsx
│ │ │ │ ├── Modal.jsx
│ │ │ │ └── Loader.jsx
│ │ │ │
│ │ │ ├── 📁 rescue/
│ │ │ │ ├── RescueCard.jsx
│ │ │ │ ├── MapView.jsx
│ │ │ │ └── ServicePin.jsx
│ │ │ │
│ │ │ ├── 📁 adoption/
│ │ │ │ ├── PetCard.jsx
│ │ │ │ ├── PetGallery.jsx
│ │ │ │ └── AdoptionForm.jsx
│ │ │ │
│ │ │ └── 📁 forms/
│ │ │ ├── ReportForm.jsx
│ │ │ ├── VolunteerForm.jsx
│ │ │ └── NGOForm.jsx
│ │ │
│ │ ├── 📁 pages/ # Route Pages
│ │ │ ├── Home.jsx # Landing + Dashboard
│ │ │ ├── EmergencyMap.jsx # Rescue Finder Map
│ │ │ ├── ReportAnimal.jsx # Report Form
│ │ │ ├── Adoption.jsx # Pet Listings
│ │ │ ├── PetDetails.jsx # Individual Pet Profile
│ │ │ ├── Stories.jsx # Success Stories
│ │ │ ├── Articles.jsx # Educational Content
│ │ │ ├── Donate.jsx # Donation Page
│ │ │ ├── Volunteer.jsx # Volunteer Registration
│ │ │ ├── NGORegister.jsx # NGO Registration
│ │ │ └── Dashboard.jsx # User Dashboard
│ │ │
│ │ ├── 📁 services/ # API Integration
│ │ │ ├── api.js # Axios instance
│ │ │ ├── rescueService.js
│ │ │ ├── adoptionService.js
│ │ │ ├── mapService.js
│ │ │ └── authService.js
│ │ │
│ │ ├── 📁 hooks/ # Custom React Hooks
│ │ │ ├── useGeolocation.js
│ │ │ ├── useNearbyServices.js
│ │ │ └── useDebounce.js
│ │ │
│ │ ├── 📁 context/ # Global State
│ │ │ ├── AuthContext.jsx
│ │ │ └── LocationContext.jsx
│ │ │
│ │ ├── 📁 utils/ # Helper Functions
│ │ │ ├── distance.js # Haversine formula
│ │ │ ├── formatter.js
│ │ │ └── validators.js
│ │ │
│ │ ├── 📁 styles/ # Global Styles
│ │ │ ├── index.css
│ │ │ └── tailwind.config.js
│ │ │
│ │ ├── App.jsx # Root Component
│ │ ├── main.jsx # Entry Point
│ │ └── routes.jsx # Route Configuration
│ │
│ ├── .env.example
│ ├── .eslintrc.json
│ ├── .prettierrc
│ ├── package.json
│ ├── vite.config.js
│ └── tailwind.config.js
│
├── 📁 backend/ # Node.js Server
│ ├── 📁 src/
│ │ ├── 📁 config/
│ │ │ ├── database.js # MongoDB connection
│ │ │ ├── cloudinary.js # Image upload config
│ │ │ └── passport.js # Auth strategies
│ │ │
│ │ ├── 📁 controllers/ # Route Handlers
│ │ │ ├── rescueController.js
│ │ │ ├── adoptionController.js
│ │ │ ├── storyController.js
│ │ │ ├── donationController.js
│ │ │ └── authController.js
│ │ │
│ │ ├── 📁 models/ # Mongoose Schemas
│ │ │ ├── RescueService.js
│ │ │ ├── Pet.js
│ │ │ ├── Story.js
│ │ │ ├── Article.js
│ │ │ ├── Donation.js
│ │ │ ├── Volunteer.js
│ │ │ ├── NGO.js
│ │ │ └── User.js
│ │ │
│ │ ├── 📁 routes/ # API Endpoints
│ │ │ ├── rescueRoutes.js
│ │ │ ├── adoptionRoutes.js
│ │ │ ├── storyRoutes.js
│ │ │ ├── articleRoutes.js
│ │ │ ├── donationRoutes.js
│ │ │ └── authRoutes.js
│ │ │
│ │ ├── 📁 middleware/
│ │ │ ├── auth.js # JWT verification
│ │ │ ├── errorHandler.js
│ │ │ ├── validator.js
│ │ │ └── upload.js # Multer config
│ │ │
│ │ ├── 📁 utils/
│ │ │ ├── geocoding.js # Lat/Long conversion
│ │ │ ├── email.js # Email templates
│ │ │ └── logger.js
│ │ │
│ │ └── server.js # Express server
│ │
│ ├── 📁 database/ # Database seeds
│ │ └── seed.js
│ ├── 📁 docs/ # API Documentation
│ │ └── API.md
│ ├── .env.example
│ └── package.json
│
├── .gitignore
├── .env.example
├── LICENSE
├── package.json
└── README.md # This file
git clone https://github.com/yourusername/animal-rescue-platform.git
cd animal-rescue-platformcd backend
# Install dependencies
npm install
# Create environment file
cp .env.example .env
# Edit .env with your configuration
nano .envEnvironment Variables:
# Server
PORT=5000
NODE_ENV=development
# Database
MONGODB_URI=mongodb://localhost:27017/animal-rescue
# JWT
JWT_SECRET=your_secret_key_here
JWT_EXPIRE=7d
# Cloudinary
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
# Email
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your_email@gmail.com
EMAIL_PASS=your_app_password
# Payment (Razorpay)
RAZORPAY_KEY_ID=your_key_id
RAZORPAY_KEY_SECRET=your_key_secretcd ../frontend
# Install dependencies
npm install
# Create environment file
cp .env.example .env
# Edit .env
nano .envFrontend Environment Variables:
VITE_API_URL=http://localhost:5000/api
VITE_MAPTILER_API_KEY=your_maptiler_keycd backend
node database/seed.jsTerminal 1 (Backend):
cd backend
npm run devTerminal 2 (Frontend):
cd frontend
npm run dev- Frontend: http://localhost:5173
- Backend API: http://localhost:5000
- API Docs: http://localhost:5000/api-docs
graph TD
A[User Opens App] --> B{Location Permission}
B -->|Granted| C[Detect GPS Location]
B -->|Denied| D[Show Manual Location Input]
C --> E[Click 'Find Nearest Help']
D --> E
E --> F[Backend Queries Rescue Services]
F --> G[Calculate Distances]
G --> H[Sort by Proximity]
H --> I[Display on Map + List]
I --> J{User Action}
J -->|Call| K[Initiate Phone Call]
J -->|Directions| L[Open Maps App]
J -->|Details| M[Show Full Info Modal]
┌─────────────┐
│ Client │
│ (Browser) │
└──────┬──────┘
│ HTTP/HTTPS
│
┌──────▼──────┐
│ Express │
│ Server │
└──────┬──────┘
│
├──► Authentication Middleware (JWT)
│
├──► Request Validation
│
├──► Route Controllers
│ │
│ ├──► Rescue Controller
│ ├──► Adoption Controller
│ ├──► Donation Controller
│ └──► Story Controller
│
└──► Database Layer
│
├──► MongoDB (Primary Data)
├──► Cloudinary (Images)
└──► External APIs
│
├──► Geolocation API
├──► Payment Gateway
└──► Email Service
Option 1: Vercel (Recommended)
# Install Vercel CLI
npm i -g vercel
# Deploy
cd frontend
vercel --prodOption 2: Netlify
# Build
npm run build
# Deploy via Netlify CLI or drag-and-drop
netlify deploy --prod --dir=distOption 1: Render
- Create account at Render.com
- Connect GitHub repo
- Select backend folder
- Add environment variables
- Deploy
Option 2: Railway
# Install Railway CLI
npm i -g @railway/cli
# Login & deploy
railway login
cd backend
railway upMongoDB Atlas (Free Tier)
- Create cluster at MongoDB Atlas
- Whitelist IP addresses
- Get connection string
- Update
MONGODB_URIin backend.env
- ✅ Emergency rescue finder
- ✅ Pet adoption listings
- ✅ Basic donation system
- ✅ Educational articles
- 🔄 Real-time rescue tracking
- 🔄 Push notification system
- 🔄 Multi-language support (Hindi, Gujarati)
- 🔄 PWA with offline mode
- 🔮 AI-powered injury detection (image upload)
- 🔮 Chatbot for instant guidance
- 🔮 Predictive analytics for rescue hotspots
- 🔮 Automated pet matching algorithm
- 📱 Native iOS app
- 📱 Native Android app
- 📱 Wearable integration (emergency SOS)
- 🌍 International version
- 🤝 NGO dashboard with analytics
- 📊 Impact reporting system
- 🎓 Volunteer training portal
We welcome contributions! Here's how you can help:
- 🐛 Bug Fixes — Report or fix bugs
- ✨ Feature Development — Build new features
- 📚 Documentation — Improve docs
- 🎨 UI/UX Improvements — Design enhancements
- 🧪 Testing — Write tests
# 1. Fork the repository
# 2. Create feature branch
git checkout -b feature/amazing-feature
# 3. Make changes and commit
git commit -m "Add amazing feature"
# 4. Push to branch
git push origin feature/amazing-feature
# 5. Open Pull Request- Follow existing code style
- Write meaningful commit messages
- Add tests for new features
- Update documentation
- Keep PRs focused and small
JavaScript/React:
- Use ES6+ syntax
- Functional components with hooks
- Proper PropTypes or TypeScript
- 2-space indentation
CSS/Tailwind:
- Mobile-first approach
- Use Tailwind utilities
- Custom classes in
@layer components
This project is licensed under the MIT License — see LICENSE file for details.
Copyright (c) 2026 Animal Rescue Platform
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
- Buddy Animal Rescue — Platform architecture reference
- Let It Wag — Community engagement model
- Gujarat Government 1962 Helpline — Government integration case study
- Google Antigravity — Development framework
- React.js Team
- MongoDB Team
- Leaflet.js Community
- OpenStreetMap Contributors
- Stitch by Google — Complete UI/UX system
- Tailwind Labs — CSS framework
- Heroicons — Icon library
- 📧 Email: support@animalrescue.org
- 💬 Discord: Join Community
- 🐦 Twitter: @AnimalRescuePlatform
Found a bug? Open an issue
If this project helps you, please ⭐ star the repository!
Current Version: 1.0.0
Status: ✅ Active Development
Last Updated: April 2026



