01The brief
Turn Twitch streamers into collectible trading cards, let players open packs, build collections, and battle each other head-to-head in real time, then wrap the whole thing in a sustainable, monetizable live-service product. No shortcuts: real-time card reveals had to feel instant, the pack economy had to be abuse-proof, and the platform had to survive a traffic spike without falling over.
Waffle Samurai built CreatorBattl end-to-end: product, backend, real-time infrastructure, payments, and the supporting tooling that keeps a live-service game growing.
02What we built
Pack economy & collection game. Cards are generated from real Twitch data (follower growth, peak viewers, clip virality, stream loyalty), pulled by an in-house data gathering tool built on the Twitch API and normalized into stats and rarity tiers from Common to Legendary. Players open packs, build collections, and trade with each other on a server-authoritative economy with cooldowns, daily caps, and race-condition-safe pack allowances.
1v1 Pack Battle. The signature feature: two players open packs simultaneously and watch each other's cards flip live over WebSockets, best-of-10 rounds, highest-rated card wins. It's the kind of feature that lives or dies on latency, so it was built on a dedicated real-time event layer rather than polling.
A real monetization stack. Quarterly and monthly (£2.50/mo) Battle Pass subscriptions, an ad-free tier, an affiliate program with Stripe Connect payouts, sponsor contracts, and an ad-reward system, all running through Stripe, with an admin back office to manage every lever.
03The stack
-
Frontend
Next.js 16 / React 19, TypeScript throughout, Tailwind CSS v4, Zustand for state, Framer Motion for the card-reveal animations that make pack openings feel good. Real-time updates via Laravel Echo + Pusher-protocol WebSockets. PostHog wired in client and server side for product analytics.
-
Backend
Laravel 13 on PHP 8.3, with Sanctum powering a guest-first auth flow (players start collecting instantly via a UUID, no signup wall, then merge into a full account on login) alongside Twitch and Discord OAuth. Role-based access via Spatie Permissions, Swagger-documented API.
-
Real-time
Self-hosted Laravel Reverb WebSocket server broadcasting every battle event (pack opened, card revealed, round completed, opponent forfeited) over private, per-battle channels. Load-tested to ~10,000 concurrent connections on a single process, no changes required.
-
Payments
Laravel Cashier on Stripe: subscriptions, one-off purchases, and Stripe Connect for affiliate commission payouts.
-
Data
Postgres behind PgBouncer, Redis for sessions/cache/queues, S3-compatible object storage for media, JSON-columned card data so new stat sources don't mean schema migrations.
-
Infrastructure
Dual-target deployment: a self-hosted VPS as the primary, with a Cloudflare Workers/Pages hot-standby that a single KV flag can flip to in ~60ms across Cloudflare's edge network. It's a spike-mode failover that also doubles as passive DDoS protection, and every push to main deploys to both targets.
-
Growth tooling
A Remotion-based video pipeline renders pack-opening clips and social graphics straight from live production data, and a Playwright + OBS bot runs a fully automated, 24/7 pack-opening livestream on the platform's own Twitch channel: marketing content generated by the product, for the product.
-
Load testing
k6 scripts simulating the full guest-player lifecycle (register → open packs → hit cooldown → repeat) validated the platform against a phased scaling plan targeting 10,000 concurrent users, with iterative rounds of tuning across PHP-FPM workers, connection pooling, and queue concurrency.
04Why it matters
CreatorBattl isn't a demo. It's a production-grade live-service game with real payments, real real-time infrastructure, and a business back office with 19 distinct admin modules covering everything from card rarity tuning to API key management for external analytics partners. It's the kind of build where the interesting engineering isn't the pack-opening animation. It's everything underneath it that has to hold up when a streamer shows it to 50,000 people at once.
- Real-time 1v1 battles over self-hosted WebSockets, not polling
- Guest-first onboarding with zero signup friction
- Full Stripe subscription + affiliate payout system
- Dual-region failover architecture with sub-second edge switchover
- Automated video and livestream content pipelines built on top of the product's own API
- Load-tested and scaling-planned for 10,000+ concurrent users
Want a platform built with this level of engineering rigor?
Get in touch