01Overview
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.
02The Problem
I got annoyed as a viewer. I'd pay to join a mabar VIP session on a big Mobile Legends stream and then have no idea if I was 3rd or 30th in line. Streamers and moderators track the queue by hand, on paper or a spreadsheet, so nobody watching can see it and chat fills up with "kapan main aku?". The hard part was not the queue itself but making it transparent: everyone, including the viewers, sees the same order at the same time.
03Who Uses It
A few friends who stream Mobile Legends run their mabar VIP sessions on it. It is built only for Mobile Legends streams.
04What 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
05Technical 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