CH
NASCAR Fantasy Live roster and featured matchups view, zoomed in closer for easier visibility

Professional · 2022 — Ongoing

View live

NASCAR Fantasy Live

ReactTypeScriptViteContext APIWouterNx

NASCAR Fantasy Live is NASCAR's flagship all-season long fantasy platform embedded within NASCAR.com, allowing fans to build a roster of drivers every week, compete in public and private leagues, track live race scoring during events, analyze driver performance through historical stats, gain bonus points through head-to-head matchups, and view betting odds where available for DraftKings sportsbook.

I've been maintaining and building new features for this game since 2022, at the time the project was already a decade old and running legacy AngularJS 1.5.2. In 2022, I was tasked with implementing an entire redesign of the platform itself to match the 75th anniversary changes of NASCAR.com and give the game a much needed facelift. After the 2023 season I proposed and led the frontend rewrite away from the legacy codebase. The existing product was functional but increasingly difficult to maintain, extend, and onboard new engineers onto, with every feature request having added risk due to AngularJS being well past its end-of-life.

Thankfully, the rewrite was agreed upon and it became the foundation for a broader architectural shift within the NASCAR product ecosystem. Alongside the rewrite, I was told we would be building out 2-3 new products for NASCAR at that time, in order to properly scale and accommodate for this I designed and built the monorepo that now houses all current and future NASCAR Fantasy products. This also includes the shared component library, theming system, shared utilities, and an authentication package that every product in the NASCAR ecosystem consumes. Fantasy Live was the first project in this transition, which meant they needed to be right not just for Fantasy Live but for everything that came after it. This also included style guides and documentation across the product line and development process.

The transition from Angular to React was largely faithful in functionality rather than exploratory, the existing logic was sound and the goal was to preserve that in a more modern, maintainable codebase rather than re-invent everything from the ground up. The more interesting challenge was making the architectural choices that would become the foundation for NASCAR products as they expanded, which they continue to do.

The Picks page, this is where your roster and featured matchups are displayed.
Roster Add/Edit modal with driver stats
Race Results table with race stats per driver and at a glance league, roster, and matchup details in the sidebar