The problem The Story - Interactive Timeline for NBA Top Shot solves

Austin Kent, Content Lead at Dapper Labs, recently said "NBA Top Shot is a living, breathing archive and digital museum." I agree! However, when you view Moments on the NBA Top Shot site, the current viewing experience is more optimized towards a marketplace where you can buy and sell collectables. The Moments are on the static grid and lacks the dynamic and engaging experience of Austin's vision of a digital museum.

I was inspired by Austin's quote so I built out an interactive timeline featuring a curated selection of the best Moments for a given season or time period. "The Story" app offers a dynamic and immersive timeline view that presents each Moment as part of a larger story, providing a more enjoyable experience for fans and collectors.

Currently there are 11 curated Stories that I created. These include the best Moments from each of the recent NBA and WNBA seasons, "38,388 - The LeBron Story" featuring his best Moments on the platfrom going back to 2005, "Best of the Bubble" highlighting the unique moment in history that was the 2020 Playoffs, "Run It Back" featuring the best plays of historical seasons, and more. Eventually I will allow collectors to create their own Stories that they can share with the community and other fans. I can also expand this to NFL All Day Moments as well.

Challenges I ran into

The biggest challenge was really around trying to get the TimelineJS running in React. It was built about 5 years ago and is no longer maintained, so I needed to try a few different approaches to get it running. I also needed to do some workarounds to enable an AutoPlay feature so users could just watch the Moment as soon as the page loaded, rather than needing to click on the moment to play it.