Spoticeipt

I never planned to build this app, but one day I saw many people on X sharing their Spotify top tracks in a receipt-like format, inspired by @albumreceipts. I thought it would be awesome to create an app that generates something like that— and that’s how Spoticeipt was born.

Spoticeipt connects to the Spotify Web API, requiring users to link their Spotify accounts. Once linked, users can generate receipts showcasing their top tracks, artists, genres, or stats from the past month, 6 months, or year. It can also create album track lists, similar to what albumreceipts offers. Additionally, Spoticeipt provides insights into a user’s music taste, powered by the Gemini API.

Recently, I noticed a lot of buzz around shadcn, a library that lets developers copy and paste component source code for easy customization rather than installing it as an npm package. However, since it’s built on Radix UI, I still need to install Radix as an npm package.

I used jotai and React Query, which might seem overkill for a small app, but they make state management much easier by eliminating the need to pass props between components. For Spotify Web API integration, I chose @spotify/web-api-ts-sdk because of its clear documentation, straightforward interface, and, most importantly, its built-in auto-refresh token functionality, which saved me the effort of implementing it myself.