Event Flow

Event Flow is a modern, high-performance event ticketing and management platform designed for scale and real-time interaction. Built with React, Convex, and Clerk, it provides a seamless experience for both event-goers and administrators.

🚀 Key Features

For Users

• Real-time Seating: Interactive seat selection featuring procedural grid layouts and custom SVG maps.
• Queueing System: Intelligent waiting list management for high-demand event launches.
• Instant Booking: Streamlined checkout process with real-time seat availability updates.
• Profile Management: Integrated account management and ticket history powered by Clerk.

For Administrators

• Real-time Analytics: Live dashboard showing ticket sales, user activity, and venue utilization.
• Content Management: Dedicated tools for managing Performers, Movies, Venues, and Events.
• Advanced Seating Config: Support for multiple seating strategies including procedural layout generation.
• System Monitoring: Live recent activity feed and operational metrics.

🛠️ Technology Stack

• Frontend: React + TypeScript + Vite
• Styling: Tailwind CSS + Shadcn UI
• Backend/Database: Convex (Real-time backend)
• Authentication: Clerk
• Charts: Recharts
• Icons: Lucide React

📂 Project Structure

├── convex/             # Backend functions, schema, and auth configuration
├── src/
│   ├── components/     # Reusable UI components (Seating, Admin, Layout)
│   ├── contexts/       # React Context providers (Auth, Notifications)
│   ├── pages/          # Application views (Checkout, Admin, etc.)
│   ├── services/       # API and WebSocket service layers
│   ├── types/          # TypeScript interfaces and shared types
│   └── lib/            # Utility functions
├── public/             # Static assets
└── tailwind.config.ts  # Design system configuration

🚥 Workflows

User Purchase Flow

1. Discovery: Users browse events on the homepage.
2. Queueing: For high-demand events, users enter a managed queue (Waiting List).
3. Selection: Users select seats from a real-time interactive map.
4. Checkout: Secure checkout process linked to the user's account.
5. Confirmation: Instant ticket generation and appearance in "My Tickets".

Admin Management Flow

1. Setup: Admins define Venues (seating configuration) and Content (Movies/Performers).
2. Event Creation: Schedule events, assign pricing, and link content.
3. Monitoring: View live sales and attendance stats on the Overview dashboard.
4. Operations: Manage users, tickets, and system health in real-time.

⚙️ Getting Started

Prerequisites

• Node.js (v18+)
• npm or yarn

Installation

1. Clone the repository:

   git clone <repository-url>
   cd event-flow

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env.local file with:

   VITE_CLERK_PUBLISHABLE_KEY=your_clerk_key
   CLERK_SECRET_KEY=your_clerk_secret

4. Run the development server:

   # Terminal 1: Frontend
   npm run dev
   
   # Terminal 2: Convex Backend
   npx convex dev