America's Cup
Live race weather for the world's biggest sailing stage - embedded on americascup.com.
- Role
- Frontend Lead
- Discipline
- Race Weather
- Year
- 2024
- Focus
- Next.js, TypeScript
(Overview)
I led development of the official Race Weather Center for the 37th America’s Cup in Barcelona - meteorologist briefs, live coastal observations, and course forecasts, embedded on americascup.com.
PredictWind was Official Weather Data Supplier for AC37 and needed a fan-facing Weather Center that worked on race morning, on a phone in Port Vell, and cleanly inside americascup.com.
I built one Sanity-backed Next.js system that fed four surfaces: full page, chrome-free embed, live widget, and TV. Barcelona-local time, meteorologist overrides when models disagreed with race windows, and an export → CMS loop for retrospective condition charts.
Shipped the official Race Weather Center embedded on americascup.com/weather-forecast. After the Cup, live surfaces slimmed down while the archive, media, condition charts, and Barcelona forecast map stayed live.
- Next.js
- TypeScript
- TailwindCSS
- Sanity
- Recharts
- Mapbox
- Embla
(Brief)
Event context
For the Louis Vuitton 37th America’s Cup in Barcelona (Aug–Oct 2024), PredictWind launched a fan-facing Race Weather Center: daily meteorologist briefs, live coastal observations, course forecast maps, webcams, and a race archive.
(Architecture)
System layers
One Sanity + API contract fed the full page, AC embed, live widget, and TV.
- Next.js shell
- Full page, embed, widget, and TV from one component system
- Sanity
- Race days, briefs, winners, media, observations, weather overrides
- Forecast APIs
- Daily briefing merge, paged observations, course forecast iframe
- Map & charts
- Lazy Mapbox station map, Recharts, and course webcams
(Product surface)
What fans could do
- 01
Race-day UX
Day carousel, meteorologist brief, conditions rating, countdown, and live wind/gust/wave strip.
- 02
Live conditions
Station observations, optional station map, and course forecast iframe.
- 03
Previous races
Archive with winners, media, and wind/wave charts keyed to race windows.
- 04
CMS ops
Race days and webcams without redeploys, plus export → archive for condition charts.
(Product)
Weather Center UI
Race-day briefs, live observations, course forecasts, and archive charts - including the chrome-free embed on americascup.com.
Mobile
(Hard problems)
Constraints that shaped the build
Must live inside the official AC site
Chrome-free embed and compact live widget with allowlisted framing
Race day isn’t UTC “today”
All calendar and chart logic in Europe/Madrid, including end-of-day behaviour
Models vs meteorologist truth
Sanity manual weather overrides win when editorial disagrees with the API
(Impact)
What I shipped
- 01
Shipped the official fan-facing Weather Center, embedded on americascup.com.
- 02
One data contract powered full page, embed, live widget, and TV.
- 03
Left a durable archive of races, media, and condition charts still live after the Cup.
