Dunia Games - MLBB Rankfolio

MLBB Rankfolio asks one simple question to the player of Mobile Legends: Bang Bang, "Siap lihat nilai rank, koleksi, dan pencapaianmu jadi satu story?". So instead of only knowing their own rank, the player can see how much their whole account is actually worth, and share it.

It starts from the form, which is divided into three sections, namely Akun (the name of the account, how long they have been playing, the number of the matches, and the win rate of all seasons), Kelengkapan (the current rank, the highest rank, the credit score, and the title of MLBB Rising Open), and Aset & Koleksi (the number of the heroes, the progress of the emblem, the diamonds, and the collection of the Legend, Grand, and Exquisite skins).

The challenge here is that not every player knows where to find all of that data inside the game. That is why every field has its own help, and when it is clicked a modal appears with the screenshot of the game together with the step by step of where to look for it, so the player can fill the form without having to guess.

After the data is complete, the result is presented as a story that can be played slide by slide, starting from the archetype of the player (for example Sultan) together with the estimated value of their account and how rare that pattern is, until the slides of their achievement, their rank journey, and their collection. Every slide can be downloaded as an image so it can be shared to social media, and it is closed with the recommendation to top up.

My job is to create this feature, both slicing (changing the image UI in Figma into html, css, and js code) and also integration (consume API, form validation of every section, the state of the result, empty state, error state, etc.), including generating the image of the result so it can be downloaded by the player.

NB: Source code cannot be shared because it is a company asset.