App // Inside a real team

XP Network

An esports tournament platform, moved to the web

An esports tournament platform — brackets, sign-ups, ticketing and the social layer around them — moving from mobile to the web. I built the foundational frontend, retrofitted a legacy codebase against new designs, and introduced a testing culture that did not exist.

Year:
2024
Role:
Frontend Software Engineer
Org:
XP Network
The XP Play sign-in screen on an iPad: Create an Account, and sign in with email, Apple or Google

A platform moving from mobile to web

01

XP Network ran esports tournaments (brackets, sign-ups, ticketing, the social layer around all of it) and had built it mobile-first. In 2024 the company moved to the web, to widen reach and to stop shipping every fix through an app store review.

That is not a port. A tournament platform on the web has to answer questions the mobile app never did: what a tournament looks like to someone who has not signed up, how an organiser shares a bracket, what happens when a link is opened on a laptop at work. I was on the core team for that transition, on the frontend.

Foundations, then the flows that take money

02

The first work was structural: authentication and profile creation, built on TanStack Router, Query and Form. Those are the screens every other screen depends on, and getting the shape of them wrong is expensive later.

Then the flows where mistakes cost real money: event sign-up, ticket purchase, OAuth onboarding. I rebuilt those as reusable components rather than page-specific code, because a ticket purchase that behaves differently depending on which entry point you arrived from is a support burden that compounds.

Retrofitting is its own skill

03

Much of the job was not greenfield. It was rebuilding existing code against updated Figma designs while the product kept shipping, working against decisions someone else made, for reasons no longer written down, without a window where everything stops.

What worked was rebuilding at the component boundary rather than the page boundary. Replace the shared pieces underneath, and pages converge on the new design system one at a time instead of requiring a coordinated cutover nobody has time for.

This is the part of the job that gets the least credit and is the hardest to do well. Greenfield work is a series of decisions; retrofitting is a series of negotiations with decisions already made.

Introducing tests where there was no testing culture

04

There were no automated tests. I brought in Playwright for end-to-end coverage and Vitest for units.

The sequencing mattered more than the tooling. I started end-to-end on the flows where a regression costs money: ticket purchase, tournament registration, because those tests pay for themselves the first time they fire, and they make the argument for everything after. Unit tests followed once the value had stopped being theoretical.

Introducing tests to a team that has never had them is a social problem wearing a technical costume. You do not win it by explaining coverage. You win it by catching one expensive bug in front of everybody, once.

What it left behind

05

The web app became the platform's front door and the base its later features were built on: a modular, typed, tested codebase in place of a mobile-first one that could not be iterated at the speed the company needed.

What I took from it: I am comfortable being the person who arrives at an existing codebase, works out what is load-bearing, and changes it without stopping the business. That is most engineering jobs, and it is a different skill from starting something.

The brief

01

XP Network ran esports tournaments — brackets, sign-ups, ticketing, and the social layer around all of it — and had built it mobile-first. In 2024 the company moved to the web, to widen reach and to stop shipping every fix through an app store review.

That is not a port. A tournament platform on the web has to answer questions the mobile app never did.

What does a tournament look like to someone who has not signed up, opening a link on a laptop at work?

Constraints

Framing

02

The first work was structural: authentication and profile creation, built on TanStack Router, Query and Form. Those are the screens every other screen depends on, and getting the shape of them wrong is expensive later.

Then the flows where mistakes cost real money: event sign-up, ticket purchase, OAuth onboarding — rebuilt as reusable components rather than page-specific code, because a ticket purchase that behaves differently depending on which entry point you arrived from is a support burden that compounds.

// Retrofitting is a negotiation, not a decision.

  1. Find a tournamentBrowse without an account
  2. Open the eventThe bracket, the rules, the tiers
  3. Create a profileOAuth onboarding, then an identity
  4. Sign upRegistration tied to the event
  5. Buy a ticketThe same component from every entry point

What the web forced us to answer

  • What a tournament looks like to someone who has not signed up.
  • How an organiser shares a bracket outside the app.
  • What happens when a link is opened on a laptop at work.
  • Where a ticket purchase begins, when it can begin anywhere.
  • How a rebuild ships with no window where everything stops.

Interface

03

Much of the job was not greenfield. It was rebuilding existing code against updated Figma designs while the product kept shipping, working against decisions someone else made, for reasons no longer written down, without a window where everything stops.

What worked was rebuilding at the component boundary rather than the page boundary. Replace the shared pieces underneath, and pages converge on the new design system one at a time instead of requiring a coordinated cutover nobody has time for.

Principles

Build

04

TanStack Router, Query and Form under the auth and profile screens, then the same foundation under the flows that take money.

There were no automated tests. I brought in Playwright for end-to-end coverage and Vitest for units, sequenced so the first tests written were the ones that pay for themselves the first time they fire.

  1. Web appReact + TypeScript, Vite
  2. Routing & dataTanStack Router + QueryFormsTanStack Form
  3. Platform APIThe existing XP Network backend

Checklist

Built with

  • TypeScript
  • React
  • Vite
  • Tailwind CSS
  • TanStack Query
  • TanStack Router
  • TanStack Form
  • Vitest
  • Playwright

More work