What am I listening to?

Being at university has given me more spare time for my web dev hobby, therefore a hot new web app has just dropped - What am I listening to?

See the code on GitHub.

It's a little pointless but mostly served as a way to try out Vue.js and Nuxt (which very recently released Nuxt v4) - which was inspired by this very good tutorial from CJ at Syntax. It contains a lot of useful information for setting up a Nuxt project, and a useful reminder to establish good practices early by setting up pre-commit hooks via Husky and lint-staged.

It always takes a little bit of time to wrap my head around Spotify's auth flow, as the app was only ever going to use my own credentials. Therefore I had to go through the flow once in order to obtain a refresh token - which would allow me to generate access tokens as needed. These tokens would then return data from the Spotify API that related to my account. I used Nitro's (Nuxt's server engine) KV storage (which integrates with unstorage) to store the access tokens securely.

I used Vercel to deploy the page as it would obviously fit into their free tier and I wanted to see how it had changed in the several years since I had tried it. It's definitely slick, that's for sure.

While the page is more or less complete, there's always scope to add more little things (like animations, or timestamps for when songs were played). I was also thinking this could be extended for use by other people, allowing them to have their own page to show what they're currently listening to - and provide things like embeds they can put on their site and show their visitors they're listening to something in real time.