My Music Display

Client: Myself

Role: Fullstack and Design

Tech Stack: React, Tailwind CSS, and Firebase

My Music Display

Project Overview

This project is a web-based platform where I can upload and display my personal music for the world to listen to. It is built using React and Tailwind CSS for a modern and responsive frontend, and Firebase for the backend. What makes this project unique is the integration between Firebase Storage and Firebase Firestore Cloud. When I upload a song to Firebase Storage, the system automatically extracts metadata (such as song title, duration, the song's mp3, etc.) and saves it to Firebase Firestore Cloud, streamlining the process of organizing and displaying my music.

Problem Statement

For a hobbyist independent musician and aspiring software developer like myself, creating a music display website felt like a natural step. It allows me to share my music while also sharpen my development skills through new projects. Before building this site, I would typically upload my music to platforms like Instagram and SoundCloud, but having my own platform gives me complete control and the freedom to customize it however I like. While some may see this as an unnecessary effort, for me, it's a creative outlet that merges my passions for music and coding. This project simplifies music sharing by automating metadata organization and streamlining how I manage and display my work, without relying on multiple third-party platforms.

How It Is Done

The frontend is developed using React for building reusable components and Tailwind CSS to ensure the site has a sleek, responsive design across all devices. Firebase serves as the backend, handling both storage and database functionality. Music files are uploaded to Firebase Storage, and upon upload, a server-side function automatically extracts the metadata and stores it in Firebase Firestore Cloud. This integration allows the music data to be displayed dynamically on the platform, making the process seamless.

What Would It Looks Like In The Future

In the future I see this project to be similar as any other music streaming platform, such as Soundcloud, where people can like my music and see the likes count, add comments, share it, etc.