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

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.
- Find a tournamentBrowse without an account
- Open the eventThe bracket, the rules, the tiers
- Create a profileOAuth onboarding, then an identity
- Sign upRegistration tied to the event
- 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.
- Web appReact + TypeScript, Vite
- Routing & dataTanStack Router + QueryFormsTanStack Form
- Platform APIThe existing XP Network backend
Checklist
Built with
- TypeScript
- React
- Vite
- Tailwind CSS
- TanStack Query
- TanStack Router
- TanStack Form
- Vitest
- Playwright

