Problem: There was a need to remedy the lack of user-friendliness, validation and insurmountable bugs present in the “old admin tool” written in AngularJS. There was no module planning, information architecture design and documentation involved prior to its conception for it was hurriedly put together due to demanding internal needs.

Solution: Putting proper processes in place for the handling of feature requests, development of new components, expansion of current modules and bug fixing (reported from JIRA). This called for a revamp of the front-end UI, the use of a new framework and JS library for better scalability and readability. Internal APIs were created to promote reusability not only in UI components, but logic in methods as well.

Written in ReactJS / JSX
Redux for data-handling and dev tools
Single-page app using React-Router
Webpack for bundling and compiling
Utilizes NPM packages
JIRA API ready

GitLab as SVN
JSON-based REST API from back-end services
ECMAScript 5 for easy readability
Bootstrap as front-end framework base
Semantic versioning for updates and patches
Deployment via Jenkins

Store
The Store enables the creation of catalogs used for display on each game’s Store. Each catalog is a tab in the Store front and can be used for A/B Testing. Product Managers are the end-user, and they configure products and product meta: pricing, priority, quantity and other meta thru the Catalog Editor. Standard decorators and components are easily added or removed. In addition to GUI for the many decorators available, JSON Editors (ACE) are put in place for maximum flexibility in terms of configuration and back-end developer checking.

Users
The Users module enables the searching of players by email, unique device ID, user ID or username. It then displays player data such as basic profile details, game level, experience, party, item inventory and transaction history. This acts as the user management module where the admin can reset a player’s password, edit inventory, export the inventory and search for transactions. Customer service representatives are the end-user, and they use this module the most for game and post-purchase customer service support. Of course, all data tables include filtering, sorting, searching by keywords and export to CSV.

Error Reports
An indispensable module, Error Reports aids engineers and tech leads in ensuring quality throughout the run of various games. This module displays errors from the game Server, and both iOS and Android platforms. Main functionalities are the ability to query error reports by keywords, sorting by date, build version and report count, and adding notes such as JIRA ticket and status. More information is expanded in a modal where each each statistic shows the more specific detailed reports. Here developers can easily copy callstack information with just a click of a button. This module was designed to integrate with the JIRA API for its next version.

There are other modules not listed in this project profile such as CMS Images Library which manages the in-game images, Deep Links which are used for interstitials for pop-up promotions and Promo Codes for the gifting of items to players from customer service.

Before developing this, I never heard of ReactJS nor have I had experience with the many new web technologies this tool used. Although challenging, it was an enjoyable ride full of learning. This project taught me I can learn anything as long as I don’t give up.

The screenshots presented here are from the actual system while it was used in the operation of the mobile game, Iron Maiden: Legacy of the Beast. As of Sept 2016, the game is still present in the App Store and Play Store despite Roadhouse’s unfortunate closure.