Revive - Volunteer & Disaster Relief Platform

A comprehensive Next.js platform connecting volunteers with NGOs for disaster relief campaigns. Built with modern web technologies to facilitate efficient disaster response and community support.

🌟 Features

👥 Volunteer Features

User Registration & Authentication - Secure signup with role-based access
Advanced Campaign Discovery - Filter by location, disaster type, urgency, and skills
Application System - Easy application process for disaster relief campaigns
Profile Management - Skills, availability, and impact tracking
Real-time Chat - Coordinate with NGOs and other volunteers during campaigns
Certificate Generation - Earn and download certificates for completed campaigns
Impact Dashboard - Track hours served, campaigns participated, and ratings
Review System - Rate and review campaigns and NGOs

🏢 NGO Features

Organization Registration - NGO verification and approval system
Campaign Management - Create, edit, and manage disaster relief campaigns
Volunteer Coordination - Review applications and manage volunteer assignments
Real-time Communication - Chat with approved volunteers during campaigns
Analytics Dashboard - Comprehensive reporting on campaign performance
Resource Management - Track equipment, supplies, and volunteer hours
Impact Reporting - Generate reports on disaster relief efforts

🛠️ Admin Features

NGO Verification - Approve/reject NGO registrations
User Management - Oversee platform users and activities
System Analytics - Platform-wide statistics and insights

🎯 Additional Features

Interactive Maps - Visualize campaign locations with Leaflet
File Upload System - Profile pictures and campaign images
Email Notifications - Automated emails for important updates
Real-time Notifications - In-app notifications with read status
Mobile Responsive - Optimized for all device sizes
Multi-role Authentication - Separate dashboards for volunteers, NGOs, and admins

🛠️ Tech Stack

Frontend

Framework: Next.js 14 (App Router)
Language: TypeScript
Styling: Tailwind CSS
State Management: React Hooks
Forms: React Hook Form + Zod validation
Real-time: Socket.IO Client

Backend

Runtime: Node.js
Database: PostgreSQL with Prisma ORM
Authentication: NextAuth.js
Email: Nodemailer
File Upload: Multer
Real-time: Socket.IO Server
PDF Generation: jsPDF

DevOps & Tools

Deployment: Vercel/Netlify ready
Linting: ESLint
Code Formatting: Prettier
Testing: Jest (setup ready)
Database Management: Prisma Studio

🚀 Getting Started

Prerequisites

Node.js 18.0 or higher
PostgreSQL 13.0 or higher
npm or yarn package manager
Git for version control

Installation

Clone the repository

git clone https://github.com/your-username/revive-nextjs.git
cd revive-nextjs

Install dependencies
```
npm install
# or
yarn install
```

Set up environment variables

Create a .env file in the root directory:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/revive"

# NextAuth.js
NEXTAUTH_SECRET="your-super-secret-key-here"
NEXTAUTH_URL="http://localhost:3000"

# Email Configuration (optional)
SMTP_HOST="smtp.gmail.com"
SMTP_PORT="587"
SMTP_USER="your-email@gmail.com"
SMTP_PASSWORD="your-app-password"

# Socket.IO (optional)
NEXT_PUBLIC_SOCKET_URL="http://localhost:3000"

Set up the database

# Generate Prisma client
npx prisma generate

# Run database migrations
npx prisma migrate dev

# (Optional) Seed the database
npx prisma db seed

Create upload directories

mkdir -p public/uploads/profiles
mkdir -p public/uploads/campaigns

Run the development server
```
npm run dev
# or
yarn dev
```
Open your browser

Navigate to http://localhost:3000

📁 Project Structure

