Virtius Meet Viewer / Next.js, React, TypeScript, GraphQL, and Playwright
I worked on the part of a live gymnastics meet that nobody wants to notice: loading the scores quickly and displaying every athlete, ranking, and decimal correctly.
The Meet Viewer serves a seasonal audience of more than 150,000, with traffic concentrated around live meets. Scores, rankings, and athlete status have to stay readable while the underlying data keeps changing.
I joined an established product with an existing request flow and scoring rules. My job was to understand those rules before changing the interface around them.
Contribution boundary
I worked on the meet-viewer branch and its user-facing behavior. I did not build the entire Virtius platform, scoring operation, or underlying competition infrastructure.
02 / Contribution
Load it faster. Keep the score right.
LoadingTrace the data path
I worked through API handling, caching, and client/server boundaries so the live view did less unnecessary work.
ScoringRespect the ugly edge cases
Three- versus four-decimal scores, exhibition athletes, and rankings all affected what the viewer should show.
InterfaceKeep a changing meet readable
I adjusted presentation and interactions so users could follow current results without losing the competition’s context.
Production interfacePublic live-system screenshot
03 / System
From GraphQL response to live result
01Meet data changes
Competition, team, athlete, and score data update while the meet is underway.
02The application resolves state
GraphQL requests, caching, and client/server boundaries determine what reaches the viewer.
03The interface applies scoring rules
Precision, rankings, filters, and exhibition status shape what the user sees.
04 / Verification
Changes had to survive live data
The earlier Virtius experience became my best documentation for the request contract. I traced that flow first, then used Playwright checks, visual comparisons, and known scoring cases to catch changes that looked fine with one meet and failed with another.
Playwright checks, scoring display cases, and visual comparisons.
05 / Result
The product is live. The private metrics stay private.
My changes covered loading and data-handling paths, scoring display cases, and interface behavior in the production viewer. The system itself is public; internal performance measurements and company engineering data are not, so I’m not turning either into a made-up percentage.
