Case Study
Overview
A browse-first Mobile Legends: Bang Bang companion — scout the hero atlas, read win/pick/ban meta, and plan draft counters by lane. A hobby build for quick scouting during ranked and MPL watch-alongs, live at dawnmate.johnmichealacera.com.
Ownership
Solo-built the full stack — Postgres-backed hero catalog, meta leaderboards, lane-based counter suggestions, and a seed pipeline that scrapes Fandom icons and loads Excel stats.
Constraints
MLBB patch data and hero rates shift often, so the app needed a repeatable seed path instead of hardcoded stats. Counter logic also had to stay lane-aware — a generic "best counters" list is useless mid-draft.
Key Decisions
Stored heroes in Vercel Postgres and built a Puppeteer + Excel seed pipeline rather than calling third-party APIs on every page load. Split the UI into atlas, statistics, and counters so each screen answers one scouting question instead of one overloaded dashboard.
Impact
Live at dawnmate.johnmichealacera.com as a working MLBB hero atlas with searchable roster, meta pulse, and draft counter suggestions — a self-directed build for practicing data seeding and browse-first UI design.
Built By
John Micheal Acera
Fullstack Engineer