Ticketr - Real-time Event Ticketing Platform

A modern, real-time event ticketing platform built with Next.js 14, Convex, Clerk, and Stripe Connect. Features a sophisticated queue system, real-time updates, and secure payment processing.

Features

For Event Attendees

🎫 Real-time ticket availability tracking
⚡ Smart queuing system with position updates
🕒 Time-limited ticket offers
📱 Mobile-friendly ticket management
🔒 Secure payment processing with Stripe
📲 Digital tickets with QR codes
💸 Automatic refunds for cancelled events

For Event Organizers

💰 Direct payments via Stripe Connect
📊 Real-time sales monitoring
🎯 Automated queue management
📈 Event analytics and tracking
🔄 Automatic ticket recycling
🎟️ Customizable ticket limits
❌ Event cancellation with automatic refunds
🔄 Bulk refund processing

Technical Features

🚀 Real-time updates using Convex
👤 Authentication with Clerk
💳 Payment processing with Stripe Connect
🌐 Server-side and client-side rendering
🎨 Modern UI with Tailwind CSS and shadcn/ui
📱 Responsive design
🛡️ Rate limiting for queue joins and purchases
🔒 Automated fraud prevention
🔔 Toast notifications for real-time feedback
✨ Beautiful, accessible components with shadcn/ui

UI/UX Features

🎯 Instant feedback with toast notifications
🎨 Consistent design system using shadcn/ui
♿ Fully accessible components
🎭 Animated transitions and feedback
📱 Responsive design across all devices
🔄 Loading states and animations
💫 Micro-interactions for better engagement

Getting Started

Prerequisites

Node.js 18+
npm/yarn
Stripe Account
Clerk Account
Convex Account

Environment Variables

Create a .env.local file with:

NEXT_PUBLIC_CONVEX_URL=your_convex_url
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key
CLERK_SECRET_KEY=your_clerk_secret
STRIPE_SECRET_KEY=your_stripe_secret
STRIPE_WEBHOOK_SECRET=your_webhook_secret
NEXT_PUBLIC_APP_URL=http://localhost:3000

Installation

# Clone the repository
git clone https://github.com/sonnysangha/ticket-marketplace-saas-nextjs15-convex-clerk-stripe-connect

# Install dependencies
npm install

# Start the development server
npm run dev

# In a separate terminal, start Convex
npx convex dev

Setting up Clerk

Create a Clerk application by Clicking here!
Configure authentication providers
Set up redirect URLs
Add environment variables

Setting up Convex

Create a Convex account by Clicking here!
Create a new project
Install the Convex CLI:
```
npm install convex
```
Initialize Convex in your project:
```
npx convex init
```
Copy your deployment URL from the Convex dashboard and add it to your .env.local:
```
NEXT_PUBLIC_CONVEX_URL=your_deployment_url
```
Start the Convex development server:
```
npx convex dev
```

Note: Keep the Convex development server running while working on your project. It will sync your backend functions and database schema automatically.

Setting up Stripe

Create a Stripe account
Enable Stripe Connect
Set up webhook endpoints
Configure payment settings

Setting up Stripe Webhooks for Local Development

Install the Stripe CLI:

# macOS
brew install stripe/stripe-cli/stripe

# Windows (using scoop)
scoop install stripe

# Linux
curl -s https://packages.stripe.dev/api/security/keypair/stripe-cli-gpg/public | gpg --dearmor | sudo tee /usr/share/keyrings/stripe.gpg
echo "deb [signed-by=/usr/share/keyrings/stripe.gpg] https://packages.stripe.dev/stripe-cli-debian-local stable main" | sudo tee -a /etc/apt/sources.list.d/stripe.list
sudo apt update
sudo apt install stripe

Start webhook forwarding:

stripe listen --forward-to localhost:3000/api/webhooks/stripe

Copy the webhook signing secret that is displayed after running the listen command and add it to your .env.local:
```
STRIPE_WEBHOOK_SECRET=whsec_xxxxx
```
Keep the webhook forwarding running while testing payments locally. The CLI will forward all webhook events to your local endpoint.

Note: Make sure your webhook endpoint (/api/webhooks/stripe) is properly configured to handle incoming webhook events.

Setting up UI Components

Install shadcn/ui CLI:
```
npx shadcn-ui@latest init
```

Install required components:

npx shadcn-ui@latest add toast
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add dialog

Configure toast notifications in your layout:
```
npx shadcn-ui@latest add toaster
```

Architecture

Database Schema

Events
Tickets
Waiting List
Users

Key Components

Real-time queue management
Rate limiting
Automated offer expiration
Payment processing
User synchronization

Usage

Creating an Event

Sign up as an event organizer
Complete Stripe Connect onboarding
Create event with details and ticket quantity
Publish event

Purchasing Tickets

Browse available events
Join queue for desired event
Receive ticket offer
Complete purchase within time limit
Access digital ticket with QR cod

Join the worlds best developer course & community Zero to Full Stack Hero! 🚀

Want to Master Modern Web Development?

This project was built as part of the Zero to Full Stack Hero 2.0 course, taught by Sonny Sangha. Join thousands of developers and learn how to build projects like this and much more!

What You'll Get:

📚 Comprehensive Full Stack Development Training
🎯 50+ Real-World Projects
🤝 Access to the PAPAFAM Developer Community
🎓 Weekly Live Coaching Calls with Sonny
🤖 AI & SaaS Development Modules
💼 Career Guidance & Interview Prep

Course Features:

Lifetime Access to All Content
Live Coaching Sessions
Private Discord Community
AI Mastery Module
SaaS Development Track
And much more!

Join Zero to Full Stack Hero Today!

Support

For support, email team@papareact.com

Built with ❤️ for the PAPAFAM

Handling Refunds and Cancellations

Event organizers can cancel events from their dashboard
System automatically processes refunds for all ticket holders
Refund status can be tracked in user dashboard

User Experience

Real-time Feedback
- Instant purchase confirmations
- Queue position updates
- Error notifications
- Success page
- Ticket status
Interactive Elements
- Animated buttons and cards
- Loading states
- Progress indicators
- Skeleton loaders
- Smooth transitions

lemonyip/ticket-marketplace-saas-nextjs15-convex-clerk-stripe-connect