Real-Time Multiplayer Quiz Platform

Context

A client needed a platform for hosted trivia sessions — both in-person events and online multiplayer. Two game modes were required: a host-controlled Classic board (Seen-Jeem style) and a live Arena mode where players join by PIN and compete in real time. The platform needed Arabic-first UI with RTL support, a question CMS, and a token-based monetization model.

Constraints

• Arena gameplay required sub-second question broadcast and answer collection across all connected players — naive server-action round-trips were too slow.
• The admin CMS needed full RBAC: question management, moderation, analytics, payment history, and platform settings.
• Arabic RTL had to be a first-class concern, not an afterthought — the primary audience was Arabic-speaking.
• Payments needed to be handled via Moyasar with idempotent webhook processing to prevent double-crediting tokens.

Approach

I built the platform on Next.js 15 App Router with Supabase as the backend. For latency-critical Arena gameplay, I moved from sequential server actions to atomic PostgreSQL RPC functions that executed game state transitions in a single round trip. Supabase Realtime channels broadcast state to all connected players. The admin CMS used middleware-enforced RBAC with a DB-level `authorize_admin` RPC for service-role escalation.

Key decisions

• Migrated Arena game actions to atomic Postgres RPCs (`arena_atomic_rpcs.sql`) after profiling showed that sequential server-action chains introduced 300–600ms of unnecessary latency per turn.
• Used `next-intl` with locale-based routing and a root layout `dir` attribute for RTL — applied globally so every component inherited direction without per-component handling.
• Implemented idempotent webhook handling for Moyasar by storing payment IDs and checking before granting tokens, preventing double-crediting on duplicate deliveries.
• Modeled token grants as separate RPC calls (`token-grant RPCs`) so purchase verification and balance updates were atomic at the DB level.

Tradeoffs and risks

• Pushed business logic into Postgres RPCs for performance, accepting that some game rules live in the database layer rather than the application layer — a tradeoff for response time over conventional separation of concerns.
• Supabase Auth's built-in OTP only supports a limited set of SMS providers — none available in Saudi Arabia at the right price point. Built a custom OTP flow using a Supabase Edge Function to handle token generation, expiry, and verification, routing SMS delivery through an external provider directly.

Outcomes

• Arena multiplayer latency dropped significantly after migrating to atomic Postgres RPCs, eliminating the sequential server-action bottleneck.
• Shipped full Arabic RTL + English LTR support across 18 feature modules with a single locale-routing setup.
• Token purchase flow with idempotent webhook handling processed payments correctly under duplicate-delivery conditions in production.
• Admin CMS covered question bank, moderation, analytics, communications, and payment management — all under RBAC.

Artifacts

Technology