How Parser created its own game for the 2022 World Cup

The motivation

At Parser, we are always looking for a way to provide an amazing work environment, and with the Qatar World Cup we had the opportunity to provide a fun and great experience during the cup, offering a game where Parser and ParserX people can participate, have fun and get a great prize. So, why not?

The challenges

The main challenge was simple: build and deliver the game for all Parser and ParserX players in two months. The challenge included not only create all the strategy to deliver it to players internally, but also create the user experience for the game, develop front-end, back-end, and the infrastructure on the cloud provider. It was a lot of work and sounded hard to achieve, but we decided to face this challenge.

The game

After two months of hard work, we did it. Parser World Cup Game was delivered with amazing features for players and administrators, with a great user experience for all Parser and ParserX people. Below we’ll show some of the main features of the game.

Two-Factor authentication

The game implements the 2FA (Two-Factor Authentication) standard, where players use the Google Authenticator app in their mobile devices to get codes to get access to the game after the login.

Version control

To deliver new version of the game for all players, the game provides a notification feature which is triggered by the administrator through the settings screen. This is important to keep all players updated with the last features developed.

Game board

This is the main feature for players. In this screen, players can access all the world cup matches, grouped by stages (Groups Stage and Playoffs). Players can estimate the scores for each match and see their scores, in a very intuitive and immersive environment.

Predictions

Each player create their own scenario for playoffs, based on the Round of 16 created by the administrator. The game automatically predict the next stage based on players bets till the grand final.

Ranking

In the ranking screen, all players are able to see all the scores and each player can find his own score using the search bar.

Administrative features

For administrators, the game also provides some important features for this first version such as: Official results screens (Groups Stage, Playoffs and Final Scores), statistics and more.

Official results

In the Groups Stage, Playoffs and Final Scores screens, administrators can update all the scores with the official results during the World Cup, in a very intuitive experience. After providing the scores, admins can click in the “Calculate Points” button, and the game will calculate the scores for all players based on the rules defined, in seconds, updating automatically the scores for each player in real-time.

Statistics

In this screen admins can see some important information about the game, like active players, total of bets, etc. It’s important for admins to monitor some metrics for the project.

Settings

In this screen, admins can block/unblock access to score estimation for all players in the game by stage. Admins can also send a notification of a new version of the game, as showed before.

How we built the game?

Even though we had only 2 months to deliver everything, one of the most important requirements was to keep quality in terms of technology, best practices, etc. To achieve it, we used an amazing stack of technologies to build the game.

The cloud infrastructure

All the infrastructure of the game is provided by AWS. It means that the front-end hosting, simple authentication, two-factor authentication, serverless back-end, databases and other resources are being provide by this cloud provider. For this case, we adopted was the serverless approach, which brings great advantages in terms of time to develop, scalability and maintainability.

Diving into the front-end

All the front-end of the game was built in React, which we could use the concept of SPA (Single Page Application), where all the game runs in a single page, and the components of this page are refreshed dynamically.

The game frontend is composed by a lot of components. So, to keep the maintainability of the codebase, having a centralised state of all the game, where the components automatically reflects the changes of this state, we used React Redux.

To have a good separation of responsibilities between the React code and styles (CSS), and to provide a dynamic way to apply styles on the components of the game, we used Styled Components.

To provide a real-time communications between the front-end and the back-end (to send notifications for players for example), we used WebSockets.

We also used Typescript on top of Javascript. It brings great advantages like strong typing, great object-oriented features, type-inference, great support for intellisense, and some validations in design-time, which brings more velocity to the development.

The front-end is hosted in a S3 bucket and exposed to outside through AWS CloudFront.

Diving into the back-end

Following the server-less architectural approach, we are using some AWS features to develop the back-end of the game, described below.

To provide data for the front-end, we implemented Restful APIs. The APIs are being exposed by API Gateways. There are two different gateways, being one to expose the restful APIs and one to expose WebSockets communication between the front-end and the WebSocket Lambdas.

All the APIs were implemented using AWS Lambdas and Node.js. Each lambda represents a single service and expose an API endpoint for the API Gateway which exposes for the front-end. In addiction, we are using WebSocket Lambdas to implement services exposed by the WebSocket API Gateway.

For authentication and two-factor authentication integrated with Google Authenticator app, we are using Amazon Cognito.

The game’s data is being stored in AWS DynamoDB tables. This noSQL database provided by AWS brings flexibility for this scenario, where all Lambdas consume data from an specific table.

Adding an IAC (Infra As Code) approach to the project, we are using the Serverless Framework. This technology allows developers to define all the infra based on many cloud providers (in our case, AWS), bringing agility to manage and maintain the game’s infrastructure.

At last, but not the least, we are using YUP to validate the request made against the game’s APIs. YUP help us to easily validate the body request, providing friendly messages for consumers. You can see an example of its implementation below:

Next steps

As you can see, we developed great features and delivered a great experience for Parser players. But it’s not enough. We are planning to improve the game continuously, delivering more features. Below we have some important points to be considered for next versions.

Adapt the game for more competitions

We are planning to adapt the World Cup Game to cover not only world cups, but all kind of championships like Champions League, NBA Finals, and more, turning the project into a platform where admins will be able to create championships, providing all the information needed in a very flexible environment.

Other improvements

Other great improvements in our backlog include a separated app specific for championships administration, mobile apps, accessibility and more.

Conclusion

The game was a great successful initiative, having more than 4300 match estimations and a massive participations from Parser and ParserX people, receiving a great positive feedback. Below we have a second teaser of the game, for playoffs stage.