🎫 E-Ticket Generator System

A modern, full-stack MERN application for event ticket generation and management with QR code support, admin dashboard, and beautiful animated UI.

✨ Features

User Features

• ✅ Event Registration - Simple form-based registration for events
• ✅ Instant Ticket Generation - Automatic ticket ID and QR code generation
• ✅ Downloadable Tickets - Download tickets as high-quality PDF with QR code
• ✅ Dual Verification - Verify tickets by manual entry or QR code scanning
• ✅ QR Code Scanner - Camera-based QR code scanning for instant verification
• ✅ Fully Responsive - Perfect on mobile, tablet, and desktop
• ✅ Network Access - Works on local network and via port forwarding

Admin Features

• ✅ Secure Authentication - JWT-based admin login
• ✅ Dashboard Analytics - Visual statistics with interactive charts
• ✅ User Management - View and search all registered users
• ✅ Event Management - Add and manage events dynamically
• ✅ Dual Ticket Verification - Manual entry or QR code scanning
• ✅ Camera Scanner - Built-in QR code scanner for quick verification
• ✅ Search & Filter - Real-time search through registrations
• ✅ Mobile-Friendly Dashboard - Full admin functionality on mobile devices

Technical Features

• ✅ Modern UI - Glassmorphism and neon gradient design
• ✅ Smooth Animations - Framer Motion animations throughout
• ✅ QR Code Generation - Unique QR codes for each ticket
• ✅ PDF Export - Download tickets as PDF using html2canvas & jsPDF
• ✅ Toast Notifications - Real-time feedback with react-hot-toast
• ✅ Confetti Effects - Celebration animations on success
• ✅ RESTful API - Clean, well-structured backend

🛠️ Tech Stack

Frontend

• React 18 - UI library
• Vite - Build tool with network access
• Tailwind CSS - Utility-first styling
• Framer Motion - Smooth animations
• React Router - Client-side routing
• Axios - HTTP client
• Recharts - Data visualization
• html2canvas & jsPDF - High-quality PDF generation
• jsQR - QR code scanning
• Lucide React - Beautiful icons
• React Hot Toast - Toast notifications
• Canvas Confetti - Celebration effects

Backend

• Node.js - Runtime
• Express - Web framework
• MongoDB - Database
• Mongoose - ODM
• JWT - Authentication
• bcryptjs - Password hashing
• QRCode - QR code generation
• CORS - Cross-origin support

📦 Installation

Prerequisites

• Node.js (v16 or higher)
• MongoDB (local or Atlas)
• npm or yarn

Backend Setup

1. Navigate to backend directory:

cd backend

2. Install dependencies:

npm install

3. Create .env file:

cp .env.example .env

4. Update .env with your configuration:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/eticket-system
JWT_SECRET=your_super_secret_jwt_key_here
NODE_ENV=development

5. Create admin account:

node scripts/createAdmin.js

6. Seed sample events (optional):

node scripts/seedEvents.js

7. Start the server:

npm run dev

Backend will run on http://localhost:5000

Frontend Setup

1. Navigate to frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

Frontend will run on http://localhost:3000

🚀 Usage

User Flow

1. Visit the homepage
2. Click "Register Now"
3. Fill in registration details and select an event
4. Receive instant ticket with QR code
5. Download ticket as PDF

Admin Flow

1. Navigate to /admin/login
2. Login with credentials:
   • Email: admin@eticket.com
   • Password: admin123
3. Access dashboard with:
   • User statistics
   • Event management
   • Ticket verification
   • Analytics charts

📁 Project Structure

