Back

Inside a real team

XP Network Web App

XP Network's mobile-to-web pivot. I built the foundational frontend, retrofitted a legacy codebase against new designs, and introduced a testing culture that did not exist.

Role
Frontend Software Engineer
Year
2024
Org
XP Network
XP Network web app tournament dashboard

A platform moving from mobile to web

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

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

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

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

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.

Screens

Built with

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

More work