MLBB CounterDraft

Important

This project is discontinued because there is no official MLBB API available for stable, fully trusted matchup data. The codebase remains here as an open-source reference for anyone who wants to study or continue the architecture.

MLBB CounterDraft is an open-source Mobile Legends: Bang Bang draft assistant built for counter picks, ban planning, and team composition analysis. The project combines live Moonton-backed hero data, local fallback snapshots, and curated hero metadata to produce fast and explainable recommendations.

The codebase is intentionally written to be easy to continue:

• clear file boundaries
• pure scoring logic
• separate sync, catalog, and UI layers
• tests around hero mapping and recommendation behavior
• straightforward TypeScript instead of hidden abstractions

The aim is simple. Another developer should be able to clone the repo, read the structure, and understand where to make changes without reverse engineering the whole app.

What it does

• recommends counter picks from the current draft
• highlights synergy and compatibility pressure
• keeps ranking math separate from data fetching
• falls back to local snapshot data when live sync is unavailable
• exposes sync health and data quality checks for the hero catalog

Data source

The app reads live hero records from a Moonton-backed sync endpoint and combines them with local fallback snapshots plus curated metadata.

Current live source used by the sync layer:

• https://api.gms.moontontech.com/api/gms/source/2669606/2756567

Important notes:

• the recommendation engine does not fetch live data itself
• the scoring engine stays pure and only consumes prepared hero input
• live data and the official website may differ, so this project should be described as a derived analytics tool, not a perfect copy of the official site

Code quality and maintainability

The codebase is designed to stay developer-friendly:

• data and logic are split by responsibility
• hero aliases are centralized instead of duplicated across files
• tests cover the fragile parts of the project
• the scoring engine does not depend on UI state or network calls

If you need to change hero identity, aliases, lane mapping, or matchup data, start in src/data and src/lib/moontonSync* before touching the scoring engine.

Architecture

• src/lib/recommendationEngine.ts stays math-only
• src/lib/moontonSync.ts and src/lib/moontonSyncServer.ts handle data sync and normalization
• src/data/heroes.ts contains the curated hero catalog
• src/data/heroMeta.ts keeps alias and hero-id mapping logic
• src/lib/moontonSyncHealth.ts reports sync health and data-quality issues

See docs/ARCHITECTURE.md for a deeper technical overview.

Tech Stack

Framework and core

• Next.js 15 App Router
• React 18.3.1
• TypeScript 5

Styling and UI

• Tailwind CSS
• Framer Motion
• GSAP
• Lenis
• Three.js

Testing

• Vitest

Getting Started

For full setup steps, see INSTALLATION.md.

Quick start

npm install
npm run dev

Open http://localhost:3000.

Test

npm test

Build

npm run build

Project Structure

src/
  app/         Next.js routes and metadata
  components/  UI blocks
  data/        hero catalog, aliases, fallback data
  lib/         sync, scoring, helpers, tests
  types/       shared TypeScript types
docs/          project documentation
public/        static assets and screenshots

Contributing

Please read CONTRIBUTING.md before opening a pull request.

Security

Please read SECURITY.md for disclosure guidance and project security boundaries.

Changelog

See CHANGELOG.md for notable changes.

License

This project is released under the MIT License. See LICENSE.