Overview
Tour Breakdown is a data-rich analytics platform for PGA Tour strokes gained statistics. Built entirely with Claude Code, it demonstrates how AI-assisted development can produce production-quality applications with complex data visualization requirements.
The Challenge
Golf analytics data is notoriously dense. The PGA Tour tracks hundreds of statistics per player per tournament. The challenge was distilling this into an intuitive interface that serves both casual fans wanting quick insights and serious analysts needing deep dives.
Research & Discovery
I started by mapping the PGA Tour's GraphQL API, understanding the data relationships between tournaments, players, rounds, and statistics. Key insights emerged:
- Strokes Gained is the gold standard but poorly understood by most fans
- Most platforms default to dense tables and leaderboards. They're fine for lookup but poor at surfacing the patterns and trends that actually explain player performance.
- Mobile usage spikes during live events so the design had to be responsive-first with touch-optimized interactions
Design System
The design system uses a warm, light palette with an off-white base and earthy neutral tones. Accent colours are pulled from the sport itself: Masters green for positive strokes gained values, crimson for negative, and distinct colours for each SG category so patterns are immediately recognisable across charts.
Three typefaces handle different jobs. Playfair Display for headings gives it an editorial quality. Inter keeps body text clean and readable. JetBrains Mono is used for stats and data labels where precision matters.
Key Features
Radar Charts
Compare players across six strokes gained categories at once. Hover for exact values and contextual tooltips.
Tournament Leaderboards
Expandable player rows with round-by-round SG breakdowns and scroll-triggered animations.
Historical Trends
Line and bump charts tracking player performance across seasons. Rank changes are visible immediately.
Course Profiles
See how course characteristics correlate with specific SG categories to predict which players suit which venues.
Technical Implementation
The app is built with Next.js and pulls live data from the PGA Tour's API. Stats refresh automatically on a schedule so the content stays current without needing manual updates.
- Charts are built with D3.js rather than off-the-shelf charting libraries, which gave more control over how the data is presented. They resize and rearrange on smaller screens rather than just shrinking.
- Pages load quickly because heavier components like charts only load when needed, with placeholder skeletons shown in the meantime.
- A blog section is powered by Contentful CMS, making it easy to publish new content without touching code.
Results & Impact
Tour Breakdown was made in collaboration with Claude Code. Every component, API integration, and chart was developed through iterative prompting rather than manual coding.