I’m passionate about music, especially rock and metal genres. I started collecting music CDs when I was a teenager, buying CDs from an antique shops and pawn shops with the little money I had at the time. Later on I was able to buy CDs on a regular basis and find some rare releases. When my collection grew over 60 CDs, I was thinking about creating a website to keep track and show off my collection. Today, I have more than 240 CDs and over 30 vinyl records in my collection.

I’ve initally built this site in React and it used three data sources for a single item. The app fetched the collection list from Firebase, album data from Discogs API and the album cover image from Cloudinary. After some time, it became difficult to maintain and cumbersome to update everything for each new record. After I learned Svelte, I decided to rewrite this app and streamline it.

I was happy with the streamlined app and I think that I’ve managed to improve the UX and add some small quality-of-life features to it. It’s lot more focused and easier to use. Album details page shows a lot more information and it features rich meta data so whenever I share the link to a specific item, it shows the metadata for that particular album.

I also remembered that I never worked on a project that had a light/dark theme switche, so I’ve added it to the app. Since the app uses a simple theme and CSS custom properties, it was easy to add a dark mode just by switching the CSS color variables and fine-tuning a few items.