Empowering communities through blood donation and fundraising campaigns. Together, we can make a difference and save lives.

• Overview
• Features
• Tech Stack
• Getting Started
• Project Structure
• Environment Variables
• Available Scripts
• Mobile Responsive
• API Documentation
• Contributing
• License
• Contact

Camply is a modern, full-stack campaign management platform that enables users to create, manage, and track both blood donation and fundraising campaigns. Built with React, TypeScript, and Node.js, it provides a seamless experience for campaign creators and donors alike.

• 🩸 Blood Donation Campaigns - Organize and track blood donation drives
• 💰 Fundraising Campaigns - Create and manage fundraising initiatives
• 📊 Real-time Analytics - Track campaign performance with detailed insights
• 🎨 Modern UI/UX - Beautiful, intuitive interface with dark mode support
• 📱 Fully Responsive - Optimized for mobile, tablet, and desktop
• 🤖 AI-Powered - Smart content suggestions using Google Gemini AI
• 🔐 Secure Authentication - JWT-based auth with Google OAuth support
• 🎯 Progress Tracking - Real-time updates on campaign goals

• ✅ Create blood donation and fundraising campaigns
• ✅ Upload campaign images with URL validation
• ✅ Set goals and track progress in real-time
• ✅ Edit campaign details with full history tracking
• ✅ Toggle campaign visibility (public/private)
• ✅ Delete campaigns with confirmation

• ✅ User registration and authentication
• ✅ Google OAuth integration
• ✅ Personal dashboard with campaign overview
• ✅ Campaign analytics and insights
• ✅ Profile management
• ✅ Dark/Light theme toggle

• ✅ AI-powered writing assistant for campaign descriptions
• ✅ Image gallery for campaigns
• ✅ Campaign edit history tracking
• ✅ Progress update system
• ✅ Campaign statistics and counters
• ✅ Most visited campaigns showcase
• ✅ Testimonial carousel
• ✅ Responsive design for all devices

• ✅ Campaign performance metrics
• ✅ View count tracking
• ✅ Donation/contribution tracking
• ✅ Time-based filtering (7 days, 30 days, all time)
• ✅ Campaign type filtering
• ✅ Visual charts and graphs

• React 18.3.1 - UI library
• TypeScript 5.5.3 - Type safety
• Vite 5.4.2 - Build tool
• React Router 6.26.1 - Routing
• Framer Motion 11.5.4 - Animations
• React Icons 5.3.0 - Icon library
• Recharts 2.12.7 - Charts and graphs

• Node.js 20+ - Runtime
• Express 4.19.2 - Web framework
• PostgreSQL - Database
• Drizzle ORM 0.33.0 - Database ORM
• JWT - Authentication
• Bcrypt - Password hashing

• Google Gemini AI - Content generation
• Google OAuth 2.0 - Social authentication

• ESLint - Code linting
• Prettier - Code formatting
• TypeScript - Type checking
• Vite - Hot module replacement

• Node.js 20 or higher
• PostgreSQL 14 or higher
• npm or yarn package manager
• Google OAuth credentials (optional)
• Google Gemini API key (optional)

1. Clone the repository

git clone https://github.com/perashaniD/camply.git
cd camply

2. Install dependencies

# Install frontend dependencies
npm install

# Install backend dependencies
cd server
npm install
cd ..

3. Set up environment variables

Create .env file in the root directory:

VITE_API_URL=http://localhost:3000
VITE_GOOGLE_CLIENT_ID=your_google_client_id
VITE_GEMINI_API_KEY=your_gemini_api_key

Create server/.env file:

DATABASE_URL=postgresql://user:password@localhost:5432/camply
JWT_SECRET=your_jwt_secret_key
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
PORT=3000

4. Set up the database

cd server
npm run db:push
npm run db:seed
cd ..

5. Start the development servers

In one terminal (backend):

cd server
npm run dev

In another terminal (frontend):

npm run dev

6. Open your browser

http://localhost:5173

For testing purposes, you can use:

• Email: demo@example.com
• Password: demo123

camply/
├── src/                          # Frontend source code
│   ├── components/               # React components
│   │   ├── Header.tsx           # Navigation header
│   │   ├── Footer.tsx           # Footer component
│   │   ├── CampaignCard.tsx    # Campaign card component
│   │   ├── AIWritingAssistant.tsx
│   │   └── ...
│   ├── pages/                   # Page components
│   │   ├── HomePage.tsx         # Landing page
│   │   ├── Dashboard.tsx        # User dashboard
│   │   ├── CampaignDetails.tsx  # Campaign details
│   │   └── ...
│   ├── contexts/                # React contexts
│   │   ├── AuthContext.tsx      # Authentication context
│   │   └── ThemeContext.tsx     # Theme context
│   ├── services/                # API services
│   │   ├── api.ts              # API client
│   │   └── gemini.ts           # AI service
│   ├── styles/                  # Global styles
│   │   ├── themes.css          # Theme variables
│   │   ├── responsive.css      # Responsive styles
│   │   └── ...
│   └── utils/                   # Utility functions
├── server/                      # Backend source code
│   ├── src/
│   │   ├── routes/             # API routes
│   │   │   ├── auth.ts         # Authentication routes
│   │   │   └── campaigns.ts    # Campaign routes
│   │   ├── db/                 # Database
│   │   │   ├── schema.ts       # Database schema
│   │   │   ├── seed.ts         # Seed data
│   │   │   └── migrate.ts      # Migrations
│   │   └── index.ts            # Server entry point
│   └── package.json
├── public/                      # Static assets
├── index.html                   # HTML template
├── package.json                 # Frontend dependencies
├── tsconfig.json               # TypeScript config
├── vite.config.ts              # Vite config
└── README.md                    # This file

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint

npm run dev          # Start development server with nodemon
npm run build        # Build TypeScript
npm run start        # Start production server
npm run db:push      # Push database schema
npm run db:seed      # Seed database with sample data
npm run db:studio    # Open Drizzle Studio

Camply is fully responsive and optimized for all devices:

• ✅ Mobile phones (320px - 768px)
• ✅ Tablets (769px - 1024px)
• ✅ Desktops (1025px+)
• ✅ Portrait and landscape orientations
• ✅ Touch-friendly interactions
• ✅ Optimized for iOS Safari and Android Chrome

• Hamburger menu navigation
• Touch-friendly buttons (44x44px minimum)
• Responsive images and layouts
• Optimized forms for mobile input
• Fixed viewport height issues
• Prevented zoom on input focus
• Smooth scrolling and animations

For detailed mobile implementation, see MOBILE_RESPONSIVE_GUIDE.md

POST   /api/auth/register        # Register new user
POST   /api/auth/login           # Login user
POST   /api/auth/google          # Google OAuth login
GET    /api/auth/me              # Get current user

GET    /api/campaigns            # Get all campaigns
GET    /api/campaigns/:id        # Get campaign by ID
POST   /api/campaigns            # Create campaign
PUT    /api/campaigns/:id        # Update campaign
DELETE /api/campaigns/:id        # Delete campaign
PATCH  /api/campaigns/:id/visibility  # Toggle visibility
POST   /api/campaigns/:id/progress    # Update progress
GET    /api/campaigns/:id/history     # Get edit history

GET    /api/analytics/stats      # Get overall statistics
GET    /api/analytics/campaigns  # Get campaign analytics

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

• Follow the existing code style
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed
• Ensure all tests pass before submitting PR

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

Shanid Sajjatuz Islam

• 📧 Email: shanidsajjatuz@gmail.com
• 💼 LinkedIn: linkedin.com/in/shanid-sajjatuz-islam
• 🐙 GitHub: github.com/perashaniD

• React - UI library
• Vite - Build tool
• Framer Motion - Animation library
• Google Gemini - AI content generation
• Drizzle ORM - Database ORM
• Unsplash - Stock images

• Email notifications
• Payment gateway integration
• Social media sharing
• Campaign comments and reviews
• Advanced search and filters
• Multi-language support
• PWA support
• Mobile app (React Native)
• Campaign categories and tags
• User verification system

This project is actively maintained and under continuous development. Feel free to report issues or suggest new features!