---
title: "Arena Academy"
url: "https://ridwaanhall.com/projects/mlbb-academy"
markdown: "https://ridwaanhall.com/projects/mlbb-academy.md"
summary: "A Next.js 16 app for Mobile Legends players: hero stats, counters and builds, pro-league standings, a draft assistant and free OBS broadcast overlays."
---

# Arena Academy

> A Next.js 16 app for Mobile Legends players: hero stats, counters and builds, pro-league standings, a draft assistant and free OBS broadcast overlays.

- Category: 
- Status: Maintenance Support
- Started: June 21, 2026
- Built with: Next.js, React, TypeScript, TailwindCSS, Cloudflare Workers
- Live: https://arena-academy.rone.dev

## About

### The problem

Mobile Legends players who want to improve piece together hero stats, counters, builds and their own history from several apps and community sites that disagree with each other.

### The approach

Arena Academy is one Next.js 16 application on top of the Rone Arena API. All traffic goes through a single client module, so no page or component ever calls the game API directly, and a two-tier cache sits in front of it. It is deployed to Cloudflare Workers through the OpenNext adapter, with R2 holding the incremental cache.

- A hero database with eight tabs: overview, stats, skill combos, counters, compatibility, trends, builds and guides.
- A leaderboard sortable by win, pick and ban rate, with a rank-tier filter and a counter-hero column.
- A signed-in account page, using the game's verification-code login, with ranked history, match breakdowns, a frequent-hero filter and a friends list.
- An academy reference for roles, equipment, battle spells, emblems, rank tiers and patch history, plus community guides, a win-rate calculator and an IP lookup.
- Esports: schedules, standings, match stats and a playoff simulator for the Indonesian and Philippine pro leagues.
- A draft assistant that reads live win, ban and counter data for the bans worth spending and the safe first picks, with a draft simulator.
- Free broadcast overlays for OBS, run from a control panel: pick and ban, team versus team, a live scorebar, a hero showcase, player cards and a standby screen.
- A hero wallpaper gallery.

### The result

Live at arena-academy.rone.dev in English, Indonesian and Russian, in a dark Geist design with light mode on request. The source is private.

## Features

- **Advanced Hero Analytics**: Browse heroes with role/lane filters and view deep statistics including counters, skill combos, and trends.
- **Global Rankings & Leaderboards**: Sortable hero leaderboards by win, pick, and ban rates with precise rank-tier filtering.
- **Authenticated Player Profiles**: Secure login to view personal ranked history, detailed match breakdowns (KDA, damage share), and friends lists.
- **Academy Reference Hub**: Complete catalogs for equipment, spells, emblems, and rank tiers with community-driven guides.
- **Player Utility Tools**: Integrated win-rate calculator, IP geolocation lookup, and community hero popularity polls.

## Tags

MLBB, nextjs, React, TypeScript, tailwindcss, cloudflare-workers, API Integration, gaming-stats

## Elsewhere

- This page for people: https://ridwaanhall.com/projects/mlbb-academy
- Index of every page as Markdown: [llms.txt](https://ridwaanhall.com/llms.txt)