MAG Interactive: New Leonardo

About MAG Interactive

MAG Interactive, founded in 2010, is a Swedish mobile game developer and publisher specializing in casual social games for iOS and Android platforms. The company operates from offices in Stockholm and Brighton. Its portfolio boasts over 350 million downloads across various titles, engaging more than 10 million active players monthly. MAG Interactive is renowned for its popular games such as Ruzzle, WordBrain, and QuizDuel, which have garnered a substantial global player base. The company's mission is to create games that are easy to learn but challenging to master, fostering social interaction and competition among players. MAG Interactives games include QuizDuel, Wordzee, Crozzle, Ruzzle, WordBrain, and WordDomination.

Background

The main reason for being hired at MAG was to help update the Leonardo frontend tool, which is used by the game teams and player support to create and manage our different games.

The previous version of Leonardo was a Java solution that was hard to maintain and update, so the decision was made to create a new tool from scratch.

Leonardo is a large application, with functions to handle player information, in-game offers, products, and purchases, A/B-test, game, and server settings, and a host of other things.

What I needed to do was to make the tool easier to use for all the different roles that use it, make it easier to maintain and update, and make it harder to do things the wrong way.

The application

It was decided that Leonardo should be a web application, but apart from that, I had free hands to decide how to build it. Since I had prior experience with Next.js, I decided to use that as the base for the application, as I would have access to both server and client side rendering, and I could use TypeScript for type safety.

For styling, I decided to use css-modules, but later on moved to Tailwind and DaisyUI.

Hosting and builds

The backend infrastructure is hosted on Google Cloud, so hosting the frontend there as well was a natural choice. Using Google Cloud also lets us use Google IAP for authentication.

The code is hosted on GitHub, and we use GitHub actions for building and deploying the application. Semantic versioning is used to handle versioning, together with a semantic-release GitHub action.

For development, we have a test-server set up with a GitHub actions workflow that builds and deploys the application when anything is pushed to the develop-branch. For production, we have a similar setup, flow for the main-branch, but deploying to several environments pointing to different databases.

Leonardo can also be pointed to different versions of the DaVinci API, which is good for testing new features.

APIs

The game APIs, aptly named DaVinci, are written in Java and used by both games and Leonardo. We import the OpenAPI specs and generate Tanstack Query-hooks for the different endpoints using a Deno script, as well as generating TypeScript types and API functions to be used on the server.

We use JWTs to authenticate the users to the API.

Features

Leonardo covers the main needs of different teams at MAG Interactive:

• Player support: Tools to search player profiles, clans, and manage reports.
• Business intelligence: A/B test setup, player tagging, and segmentation.
• Game systems: Manage in-game offers, currencies, events, statistics, and game-specific settings.
• Server admin: Internal tools for server configuration and user management.
• Content handling: Profanity filters and internal ad management.

Integrations and libraries

• Next.js for routing and server side rendering
• React Query for fetching data on the client side
• Formik and formidable for form handling
• Yup for form validation
• Jest and React testing linrary for testing
• Tailwind and DaisyUI for styling and components
• Google FireStore for storing data
• Axios for API calls
• CodeMirror for JSON editing
• FullCalendar for calendar views
• Diff2Html and just-diff for showing diffs

We also use a host of libraries for development UX, such as Prettier, ESLint, Husky, Plop, and TypeScript.

Way of working

Leonardo is maintained by the MAG server team, which consists of two front-end developers, and four back-end developers, who support the java back-end, which is used by both our games and Leonardo.

The team is self-organizing, taking on tasks from the game teams for bigger projects, and doing smaller tasks and bug fixes on their own.

With Leonardo, we use GitHub projects to work in a kanban style, with a board keeping track of tasks, and releasing continuously.

Tech stack

Web

• Next.js / React
• TypeScript
• Tailwind
• css-modules
• Deno is used for some scripted tools
• Go cloud functions
• Java APIs
• Generated TypeScript API clients from Swagger files

CI/CD

On push to develop branch, a new version is deployed to the test server. While pushing to main will do a release to the different production environments.

• GitHub Actions
• Docker
• Google Cloud Run

Integrations

• Google IAP for authenticating users
• Slack hooks for notifications
• Google Cloud Storage for storing images
• Google Cloud Firestore for storing data
• GitHub API for automatically creating reported bug tasks in GitHub