04 / 08 · Gaming · Real-time
GKEC Esports Platform
Tournament operations, transfer market & automated Canvas graphics engine
Overview
An institutional gaming platform powering the GKEC Esports community across competitive seasons. The platform manages club profiles, captain assignments, and up to 30 players per roster with profile locking and contract validity tracking. A custom client-side HTML5 Canvas graphics engine programmatically renders branded 12-man squad lineups, transfer announcement banners, fixture VS cards, and MVP highlight graphics on the fly with server-side base64 proxying.
- Next.js
- React 18
- Express.js
- MongoDB Atlas
- Mongoose
- Cloudinary
- HTML5 Canvas API
- Tailwind CSS
- Players
- 2,400+
- Graphics
- Canvas, live
- Access tiers
- Admin · Captain · Player
- Uptime
- 99.9%
Engineering decisions
HTML5 Canvas Graphics Engine
Custom programmatic poster engine rendering high-fidelity 12-man team squad graphics, transfer cards, and MOTM highlights directly in browser memory.
4-Tier RBAC & Contract Locks
Fine-grained permissions segregating Super Admin, Match Referees, Club Captains, and Players with immutable roster locks during active tournament stages.
- 01
Granular 4-tier Role-Based Access Control dividing Super Admin, League Officials, Club Captains, and individual Players.
- 02
Dynamic HTML5 Canvas graphics engine that generates 12-man squad posters (Showtime, Star, Iconic categories), transfer cards, and MOTM posters.
- 03
Server-side image proxying and Cloudinary redirect pipeline solving mobile Safari canvas cross-origin taint issues.
- 04
Automated tournament lifecycle state machine handling single and double-elimination brackets, match score submissions, and points table calculation.
- 05
Player transfer market with public transaction history, contract expiration locks, and a searchable free-agent scouting pool.
Screens & Walkthrough
Production gallery(4 high-res captures)
Next project