revive-nextjs/
├── app/                          # Next.js App Router
│   ├── admin/                    # Admin dashboard pages
│   ├── api/                      # API routes
│   │   ├── auth/                 # Authentication endpoints
│   │   ├── campaigns/            # Campaign management
│   │   ├── chat/                 # Real-time chat system
│   │   ├── certificates/         # Certificate generation
│   │   └── ...
│   ├── campaigns/                # Campaign pages
│   ├── explore/                  # Campaign discovery
│   ├── login/                    # Authentication pages
│   ├── ngo/                      # NGO dashboard
│   └── profile/                  # Volunteer profile
├── components/                   # React components
│   ├── campaigns/                # Campaign components
│   ├── chat/                     # Chat system components
│   ├── home/                     # Homepage components
│   ├── navigation/               # Navigation components
│   ├── notifications/            # Notification components
│   ├── profile/                  # Profile components
│   └── ui/                       # Reusable UI components
├── lib/                          # Utility functions
│   ├── auth.ts                   # Authentication config
│   ├── certificate.ts            # Certificate generation
│   ├── email.ts                  # Email utilities
│   ├── notifications.ts          # Notification system
│   └── prisma.ts                 # Database client
├── prisma/                       # Database schema & migrations
│   ├── schema.prisma             # Database schema
│   └── migrations/               # Database migrations
├── public/                       # Static assets
│   └── uploads/                  # User uploaded files
├── types/                        # TypeScript type definitions
│   └── next-auth.d.ts            # NextAuth type extensions
├── server.js                     # Custom server with Socket.IO
├── tailwind.config.ts            # Tailwind CSS configuration
├── next.config.js                # Next.js configuration
└── package.json                  # Dependencies & scripts

🗄️ Database Schema

The application uses Prisma ORM with PostgreSQL. Key models include:

Core Models

User - Authentication and role management
Volunteer - Volunteer profiles and skills
NGO - Organization profiles and verification
Campaign - Disaster relief campaigns
Application - Volunteer applications to campaigns

Activity Models

Chat - Real-time messaging between users
CheckIn - Volunteer location check-ins
VolunteerHours - Time tracking for campaigns
Task - Campaign task management
Resource - Equipment and supply tracking

Engagement Models

Review - Campaign and NGO reviews
Certificate - Achievement certificates
Badge - Volunteer achievement badges
Notification - In-app notifications

🔌 API Routes

Authentication

POST /api/auth/signin - User sign in
POST /api/auth/signup - User registration
POST /api/auth/signout - User sign out

Campaigns

GET /api/campaigns - List campaigns with filters
POST /api/campaigns - Create new campaign (NGO only)
GET /api/campaigns/[id] - Get campaign details
PUT /api/campaigns/[id] - Update campaign (NGO only)
DELETE /api/campaigns/[id] - Delete campaign (NGO only)

Applications

GET /api/applications - Get user's applications
POST /api/applications - Apply to campaign
PUT /api/applications/[id]/status - Update application status (NGO only)

Chat System

GET /api/chat?campaignId=X - Get chat messages
POST /api/chat - Send message
POST /api/chat/read - Mark messages as read

Certificates

GET /api/certificates - Get user's certificates
GET /api/certificates/campaigns - Get eligible campaigns for certificates
POST /api/certificates/generate - Generate certificate

Other

/api/notifications - Notification management
/api/upload - File upload handling
/api/analytics/* - Analytics and reporting

🎨 Design System

Color Palette

Primary: Coral Pink (#E27872) - Warm and approachable
Secondary: Soft Gold (#F8D57E) - Trust and reliability
Background: Cream (#FFF7E5) - Calming and professional
Text: Dark Charcoal (#2F2F2F) - High contrast and readability

Typography

Body: Outfit (sans-serif) - Clean and modern
Headings: Prata (serif) - Elegant and trustworthy

Components

Buttons: Consistent styling with hover states
Forms: Accessible forms with validation
Cards: Clean layouts with proper spacing
Navigation: Intuitive navigation patterns

🚀 Deployment

Vercel (Recommended)

Connect your GitHub repository to Vercel
Add environment variables in Vercel dashboard
Set up PostgreSQL database (e.g., Neon, Supabase)
Deploy automatically on push

Manual Deployment

Build the application:
```
npm run build
```
Start production server:
```
npm start
```

Environment Variables for Production

DATABASE_URL="postgresql://user:pass@host:5432/db"
NEXTAUTH_SECRET="your-production-secret"
NEXTAUTH_URL="https://your-domain.com"
SMTP_HOST="smtp.your-provider.com"
SMTP_PORT="587"
SMTP_USER="noreply@your-domain.com"
SMTP_PASSWORD="your-smtp-password"

🤝 Contributing

We welcome contributions! Please follow these steps:

Fork the repository
Create a feature branch
```
git checkout -b feature/amazing-feature
```
Commit your changes
```
git commit -m 'Add amazing feature'
```
Push to the branch
```
git push origin feature/amazing-feature
```
Open a Pull Request

Development Guidelines

Follow TypeScript best practices
Write meaningful commit messages
Add tests for new features
Update documentation as needed
Ensure code passes linting

Name		Name	Last commit message	Last commit date
app		app
components		components
lib		lib
prisma		prisma
public		public
types		types
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
server.js		server.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation