Case Study

Case Study: RocketMath Web Application Development

RocketMath Web Application Development

RocketMath is a math learning game for young children. The site has been ported from an iOS application. Everything but the gameplay, graphics and flow were changed when ported to the web-based version. TopFlight built an API to handle managing subscriptions, sales, game user data, in a way that is fit for use by individuals (parents + child) and schools (several teachers + scores of students) alike. It also serves the web pages themselves for the administration dashboard

  • Platform:
    Web
  • Technology Stack:
    TypeScript,  Webpack, Laravel, CSS, HTML, JavaScript, MySQL, Stripe integration.

Development Work

Our initial task was to copy the graphics, gameplay and flow of the game as presented in the iOS application. We then went to work creating an API that would manage the subscriptions, sales and user data for the game. This involved the creation of four different types of users for the system including admin, owner, manager and student. The admin has full control over every aspect of subscriptions and users and can view any game progress or account information in the application. The owner is the account that has purchased one or more subscriptions and can assign managers. The manager is often a teacher or administrator from the school. The student is the one that plays the game and can track their progress visually.

Next, we created a sales and subscription management system for the application. This involved enabling an account to pay for subscriptions on a monthly or yearly basis. One price gives access to all the features of RocketMath. In order to accept payment we had to integrate a payment gateway from Stripe. During this process were gave the owner the ability to set renewal to automatically occur at the end of a subscription period.

We made use of cloud based data storage. Because the game is browser based we use JSON/XML endpoints. We used AJAX to make asynchronous calls to the server for the data we needed to populate the front end.

The front end utilized the images from the iPad version of the app. This was to insure that the web-based game is as clear and crisp as possible on the screen. We had to implement animations in a way that allowed for the pages to load quickly. Performance was a critical factor we considered when porting this application from iOS. Buttons were presented so the student could use those to present their answers. At the same time, the 10-key was enabled to make it even easier for the students to answer the problems. This is to make the interface comfortable to use for all users.

Toolset

We used a standard, but efficient set of tools for the web application. Webpack was used to bundle the components of the application. The Laravel PHP framework was used for the main codebase that runs the entire application. Javascript was used for all of the interactivity while HTML and CSS were used to display both the game interface and the admin interface.

IN THE END…

The port of the game from iOS to the web came out extremely well. The number of hours for this was estimated prior to starting the project and was set at 900 to 1200 hours.  TopFlight completed the port of the game within that estimated number of hours. The gameplay is exciting and engaging. The users appreciate the clean front end and extremely fast loading time for all aspects of the game.

Topflight Apps develops ecommerce web and mobile applications that solve our clients’ problems in the most multidisciplinary and innovative ways possible. Contact Topflight today and we’ll discuss your next project!