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
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
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