ridwaanhall Profile Photo
Ridwan Halim

MLBB Academy

A full-stack Next.js 16 application for Mobile Legends: Bang Bang featuring comprehensive hero stats, global rankings, and authenticated account history.

Completed
Back Back
Next.js Next.js
React React
TypeScript TypeScript
TailwindCSS TailwindCSS
Cloudflare Cloudflare
MLBB Academy - mlbb_academy_account.webp
MLBB Academy - mlbb_academy_home.webp
MLBB Academy - mlbb_academy_heroes.webp
MLBB Academy - mlbb_academy_rankings.webp

4 images • Use arrows or dots to navigate

·

Description

Pulls live data from the MLBB Public Data API to present a fast, dark-themed interface built for players who want actionable gameplay information in one place.

Features a comprehensive hero database with 8 specialized tabs covering overview, live stats, skill combos, counters, team compatibility, usage trends, recommended builds, and community guides.

Includes a full global leaderboard sortable by win rate, pick rate, and ban rate, enhanced with rank-tier filters and a dedicated counter-hero column.

Provides an authenticated account profile portal via secure send-VC login, allowing users to view their ranked history, detailed match breakdowns, and most frequent heroes.

Houses an extensive Academy Reference catalog detailing game roles, searchable equipment, battle spells, emblems, and game version history.

Offers specialized utility tools, including a win-rate calculator, IP geolocation lookup, and interactive community ratings polls.

Built on a robust Next.js App Router architecture with a unified client module handling all API traffic and leveraging a two-tier caching system for maximum performance.

Styled exclusively in a sleek dark mode using Vercel's Geist design system and Tailwind CSS v4, with full internationalization (i18n) support for English, Indonesian, and Russian.

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.

Tech Stack

Next.js
Next.js React framework for production-ready web applications
React
React JavaScript library for building user interfaces
TypeScript
TypeScript Typed superset of JavaScript for better development
TailwindCSS
TailwindCSS Utility-first CSS framework for rapid UI development
Cloudflare
Cloudflare Speeds up sites and keeps them safe with CDN and security
Source Code Live Demo