GameAnalytics Tool

I worked previously for GameAnalytics on their marketing website and a standalone tool called GameIntel. When it was decided that GameIntel would be integrated into the main GameAnalytics tool, I moved to join the front-end team and work with them full-time.

Features I worked on

Whilst working at GameAnalytics, I worked on some major features such as:

• Login/Sign Up Flow
• Billing Page
• GameIntel
• Home Screen
• Data Warehouse and Data Export setup pages

Other tasks included:

• Research React 18 and present to front-end team
• Complete an upgrade of TanStack Query from version 3 to 5
• Develop and maintain the GameAnalytics WordPress website
• Review Pull Requests from colleagues and submitting/self-reviewing my own
• Assist in fixing bugs reported either via Rollbar or colleagues on Slack
• Address and create "internal tickets" which were updates to the tool that colleagues and myself felt were important, sometimes bugs we found, suggestions for improvements, and so on
• Write documentation of features and contribute to improving specs
• Attend a daily front-end standup, fortnightly engineering planning/reviews/retros, feature kick-offs, and other calls as necessary
• Work with Marketing and Product teams to assist in achieving their goals by implementing Pendo, Google Tag Manager, and similar tools as required

Login/Sign Up Flow

Early in joining the front-end team, I was tasked with developing the login and sign up flow for the tool. This required close collaboration with the User API team to define and implement the necessary endpoints and ensure smooth integration.

The flows I implemented included:

• Standard login
• Standard sign up
• Sign up as an invited user
• Login/Sign up via Google oAuth
• Sign up as an invited user via Google oAuth

Initially, we designed a single flow that adapted slightly based on the user's context. For instance, when signing up as an invited user, the "create organization" step was omitted since the organization already existed.

As the project evolved and OAuth journeys were introduced, I refactored the flow by breaking it down into smaller, reusable components. This approach provided several advantages:

• Improved Maintainability: Components could be updated independently, reducing the complexity of bug fixes and enhancements.
• Customizable Journeys: Different journeys could easily diverge where necessary, allowing for tailored experiences.
• Simplified Testing: Smaller, focused components made it easier to create and test specific scenarios.

This ensured scalability, simplified ongoing development, and resulted in a more robust and flexible login/sign up architecture.

Billing Page

I was responsible for implementing the billing page. Initially, it supported the "Pro" version of the tool, and later, I extended it to include additional products like DataSuite and MarketIQ. The page allowed users to select their desired product, configure its attributes (such as number of seats and subscription length in the case of MarketIQ), and securely complete their purchase through an integration with Chargebee.

Each product had multiple statuses, including not purchased, active, and cancelled. These statuses were fetched from an endpoint providing subscription information for the organization being viewed. A status-to-component mapping determined which UI elements to render for each state. For example:

• The not purchased status displayed an "Activate" button that launched the Chargebee checkout modal.
• The active status showed a "Manage" button, allowing users to update or cancel their subscriptions via another Chargebee modal.

I utilized Chargebee.js to integrate Chargebee's functionality into the front-end. To determine a product's status after a user completed the checkout process, I implemented Chargebee.js callbacks to trigger a synchronization flow. The front-end polled a synchronize status endpoint every 5 seconds to check for updates. This was necessary because the back-end relied on Chargebee's webhooks, which most ofeten took a few seconds to process but sometimes longer.

During the polling period, the front-end displayed a pending state to inform the user that their subscription was being activated. Once the back-end confirmed the status update, the front-end transitioned to the active state, displaying the appropriate controls for managing the subscription.

This implementation ensured a seamless and secure user experience, with clear feedback at every stage of the subscription process. Additionally, the status-driven architecture made it easy to scale and support new products as GameAnalytics expanded its paid offerings.

GameIntel

As mentioned in the introduction, I worked previously for GameAnalytics on a standalone tool called GameIntel. It was decided that this would be moved into the main GameAnalytics tool and rebranded as "Store Intelligence". As there were quite a lot of features in Store Intelligence I worked with one other front-end developer to be able to deliver Store Intelligence for its intended launch date.

I was the sole member coming from the original GameIntel team and the source of data was completely different to that of GameIntel so I assisted in helping the new team understand the complete feature set by creating documentation of GameIntel's features, metrics, and free/paid content.

React 18 Research

As part of one of my personal development tasks, I chose to research React 18 and give a 30 minute presentation to my team describing what I had found. Please find the presentation embedded below.

React 18 Presentation

Upgrade TanStack Query from version 3 to version 5

One of the most satisfying projects I worked on for the GameAnalytics tool was upgrading Tanstack Query from version 3 to version 5. Due to it handling an application's queries (network requests), which needless to say are fundamental and widespread in many a codebase, it required a good amount of research and close attention for a successful upgrade.

I first referred to the migration guides provided by TanStack Query and given the amount of changes between versions, chose to first upgrade from version 3 to 4, then version 4 to 5. I submitted one PR for the version 4 upgrade and another for version 5. This way, once we knew both PRs were tested and code-approved by my colleagues, we could merge them both and do one deploy to have production go from version 3 to 5.

As I made necessary changes, I documented my findings so that I could later share with the team so they too knew the reasons behind some of the changes made. This helped with making reviewing my PRs easier but also got them up to speed when starting to work with version 5.

In some cases, achieving backwards compatibility without making a huge amount of changes was challenging. To solve this, we introduced our own wrapped version of TanStack Query's useQuery hook so that we could maintain the old structure of passing in arguments, rather than the newer version.

To be able to change something that was so widely used and critical to the application could have been a daunting task, however, TypeScript was what gave me so much confidence in knowing that the codebase was getting updated in the right places. Where the newer versions introduced a breaking change or I needed to change the data structures in some way, TypeScript raised errors where those breaking changes were and I was able to go through the codebase to assess and determine the best course of action.

We deployed a big 2-version upgrade and monitored Rollbar logs to ensure there were no resulting errors. It was a successful upgrade.

Conclusion

Transitioning from freelance work to a full-time role at GameAnalytics was a transformative experience. It allowed me to immerse myself in a continuous integration environment, tackling complex, large-scale projects while deepening my understanding of maintainable and scalable front-end development. Collaborating closely with a talented and supportive front-end team sharpened my technical skills, fostered a collaborative mindset, and strengthened my ability to contribute to a dynamic and evolving product.

Through projects like revamping the login/sign up flow, implementing the billing page, and integrating Store Intelligence into the GameAnalytics tool, I honed my ability to deliver impactful solutions that balance user experience with maintainable code. These experiences have not only elevated my skills as a developer but also reinforced the importance of teamwork, adaptability, and continuous learning.