arrow back

Music database

built with
React and Firebase

iphone mockup
iphone mockup

Intro

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.

Design

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.

signup page

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.

SASS

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.

Database schema

database schema

features

for unauthenticated users:

 

for authenticated users only: