███████╗██╗   ██╗███████╗███╗   ██╗████████╗    ███╗   ███╗ ██████╗ ██████╗
██╔════╝██║   ██║██╔════╝████╗  ██║╚══██╔══╝    ████╗ ████║██╔════╝ ██╔══██╗
█████╗  ██║   ██║█████╗  ██╔██╗ ██║   ██║       ██╔████╔██║██║  ███╗██████╔╝
██╔══╝  ╚██╗ ██╔╝██╔══╝  ██║╚██╗██║   ██║       ██║╚██╔╝██║██║   ██║██╔══██╗
███████╗ ╚████╔╝ ███████╗██║ ╚████║   ██║       ██║ ╚═╝ ██║╚██████╔╝██║  ██║
╚══════╝  ╚═══╝  ╚══════╝╚═╝  ╚═══╝  ╚═╝       ╚═╝     ╚═╝ ╚═════╝ ╚═╝  ╚═╝

Full‑Stack Event Management System

Discover · Register · Check‑In · Review — A production-grade event platform built end-to-end as a major full‑stack project.

Features · Tech Stack · Getting Started · Demo Accounts · Architecture · Deployment

---

🌟 Overview

EventManager is a complete, production-ready event management platform that bridges the gap between event organizers and attendees. Customers can discover events, register with one click, download beautifully branded QR-coded PDF tickets, and post reviews. Organizers get a full dashboard to create and manage events, view participant lists, export CSVs, and perform real-time check-ins via Socket.IO — all in a responsive, dark-mode-ready UI.

🛠 Tech Stack

Backend

	Technology	Purpose
	Node.js 18+	Runtime environment
	Express.js	REST API framework
	MongoDB + Mongoose	Database & ODM
	JSON Web Tokens	Authentication & authorization
	Socket.IO	Real-time bidirectional events

Frontend

	Technology	Purpose
	React 18	UI library
	Vite	Lightning-fast dev bundler
	Tailwind CSS	Utility-first styling
	React Router	Client-side routing
	Axios	HTTP client

Tooling & DevX

	Technology	Purpose
	ESLint + Prettier	Linting & formatting
	Nodemon	Auto-restart dev server
	PostCSS	CSS transformations
	jsPDF + html2canvas	Branded PDF ticket generation

✨ Key Features

👤 Customers 🔍 Browse & discover events 📝 Register for events instantly 🎫 Download branded PDF tickets with QR codes ⭐ Post event reviews & ratings 🌙 Full dark mode support

🎪 Organizers ➕ Create & manage events 👥 View participant lists 📊 Export attendee data as CSV 📡 Real-time QR check-in via Socket.IO 📈 Live event statistics

🔧 Admin ✅ Approve / reject event submissions 🏠 Homepage recommendations engine 📉 Platform-wide statistics 🔔 Toast notifications 📱 Fully responsive UI

📁 Project Structure

Event-management-system/
│
├── backend/                    # Express API + Socket.IO server
│   ├── src/
│   │   ├── controllers/        # Route handler logic
│   │   ├── models/             # Mongoose schemas
│   │   ├── routes/             # API route definitions
│   │   ├── middleware/         # Auth, error handling
│   │   ├── socket/             # Socket.IO event handlers
│   │   └── seed.js             # Database seeder
│   ├── .env                    # Environment config (see below)
│   └── package.json
│
└── frontend/                   # Vite + React application
    ├── src/
    │   ├── pages/              # Route-level page components
    │   ├── hooks/              # Custom React hooks
    │   │   ├── useTicketPDF    # PDF ticket generation
    │   │   └── useQrCheckIn    # Live Socket.IO check-in
    │   └── components/         # Reusable UI components
    └── package.json

🚀 Getting Started

Prerequisites

• Node.js 18+
• MongoDB (local or connection string)

---

1. Clone & Install

git clone <your-repo-url>
cd Event-management-system

# Install backend dependencies
cd backend && npm install

# Install frontend dependencies
cd ../frontend && npm install

2. Configure Environment

Create a backend/.env file:

PORT=5050
MONGODB_URI=mongodb://localhost:27017/eventmanager
JWT_SECRET=supersecret
CLIENT_ORIGIN=http://localhost:5173

3. Run Locally

Open two terminals:

# Terminal A — Backend
cd backend
npm run dev
# → Server running at http://localhost:5050

# Terminal B — Frontend
cd frontend
npm run dev
# → App running at http://localhost:5173

4. Seed Demo Data (optional)

cd backend
node src/seed.js

🔑 Demo Accounts

Role	Email	Password
👤 Customer	customer@example.com	password
🎪 Organizer	organizer@example.com	password
🔧 Admin	admin@example.com	password

🪝 Notable Custom Hooks

// Generate a fully branded, QR-embedded PDF ticket from HTML
const { downloadTicket } = useTicketPDF();

// Perform real-time QR / ID check-ins with live Socket.IO status
const { checkIn, status } = useQrCheckIn(eventId);

📜 Scripts

Backend (backend/)

Command	Description
npm run dev	Start server with nodemon (hot reload)

Frontend (frontend/)

Command	Description
npm run dev	Start Vite dev server
npm run build	Production build → dist/
npm run preview	Preview the production build locally

🌐 Deployment

1. Set environment variables — PORT, MONGODB_URI, JWT_SECRET, CLIENT_ORIGIN
2. Frontend — Build with npm run build and serve the dist/ directory via any static host (Vercel, Netlify, Nginx, CDN)
3. Backend — Run as a managed service with PM2 or containerize with Docker; ensure CORS is configured to allow your frontend origin

# Example: run backend with PM2
pm2 start src/index.js --name eventmanager-api

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

Built with 💙 as a flagship full-stack project

If you found this project helpful, please consider giving it a ⭐