Music Catalogue

Links:

• Website (Vercel)
• Website (Netlify)

Web Application themed around music where you can:

• Browse artists, albums and songs.
• Save songs into a personal playlist
• Browse popular charts from billboards: Top Songs, Top Albums, Top Songs Globally

Figma

• Wireframes - Figma Link
• User Flow and User Stories - FigJam

Additional Research Process:

• Personas
• User Journeys
• Information Architecture Map
• Survey about UX / UI design for album and artist pages

Technical Aspects

Web application was made using:

• React
• Vite
• HTML, CSS, Javascript with .jsx extension

React Sublibraries:

• React-Router-Dom
• React-Helmet
• React-Cookies
• Redux Toolkit

Third Party Tools and Libraries:

• Firebase DB
• iTunes API
• Giphy API

How to Install

Probably not possible because of the custom .env file which requires Giphy Api key and the Firebase Config ¯_(ツ)_/¯

Install:

• git clone this repo
• npm install
• request for the .env file
• put the .env file in the main directory
• npm run dev for development mode
• npm run build > npm run preview for production mode