PGA Perfect 30

PGA Perfect 30 is a bracket-style fantasy game for the FedExCup Tour Championship where users predict the finishing order of 30 golfers heading into the final tournament of the PGA Tour season. Users build their bracket through a drag-and-drop interface, searching and sorting through the full field of golfers before locking in their predicted order. The game includes a paginated global leaderboard and a starring system allowing users to track and compare specific entries against their own.

I built PGA Perfect 30 from scratch using React 18, TypeScript and Vite. It was a different kind of challenge from the NASCAR ecosystem and unlike the Masters game which involved translating existing design and preserving existing logic, Perfect 30 was genuinely a fresh start, component architecture and technical decisions all needed to be made from the ground up.

A few things made this build interesting given the scope. The golfer selection grid needed to handle quite a large number of golfer profiles without degrading performance, which led to implementing virtualized rendering so only the visible part of the list is in the DOM at any time. Drag-and-drop reordering is handled via dnd-kit, which required careful integration alongside the search and sort functionality to make sure filtered and reordered states stayed consistent with each other. The leaderboard was built to handle thousands of concurrent users, which pushed toward memoized filtering and paginated data fetching rather than loading the full dataset client-side.