Arena Academy

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.