E-Ticket_Generator_System/
├── backend/
│   ├── config/
│   │   └── db.js
│   ├── controllers/
│   │   ├── adminController.js
│   │   ├── eventController.js
│   │   └── userController.js
│   ├── middleware/
│   │   └── auth.js
│   ├── models/
│   │   ├── Admin.js
│   │   ├── Event.js
│   │   └── User.js
│   ├── routes/
│   │   ├── adminRoutes.js
│   │   ├── eventRoutes.js
│   │   └── userRoutes.js
│   ├── scripts/
│   │   ├── createAdmin.js
│   │   └── seedEvents.js
│   ├── utils/
│   │   ├── generateTicketID.js
│   │   └── generateToken.js
│   ├── .env.example
│   ├── package.json
│   └── server.js
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   │   ├── Button.jsx
│   │   │   ├── Card.jsx
│   │   │   ├── Footer.jsx
│   │   │   ├── InputField.jsx
│   │   │   ├── Loader.jsx
│   │   │   ├── Navbar.jsx
│   │   │   └── QRScanner.jsx
│   │   ├── pages/
│   │   │   ├── AdminDashboard.jsx
│   │   │   ├── AdminLogin.jsx
│   │   │   ├── Home.jsx
│   │   │   ├── NotFound.jsx
│   │   │   ├── Register.jsx
│   │   │   ├── Ticket.jsx
│   │   │   └── Verify.jsx
│   │   ├── App.jsx
│   │   ├── index.css
│   │   └── main.jsx
│   ├── index.html
│   ├── package.json
│   ├── tailwind.config.js
│   └── vite.config.js
└── README.md

🔌 API Endpoints

Public Routes

• POST /api/register - Register for an event
• GET /api/ticket/:ticketID - Get ticket details
• GET /api/events - Get all active events
• GET /api/events/:id - Get single event

Admin Routes (Protected)

• POST /api/admin/login - Admin login
• GET /api/admin/users - Get all users
• GET /api/admin/events - Get all events
• GET /api/admin/stats - Get dashboard statistics
• GET /api/admin/verify/:ticketID - Verify ticket
• POST /api/admin/add-event - Add new event

🎨 UI Features

• Glassmorphism Effects - Modern frosted glass design
• Neon Gradients - Vibrant color schemes
• Smooth Animations - Page transitions and hover effects
• Responsive Layout - Mobile-first design
• Dark Theme - Eye-friendly dark mode
• Interactive Elements - Animated buttons and cards

📸 QR Code Scanner

The application includes a built-in QR code scanner for instant ticket verification:

Features

• Camera Access - Uses device camera (front/back)
• Real-time Scanning - Detects QR codes automatically
• Dual Modes - Manual entry or camera scanning
• Mobile Optimized - Works perfectly on smartphones
• Animated UI - Beautiful scanning interface with corner markers
• Auto-Verification - Instantly verifies after scanning

Usage

1. Navigate to Verify page or Admin Dashboard
2. Select "Scan QR Code" mode
3. Click "Open Camera Scanner"
4. Allow camera permissions
5. Point camera at ticket QR code
6. Automatic verification!

📱 Mobile & Network Access

Local Network Access

Access from any device on the same WiFi:

http://YOUR_IP_ADDRESS:3000

The app automatically detects your network and adjusts API URLs accordingly.

Port Forwarding

For remote access, see PORT_FORWARDING_GUIDE.md for detailed instructions on:

• VS Code port forwarding
• ngrok setup
• HTTPS configuration
• Mobile testing

📸 Screenshots

Add screenshots here after deployment

🚢 Deployment

Backend (Render/Railway)

1. Create new web service
2. Connect GitHub repository
3. Set environment variables
4. Deploy

Frontend (Vercel/Netlify)

1. Connect GitHub repository
2. Set build command: npm run build
3. Set output directory: dist
4. Deploy

🔒 Security Features

• JWT-based authentication
• Password hashing with bcrypt
• Protected admin routes
• Input validation
• CORS configuration
• Environment variables for sensitive data

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License.

👨‍💻 Author

Created with ❤️ by [Your Name]

🙏 Acknowledgments

• Icons by Lucide
• Animations by Framer Motion
• UI inspiration from modern event platforms

---

Note: This is a demonstration project. For production use, implement additional security measures and error handling.