Drafter.lol

Overview

Drafter.lol is a real-time drafting and analytics platform for League of Legends teams, coaches, and broadcasters. It lets you run professional pick/ban drafts, support formats like Fearless, and then review the results with structured analytics instead of screenshots and spreadsheets.

My role & scope

I owned the full stack: Next.js app router front end, a dedicated Socket.IO real-time service, the database schema and queries, and the deployment story. The project went from scratch to a production-ready draft tool in roughly 8–10 weeks.

Under the hood

• Next.js 15 + React 19 for the main web app, using the app router for SEO-friendly marketing pages and room/analytics views.
• Socket.IO + Express in a separate service to handle low-latency draft rooms, user connections and event streams.
• PostgreSQL + Drizzle as the shared relational store for drafts, users and analytics queries.
• Redis + rate limiting to protect custom analytics endpoints, especially expensive, ad‑hoc queries.

Interesting challenges

The hardest part was getting real-time rooms to feel rock solid under many concurrent users: handling reconnects, enforcing who can draft, and keeping room state consistent between the Socket.IO layer and the database. I designed a dedicated room handler that owns lifecycle and validation logic, plus a monitoring namespace that exposes live room stats and memory usage for ops.

What I’d improve next

The next step would be adding stronger end-to-end typing between the front end, Socket.IO events and database layer, plus automated tests around the critical flows: room lifecycle, draft events, and rate‑limited analytics APIs.