Contact me

Adrian's Music Collection

Adrian's Music Collection
Platform: React, Firebase
Type: Personal Project
View Project: Project Site

About The Project

I'm really passionate about music, especially Rock and Metal. 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 more regularly 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 around 100 CDs in my collection.


At the time, I was starting out with React and it was a perfect tool for creating this project. For database, I went with Firebase, due to the simplicity and project not requiring anything more than a simple database.

Since this project means lot to me and is connected to my hobby, I wanted it also to look really cool and I was thinking about the content and info I wanted to show. I decided to have a simple structure without any fluff text pages since the website title is all the explanation user needs. Website consists of 2 page types, first is the homepage with full collection listing and second one is the detail page for each item in collection.

Album detail page

Firebase only contains basic info about the items in collection: artist, title, image, youtube video and Discogs id. Detailed info about the album is pulled from Discogs API using the id key stored in Firebase. Once user opens the album detail page, tracklist, album release date, release type, genre, and other data is being pulled from Discogs.

Project uses lazy loading for images which ensures optimal performance and load times by deffering loading of images which are not in user's viewport.


I'm happy with the final result. It's simple, it looks great and performs nicely. I'm really proud of the design of the website, especially how I managed to incorporate a YouTube video and make it as an integral part of the presentation. Hardest part of adding new content is picking out the video, because I want to make it look really cool when displaying next to the album cover.