Implementing a React Frontend for a Serious Games Startup
Case Study
Case Study
Home | Case studies | Implementing a React Frontend for a Serious Games Startup
The client was a small European startup developing serious games for training and skill development. They were already working with clients in the region, but needed assistance in accelerating development on their gamification front.
Our partner wanted to improve game performance and optimize their existing technology stack with the goal of increasing the company's capacity to develop additional games.
The client had the potential to expand their operations and output by speeding up and scaling game development, but faced difficulties stemming from the use of outdated technologies.
Backend was built on PHP and MySQL, which hindered their ability to scale and optimize their services.
Frontend was built on jQuery and HTML, which in turn slowed down development and limited their ability to work on multiple projects simultaneously.
Creating one new game per month – a significant reduction in pace from what they would be capable of otherwise, leading to an additional reduction in scalability in the long run.
Use of Jenkins, which limited their CI/CD processes. Transitioning to new technologies also required the employment or training of new personnel.
Transition from a monolithic to a more flexible and independent frontend-based architecture, where games operated as standalone applications with minimal backend reliance.
Their PHP applications were limited to only logons, game saves, and statistics, so their API also needed optimization. By fixing this, we were able to limit backend requests to a maximum of four per game, significantly improving performance.
Construction of a mini game engine, which enabled the rapid creation of new games with minimal backend dependencies. The client’s games were migrated to the new React-based mini-engine, with the backend retained only for essential API requests.
We used automated testing practices for the React components, and our QA team conducted manual testing using real-world game scenarios.
A/B testing between the old and new systems was also conducted to measure improvements in performance.
Broke down the process into four distinct phases, each building on the previous one. An Agile methodology was used throughout, with two-week sprints at a time to ensure a gradual transition to the new system.
In-depth analysis and problem identification of the client’s existing system.
Start of development of the React mini-engine and its initial testing.
Migrating a first game to the new architecture as a test.
Further expansion of development to include all previous and new games.
The client saw game development time halved from one month to two weeks per game.
Improvements to frontend also allowed two teams to work on more than one game in parallel, and the reduction in backend dependencies significantly improved in-game performance.
After moving to React, the company was able to attract more React developers, who could now effortlessly begin work on this more standardized, faster, and improved system.
For us, the transition to a React-based frontend-driven system demonstrated the efficiency of reducing backend reliance and modularizing components for faster development – something that we see often and will continue to effectively implement.
Book a free consultation. Schedule a meeting