Silencio Check-in System

The check-in system for Vinschool Central Park Student Council's Silencio Event

Features • Tech Stack • Getting Started

---

📖 Introduction

Silencio Check-in is the specialized platform for managing entry and flow at the Silencio Halloween event. Unlike traditional ticketing systems, it integrates entrance validation with a complex Virtual Queue Management System for Haunted House attractions, ensuring a smooth experience for hundreds of attendees.

The system comprises two main components:

1. Next.js Web Application: Staff dashboard for check-ins, queue management, and admin controls.
2. Standalone Worker: A high-performance Node.js service handling real-time WebSocket connections for instant QR scanning and queue updates.

📸 Footage of Silencio Check-in System in action

"473 students showed up and this system worked flawlessly."

⚠️ The Challenge: Why this system exists?

High-stakes events with limited timeframes are unforgiving. Without this dedicated infrastructure, the event operations would face critical failure points:

• The "Fake Ticket" Risk: With simple paper tickets or static lists, preventing double-entry or fake tickets is a logistical nightmare.
  • Solution: Race-Condition Proof Verification instantly locks the ticket record in the database upon scan. This blocks fraudulent check-in attempts immediately, ensuring every entry is unique.
• The Efficiency Bottleneck: A slow traditional check-in process using Spreadsheet lookup for 400+ students leads to dangerous overcrowding and delays.
  • Solution: High-Performance WebSocket Worker processes scans in real-time, enabling faster check-in times (under 20s per student) to keep the line moving smoothly.
• The "Wrong Bracelet" Confusion: Staff need to quickly identify which bracelet to give each attendee in a chaotic environment.
  • Solution: Distinct Visual Cues provides large, color-coded instructions on screen, offering good visuals for staff to collect the right bracelet without hesitation.

✨ Features

🎫 Fast Check-in System

• QR Code Scanning: Instant validation of student tickets using specialized scanners or mobile devices.
• Real-time Feedback: Immediate visual and audio feedback via WebSocket connection.
• Race Condition Prevention: Database-level locking to prevent double entry.

🛡️ Security & Access Control

• Staff Verification: PIN-based authentication for sensitive staff actions.

• Role-Based Access: Strict separation of student and staff capabilities.

⚡ Architecture & Performance

• Standalone Ably Worker: dedicated process for handling high-concurrency real-time events, decoupling check-in logic from the main web server.
• Neon Serverless Postgres: Auto-scaling database handling thousands of concurrent read/writes.
• Edge-Ready: Optimized for deployment on edge networks with distributed real-time messaging.

🛠️ Tech Stack

Core

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

Real-time & Data

• Ably - WebSocket infrastructure for sub-millisecond updates.
• Neon PostgreSQL - Serverless database.
• Drizzle ORM - Database access.
• Better Auth - Secure authentication.

☁️ Infrastructure

• Railway - Production deployment for Web and Worker.

UI / UX

• Tailwind CSS 4 - Next-gen styling engine.
• Radix UI - Accessible primitives.
• Framer Motion - Smooth interactions.

🚀 Getting Started

Prerequisites

• Node.js 20+
• Neon PostgreSQL Database
• Ably Account for Realtime Messaging

Installation

1. Clone the repository:

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

2. Install dependencies:

   npm install
   # Install worker dependencies
   npm run worker:install

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

   cp .env.example .env

   Required: DATABASE_URL, ABLY_API_KEY, BETTER_AUTH_SECRET

4. Run Development Environment:

   Start the Next.js app:

   npm run dev

   In a separate terminal, start the Real-time Worker:

   npm run worker:dev

---

Developed with ❤️ by Cao Cự Chính