Note - as of this writing, the iTunes rss API seemingly only returns the top 80, rather than the top 100 🤷
This project is hosted by Vercel at https://www.itunes-top-100.dev.
I built this application using Next.js. I wanted to take advantage of Next.js features like React Server components, http request caching (for the album list as well as specific album metadata), and the opinionated file structure.
- The homepage displays a list of the top 100 albums currently on iTunes.
- The list can be filtered by search term against either the album artist or album name.
- Each album is selectable, and once selected, a detailed view of the album and track list can be accessed.
- Request caching - after initial load of the album list and album data, the fetch requests for these resources will be cached. This is most noticeable when navigating back and forth between the album list and albums that have already been selected - the pages load almost instantly.
- Most importantly, each track's audio can be previewed!
There are two main animations in this application. First is a page transition using the next-view-transitions package. This package uses the relatively new browser View Transitions API under the hood. I opted to use this package since this application primarily uses server-side rendering, which eliminated the ability to use more traditional animations that exist on client-side rendered Single Page Applications.
The other animation is applied on the rendering of each album's track list. I used Framer Motion to "slide up" each track into view, in a staggered fashion.
I used Playwright to write an end to end test for the application. The test can be viewed here. I configured a Github Action to run the test on Vercel's preview deployment of the application. The workflow runs can be viewed here.
First, run the development server:
npm run devOpen http://localhost:3000 with your browser to see the result.