Live Analytics

The Grind

A LoL eSports analytics platform for a competitive team — tracking player performance, scouting opponents, and visualizing trends with data from the Riot Games API and Prime League.

Players Tracked

500+

Matches Analyzed

2K+

Rank Snapshots

24/7

Bot Uptime

LP History

Source Code

Leaderboard Preview

#SummonerTierLPΔ

1miseerxDiamond847+24

2IN ThoribusEmerald721+15

3lennkeyEmerald654-8

4rurfyPlatinum512+31

System Stack

Frontend

Next.js 15React 19Tailwind CSS 4Chart.js

Backend

Next.js API RoutesPostgreSQL (Neon)Riot Games API

Data

Cheerio (web scraping)CSV export

Infrastructure

VercelTypeScript 5

About

The Grind is a full-stack analytics platform built for Infinity eSports, a competitive League of Legends team. It scrapes match data from the Prime League website, pulls player stats from the Riot Games API, and visualizes performance trends to support team strategy.

Features include a live leaderboard with rank snapshots, player performance graphs (Chart.js), opponent scouting with champion and ban trend analysis, and CSV data export. The platform is built with Next.js 15 App Router, React 19, TypeScript, and PostgreSQL (Neon) — deployed on Vercel.

Key Learnings

→Building API routes that aggregate and compare data from external APIs

→Web scraping with Cheerio for match schedule and team data

→Data visualization with Chart.js and react-chartjs-2

→PostgreSQL with Neon serverless driver for rank snapshots

→TypeScript strict mode in a full-stack Next.js app