Skip to main content

​
Overview

Ticket Hub is a full-stack ticket marketplace platform built with Next.js 15, Convex, Clerk, and Stripe. This guide will help you set up the project locally in just a few minutes.

Next.js 15

Built on the latest Next.js with App Router and React 19

Convex Backend

Real-time database with reactive queries

Clerk Auth

Secure authentication and user management

Stripe Payments

Payment processing for ticket purchases

​
Prerequisites

Before you begin, ensure you have:

​
Installation

1

Clone the repository

Clone the Ticket Hub repository to your local machine:
git clone https://github.com/your-username/ticket-hub.git
cd ticket-hub
2

Install dependencies

Install all required packages:
npm install
This will install key dependencies including:
  • @clerk/nextjs - Authentication
  • convex - Backend and database
  • stripe - Payment processing
  • @tanstack/react-query - Data fetching
3

Set up environment variables

Create a .env.local file in the root directory with the required environment variables:
cp .env.example .env.local
Fill in the values (see Environment Setup for detailed instructions):
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
CLERK_WEBHOOK_SECRET=whsec_...

# Clerk URLs
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

# Convex
NEXT_PUBLIC_CONVEX_URL=https://your-deployment.convex.cloud
CONVEX_DEPLOYMENT=your-deployment-name
CONVEX_DEPLOY_KEY=...

# Stripe
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000
VERCEL_PROJECT_PRODUCTION_URL=your-production-url.vercel.app
4

Initialize Convex

Set up your Convex backend:
npx convex dev
This will:
  • Create a new Convex project (if needed)
  • Deploy your schema and functions
  • Generate the NEXT_PUBLIC_CONVEX_URL
5

Start the development server

Run the development server:
npm run dev
Open http://localhost:3000 in your browser to see the application.

​
Your First Event

Once the app is running, you can create your first event:
1

Sign up and authenticate

Navigate to /sign-up and create an account using Clerk authentication.
2

Navigate to seller dashboard

Go to /seller/new-event to access the event creation form.
3

Create an event

Fill in the event details:
// The form submits to the Convex mutation:
// convex/events.ts:43-65
const eventData = {
  name: "Summer Music Festival",
  description: "An amazing outdoor concert experience",
  location: "Central Park, New York",
  eventDate: new Date('2026-07-15').getTime(),
  price: 99.99,
  totalTickets: 500,
  userId: user.id // Automatically set from auth
};
4

Event is live

Your event is now live! Users can:
  • Browse events on the homepage
  • Join waiting lists
  • Purchase tickets with Stripe

​
Key Features

Event Management

Create, edit, and manage events with real-time ticket tracking

Waiting List System

Automatic queue management with time-limited ticket offers

Secure Payments

PCI-compliant payment processing with Stripe

Real-time Updates

Live ticket availability using Convex reactive queries

​
Next Steps

Authentication

Learn how to configure Clerk authentication

Environment Setup

Detailed environment variable configuration

API Reference

Explore the Convex API functions

Feature Guides

Learn how to use Ticket Hub features

​
Troubleshooting

Make sure you’ve run npx convex dev and copied the NEXT_PUBLIC_CONVEX_URL to your .env.local file.
Verify that:
  • Your Clerk keys are correctly set in .env.local
  • The sign-in/sign-up URLs match your Clerk dashboard configuration
  • You’ve added http://localhost:3000 to your Clerk allowed origins
Run npx convex dev to generate the Convex types, then restart your TypeScript server.
If you encounter persistent issues, try a clean install:
npm
npm run clean
npm install
npm run dev

Build docs developers (and LLMs) love

Get started for freeTalk to us