TicketFlow - Queue & Appointment SaaS

TicketFlow is a comprehensive queue management, appointment booking, and event ticketing platform designed for organizations such as hospitals, clinics, and service centers. Built with Next.js 16, React 19, TypeScript, PostgreSQL, and Prisma ORM, the platform features a multi-tenant architecture (Organization > Branch > Counter) with full data isolation, 65+ secured REST API endpoints with Zod validation, and role-based access control across 5 user roles. The system includes a drag-and-drop homepage builder with 19+ section types, a template system with variable substitution, real-time queue tracking with sound notifications, multi-step appointment booking with QR confirmation, and event ticketing with QR-based check-in.

Key Features

• Real-time queue management with call-next, skip, transfer, no-show operations and sound notifications
• Multi-step appointment booking wizard (service > date/time > review > QR confirmation)
• Multi-tenant architecture with Organization > Branch > Counter hierarchy and data isolation
• Role-based access control with 5 roles (Super Admin, Org Admin, Branch Admin, Staff, Customer)
• Drag-and-drop homepage builder with 19+ section types, per-section styling, gradients, and layout presets
• Template system with professional starter templates, save/load/activate, and variable substitution
• Event ticketing with ticket types, pricing, and QR-based camera check-in
• Large-screen real-time queue display board for branches
• RSA-2048 license management with domain binding
• 65+ REST API endpoints with consistent error handling and Zod schema validation

Tech Stack

Technical Details

Frontend built with Next.js 16 App Router, React 19, TypeScript, and Tailwind CSS 4. UI layer uses Shadcn/ui, Radix UI, Lucide React (97+ icons), and Embla Carousel. Rich text editing powered by Tiptap Editor with colors, fonts, tables, and YouTube embeds. Backend runs on Next.js API Routes with 65+ REST endpoints. Database is PostgreSQL with Prisma ORM 7 featuring a 452-line schema with 15+ models (User, Organization, Branch, Service, Counter, QueueTicket, Event, etc.). Authentication via NextAuth.js with JWT and bcrypt password hashing. Middleware layer handles authentication, license gating, and role verification. Additional tooling includes QR code generation/scanning, DOMPurify for sanitization, date-fns for date handling, and dark mode support via next-themes.

Challenges & Solutions

Designing the multi-tenant data isolation across organizations, branches, and counters while keeping query performance fast required careful Prisma schema design and middleware-level tenant scoping. The homepage builder with 19+ section types needed a flexible yet type-safe architecture — solved with a discriminated union pattern in TypeScript and Zod validation for each section config. Implementing real-time queue operations (call-next, skip, transfer) with consistent state across multiple staff screens demanded optimistic UI updates with server reconciliation. The RSA-2048 license system with domain binding required secure token generation and verification without exposing private keys to the client.