~/ilker-balcilar
ilker-balcilar/projects/prosbase· Web App

Web App

Prosbase


A League of Legends esports platform I built for a client and rebuilt from the ground up for v2 — leaderboards, pro builds, live game tracking, and esports data in one place.

BunTurborepoHonoReactViteTailwind CSSPostgreSQLDrizzleMongoDBRedisBullMQRiot APITwitch APIDigitalOceanDocker

Prosbase Leaderboard

Prosbase started as a client project and grew into something I ended up rebuilding entirely. The client wanted a single place where League of Legends fans could follow everything about pro players — rankings, builds, teams, and live games — instead of jumping between half a dozen fragmented sources. This is the story of v2: a full rewrite that took the original idea and rebuilt it for scale, speed, and long-term maintainability.

Client Goals

The brief for v2 was to keep the product my client already loved, but fix everything that held it back:

  • Consolidate the data: Bring leaderboards, pro builds, teams, leagues, streams, and live games into one coherent platform.
  • Make it fast: The original version got sluggish as the data grew. v2 had to stay quick even with heavy traffic and constant data updates.
  • Keep esports data fresh: Rosters, teams, and leagues change constantly — the platform needed a reliable, automated pipeline instead of manual updates.
  • Give the client control: A proper admin dashboard so they could manage players, images, and content without touching code.

My Solution

I rebuilt Prosbase as a Bun + Turborepo monorepo with three deployables sharing typed code: a Hono API, a React + Vite web app, and a background worker. Player and esports data lives in PostgreSQL (via Drizzle ORM), match history in MongoDB, and Redis + BullMQ power both caching and the sync queues. Everything ships in Docker on DigitalOcean.

Real-time Leaderboards

Dynamically updated leaderboards give instant access to player rankings across regions, filterable by country, team, league, server, and role. Rankings are pulled from the Riot API and cached in Redis, with pagination pushed down to the database so the page stays fast no matter how many players are tracked.

Prosbase Leaderboard

In-Depth Player Profiles

Each player profile brings together peak rank history, team affiliations, tracked accounts, and season-by-season records — all loaded concurrently so the page renders without waterfalls.

Prosbase Player Profile

Live Game Tracking

When a pro is in a game, Prosbase shows the live match in real time — champions, runes, and matchup context. A 30-second Redis cache and batched database lookups keep it responsive even when many players are in game at once.

Prosbase Live Game

Strategic Pro Build Analysis

Users can study the exact champion builds and rune setups pros run in the current meta — a fast, sortable table backed by a trimmed query and memoized rows so it stays smooth while scrolling.

Prosbase Probuilds

Teams, Leagues & Champions

Team, league, and champion pages let users follow rosters, schedules, and results. All of this esports data syncs automatically from Fandom Wiki through a dedicated BullMQ worker — leagues, teams, and players each sync on their own loop for reliability.

Prosbase Teams and Leagues

Pentakills Hall of Fame

A curated feed of pro pentakills with highlight videos, managed by the client from the admin dashboard.

Prosbase Pentakills

Streamer Hub & Overlay

Prosbase is also a hub for discovering League of Legends streamers, integrated with the Twitch API to show who is live and where. On top of that, I built a broadcast overlay streamers can add to their scene and a Tauri desktop companion for the client's own workflow.

Prosbase Streamer Hub

Conclusion

The v2 rewrite turned Prosbase from a promising prototype into a fast, maintainable product the client can grow. It brought real-time data, an automated esports pipeline, a full admin dashboard, and a monorepo architecture that keeps the API, web app, worker, overlay, and desktop app all in sync. I'm always open to collaborating on ambitious projects like this one — feel free to explore my portfolio and reach out.

highlights


  • Full rewrite into a Bun + Turborepo monorepo: Hono API, React/Vite web, and a background sync worker
  • Real-time pro player leaderboards backed by the Riot API and cached with Redis
  • Live game tracking with a 30s Redis cache and batched queries to stay fast under load
  • Esports data (leagues, teams, rosters) synced from Fandom Wiki via a BullMQ worker
  • Streamer hub + Twitch integration, plus a broadcast overlay and a Tauri desktop companion