This project is a simplistic clone of Discogs - database of information about music artists, albums, labels, and genres.
I have built it with the aim to dive deep into React and make a "real-world" application with authentication and realtime database provided by Firebase.
This is the first project when I decided to start with a design prototype in Figma. Initially started with main and profile pages I added other pages later with mobile-first concept in mind.
Inspired by Adam Wathan's and Steve Schoger's book Refactoring UI I have set a simplified design system for myself, sets of options for font-sizes, colors and sizing scale. That made styling process much easier and as a result more consistent design.
REACT + FIREBASE
After learning the basics of React I wanted to make something more comprehensive than a todo list. As for now my backend knowledge is very limited, I chose Firebase for managing all backend work.
The application uses Firebase authentication system, Cloud Firestore for database and Firebase Storage for image uploads.
Originally built without preprocessor after attending Advanced CSS and SASS course by Jonas Schmedtmann I decided to refactor vanilla CSS into Sass.
Renaming classes into BEM format, adding utility classes, mixins and variables were a ton of a work but all of that made code much cleaner and more structured.
for unauthenticated users:
view recently added albums
view album page
search through database
for authenticated users only:
add/remove an album to/from collection and wishlist
switch between grid/row view for collection and wishlist
sort albums by date added to database, artist, album, genre, release year