TicketPulse Frontend is a modern, high-performance real-time user interface designed for high-concurrency event ticketing systems. Built on Next.js 16 (App Router) and React 19, it seamlessly integrates with the TicketPulse Go Backend Engine via Server-Sent Events (SSE) to deliver dynamic queue rank updates, graceful connection fallbacks, and instantaneous client-state transitions managed by Zustand.
- Real-Time HTTP SSE Stream Integration: Leverages custom React Hooks (
useQueueSSE) to establish persistent Server-Sent Event connections, consuming rank updates in real-time without client polling overhead. - Client-Side Queue State Engine: Uses Zustand for lightweight global state orchestration across complex lifecycle states (
IDLE➔WAITING➔READY➔RESERVED➔SOLD_OUT). - Resilient Connection Recovery & Guard Check: Automatically detects server resets, connection drops, and queue flushes, gracefully transitioning the UI back to initial state without displaying invalid ranks or crashing.
- Atomic Checkout Trigger: Enforces strict client-side validation before invoking the atomic ticket reservation API endpoint.
- Framework: Next.js 16 (App Router Architecture)
- UI Library & Language: React 19, TypeScript (Strict Mode)
- Styling: Tailwind CSS, Lucide React Icons
- Global State Management: Zustand
- Networking: Native
EventSourceAPI (SSE), Fetch API
- Node.js 18.17+ or 20+
- TicketPulse Go Backend running on
http://localhost:8080
git clone [https://github.com/iammjdev/ticketpulse-frontend.git](https://github.com/iammjdev/ticketpulse-frontend.git)
cd ticketpulse-frontend
# Install dependencies
npm install
Create a .env.local file in the root directory:
NEXT_PUBLIC_BACKEND_URL=http://localhost:8080
npm run dev
Open http://localhost:3000 with your browser to launch the Virtual Waiting Room interface.
Distributed under the MIT License. See LICENSE for more information.