Mixtape App

Browse & stream your favorite music here!

This project was my take on Spotify where users can stream New Releases music pulled from Spotify API.

On page load, the user is shown the daily 20 newly released albums as per Spotify.com.

Click on the card and user will be able to see album details and even stream the music for 30 secs.

Features

• Designed using principles learned in Hacktiv8's Fundamentals course
• Minimalist and responsive design
• Accessing multi-level databases stored in Heroku
• ECMAS Arrow functions + Function Declarations

Demo

Here is a working live demo. Login details:

• E-mail: admin@outlook.com
• Password: 12345

Mixtape-App-Demo.mp4

Stack

Frontend

• Vue to compose the UI
• Vue Router to manage the routes
• Pinia to share a state across components/pages
• Bootstrap 5.1 to help with the styling and accessibility
• Axios to make HTTP requests to fetch or save data
• Firebase to host the deployed app
• Vite to improve bundling and development

Backend

• NodeJS to run the server
• Express JS to provide MVC in web app design
• PostgreSQL server to manage the data fetching declaratively
• Spotify API as wrapper/client for the Spotify Web API that runs on Node.JS
• Midtrans Client to integrate with Midtrans payment system