Silencio Queue Management System

The virtual queuing platform for Vinschool Central Park Student Council's Silencio Haunted Houses

Features • Tech Stack • Getting Started

---

📖 Introduction

Silencio Queue is the student-facing web application dedicated to managing the high demand for Haunted House attractions at the Silencio event. To prevent physical overcrowding and ensure safety, this system allows students to reserve "virtual spots" or create group reservations, effectively digitizing the waiting line.

The system ensures fair access by verifying student ticket types and strictly managing queue capacities in real-time.

⚠️ The Challenge: Why this system exists?

Managing hundreds of students clamoring for limited Haunted House slots is a logistical challenge. This dedicated infrastructure solves key operational points:

• The "Eternal Line" Problem: Physical lines for popular attractions can block pathways and waste the entire event duration for attendees.
  • Solution: Virtual Queuing allows students to "get a number" and enjoy other parts of the event until their turn arrives.
• The "Group Separation" Anxiety: Students want to experience the haunted house with their specific friend group, not strangers.
  • Solution: Group Reservation Codes enable a leader to "Create a Room" and share a unique code, ensuring the entire group is placed in the queue together seamlessly.
• The "Ticket Validity" Check: Ensuring only students with the correct ticket tier can access premium attractions.
  • Solution: Integrated Ticket Verification checks the user's ticket type against the database upon login, automatically filtering eligibility.

🎥 Demo

✨ Features

🕒 Smart Virtual Queue

• Instant Join: Students can view available Haunted Houses and join the queue with a single tap.
• Real-time Status: The interface polls for updates every 30 seconds, keeping students informed of their spot and estimated wait time.
• Capacity Management: Automatically closes queues when they reach maximum capacity to prevent overbooking.

🤝 Group Reservations

• "Create Room" Functionality: A student can become a group leader, reserving a block of spots.
• Code Sharing: Generates a unique 6-digit code for friends to join the reservation.
• Atomic Locking: Ensures that if a group fits in the remaining capacity, all members get in; otherwise, the reservation is handled safely.

📧 Mass Event Confirmation

A comprehensive pre-event communication system that sends personalized confirmation emails to all registered students before the event day.

• Personalized Confirmation Emails: Each student receives a beautifully designed HTML email containing:
  • Their ticket information (name, homeroom, student ID, ticket type)
  • Visual ticket representation based on tier
  • Haunted House queue details (house name, queue number, start/end times) if registered
  • Step-by-step check-in instructions (both in-person and online options)
  • Event rules and guidelines

• Batch Processing: Admin can trigger mass email sending from the dashboard with built-in rate limiting (2-second delays) to avoid email provider restrictions.
• Tracking & Retry: The system tracks which students have received their confirmation email and includes a robust retry mechanism with exponential backoff for failed deliveries.
• Reminder System: Separate reminder emails can be sent to students who haven't selected their haunted house queue yet, with individual or batch sending options.

🛠️ Tech Stack

Core

• Next.js 16 - App Router & Turbopack.
• React 19 - Latest concurrent features.
• TypeScript - Strict type safety.

Data & State

• TanStack Query - Efficient server state management and polling.
• Neon PostgreSQL - Serverless database.
• Drizzle ORM - Type-safe database access.
• Better Auth - Secure authentication.

UI / UX

• Tailwind CSS 4 - Next-gen styling engine.
• Radix UI - Accessible primitives for Tabs and Dialogs.
• Lucide React - Beautiful iconography.

🚀 Getting Started

Prerequisites

• Node.js 20+
• Neon PostgreSQL Database
• Google OAuth Credentials

Installation

1. Clone the repository:

   git clone https://github.com/vteam/silencio-queue.git
   cd silencio-queue

2. Install dependencies:

   npm install

3. Environment Setup: Copy the .env example and configure:

   cp .env.example .env

   Required: DATABASE_URL, BETTER_AUTH_SECRET, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET

4. Database Migration:

   Push the schema to your Neon database:

   npm run db:migrate

5. Run Development Environment:

   Start the Next.js app:

   npm run dev

   Open http://localhost:3000 with your browser.

---

Developed with ❤️ by Cao Cự Chính