Adrian's music collection

I wanted to keep track of my music collection with a detailed info for each album, so I've created this simple Svelte app to do just that. It uses Discogs API for album data. Each album page has meta data generated on the fly. This was also the first project where I implemented a light/dark theme switcher.

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.

Music collection items list
Album listing page with pagination and sorting controls. Collection can be sorted by artist, title, release date, format, and label.

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.

Album details page with image, video and basic info
Album details page shows much more information than previous version. I really like the full width layout and how image is placed next to a video and it scales accordingly.

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.

Album items list page, dark theme
Dark theme fits in perfectly with the design.