Dunia Games - Detail Article Revamp

Dunia Games is not only a place to top up a game, it is also a place to read, starting from the news, the tips and tricks, until the review of a game. Therefore the detail of the article was revamped, so it is more comfortable to read, and at the same time it can bring the reader to the other content and to the product of Dunia Games.

There are many sections that I made on this page. It starts from the header of the article, namely the breadcrumb together with the category of the article, the title, and the cover image. Then the body of the article itself, which can contain the sub heading, the image, and also the "Baca Juga" that brings the reader to the other related article in the middle of their reading. And because an article can be long, it is separated into several pages with its own pagination.

On the side of the article, there is the information of the author together with when it was published, the actions for the reader such as the like, the bookmark, and the share, the banner to top up, and also the tags of the article so the reader can explore the other articles with the same topic.

After the article is finished, the reader is not left alone. There is the "Top Up Sekarang" carousel that offers the product that is relevant with the article they just read, complete with the mark of the product that has a promo, the shortcut to the next article, the list of the related articles, the comment section, and the promo carousel at the bottom of the page. Between all of that there are also the slots for the advertisement, which have to be placed without breaking the flow of the reading.

My job is to create this page, both slicing (changing the image UI in Figma into html, css, and js code), and also integration (consume API of every section, the pagination of the article, the state of the like and the bookmark, the carousel, empty state, error state, etc.).

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