TicketPro

TicketPro is a web-based event management and ticketing platform that allows event organizers to create, promote, and manage events, while giving attendees a streamlined experience for discovering events, purchasing tickets, and attending them.

Supported event types include concerts, webinars, conferences, workshops, and community gatherings.

---

Repository Structure

• nextjs-dashboard/ — Next.js (App Router) web application
• tm_createdb.sql — database schema / table creation script
• insert.sql — seed data script
• tm_dropdb.sql — (optional) database cleanup script
• eventmanager.drawio.pdf — ERD / system diagram

---

Tech Stack

• Frontend / Web: Next.js + TypeScript + Tailwind CSS
• Package Manager: pnpm
• Database: MySQL
• Security: password hashing via bcrypt (see Troubleshooting if native binding fails)

---

Requirements

• Node.js: v20.18.0
• npm: 10.8.2
• pnpm: installed globally
• MySQL: recommended 8.x (Workbench or CLI)

---

Database Setup (MySQL)

Run these commands from the repository root (same folder as tm_createdb.sql).

1) Create the database

CREATE DATABASE ticket_pro;

2) Create tables / schema

mysql -u root -p ticket_pro < tm_createdb.sql

3) Seed initial data

mysql -u root -p ticket_pro < insert.sql

Optional: Drop DB (if you need a clean reset)

mysql -u root -p < tm_dropdb.sql

---

Environment Variables

Create nextjs-dashboard/.env and add:

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=your_password_here
DB_NAME=ticket_pro

✅ Recommended: commit a .env.example (without secrets) and keep .env in .gitignore.

---

Installation

Move into the app folder after cloning:

cd nextjs-dashboard

Install pnpm (if needed):

npm install -g pnpm

Install dependencies:

pnpm i

---

Run in Development

pnpm dev

Open:

• http://localhost:3000

---

Build & Run (Production)

Build:

pnpm build

Start:

pnpm start

---

One-time Step: Seed Event Images

This project includes a helper that updates event images (e.g., imageForEvents()).

First run only

1. Open: nextjs-dashboard/app/page.tsx
2. Temporarily uncomment the useEffect that calls imageForEvents()
3. Run dev server:

pnpm dev

4. Confirm logs like:

• Successfully updated image for eventId: ...

After it completes

Comment the useEffect back so it doesn't run every refresh.

Tip: Later improvement would be moving this into a dedicated script (e.g., pnpm seed:images) to avoid editing page code.

---

Key Features

• User Management
  • Secure sign-up and login
  • Email validation
  • Password hashing
• Event Management
  • Create, edit, and delete events
  • Dynamic querying and filters for event lists
• Ticket Purchasing
  • Frontend payment form
  • Backend integration for ticket purchasing
  • Auto-increment seat number assignment
• Homepage & Dashboard
  • Popular, registered, upcoming, and in-progress events
  • Side navigation for fast navigation
• Profile Pages
  • Display user info and registered events