Overview
MabarVIP is a queue management tool designed for MLBB streamers who run "Mabar VIP" sessions — where viewers join games for a fee or donation. It replaces pen-and-paper tracking with a real-time, interactive system that streamers, moderators, and viewers can all use simultaneously.
The Problem
During live streams, streamers manage a flood of viewers wanting to play. Someone donates big — they should go first. Someone paid for 3 matches — you need to track remaining rounds. Moderators manually note names on paper or spreadsheets, viewers can't see the queue, and the chat explodes with "kapan main aku?" every 30 seconds. It's chaotic, unfair, and kills the stream's momentum.
What Was Built
A full queue management platform with three interfaces:
- — Streamer Dashboard — create sessions, add players, manage the dual-lane queue with drag-and-drop, track rounds per player, and share public links
- — Dual-Lane Queue — Fast Track (donors/VIP) always floats to the top, Reguler fills below. Both follow FIFO within their lane. Streamer can manually override for fairness
- — Mobile Viewer Page — public URL optimized for phones. Viewers see the live queue, who's playing, who's next, with visual badges for Fast Track so the chat knows why someone got priority
- — OBS / TikTok Studio Overlay — transparent browser source showing “Now Playing” and “Next Up” with real-time SSE updates. No refresh needed
- — Round Tracking — players with multiple matches stay in “playing” until all rounds are done. “Selesai” decrements the count; “Skip” bumps them to the back of the queue
- — Real-time Updates — Server-Sent Events push queue changes to all connected viewers and overlays instantly
Technical Notes
- — Stack — Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS v4, Drizzle ORM, SQLite (better-sqlite3)
- — Auth — better-auth with email/password, bcrypt hashing, session-based
- — Real-time — SSE with in-memory connection manager, auto-reconnect, 50 clients/session limit
- — Design — Clean Neobrutalism (black + white + yellow), mobile-first viewer page
- — Self-hosted — co-hosted with BukuBengkel and Open Loyalty on the same VPS via PM2 + Caddy