VinylLib

Show Live Demo

VinylLib is a React Application built for your record collection. With VinylLib you can store, search and find all of your records.

I built this project from scratch with React for the Frontend and NodeJS with Express for the Backend. As a Database i used MongoDB.

screenshot of the register page of vinyllib

View Source Code

Technologies used

React
NodeJS
Express
MongoDB

Why I created this

I have a large record collection, so I decided to build my own tool to keep track of where they are stored and how many I have.

How I created this

Initially I created the Design of the App in Figma. I also built a Design System in Figma to make sure I build every component like in my Designs.

Afterwards I started building out the Project with React and StyledComponents.

At first, I created every component like I designed it in Figma. This really helped me while coding the App, because I didn't need to worry about how a component should look like when implementing the business logic.

I then started to build out the user login and routes in NodeJS with Express.

Lastly, I built every Page of the App and implemented some logic to filter my collection e.g. the album title.