moodrammer/symphonia-fe

🎼 This project aims to mimic the Front end part of Spotify web player using Vue js.

Symphonia FE 🎵

A Project that mimics the FrontEnd part of Spotify Web player.

Video Demo

---

Tools used

• Vue js : js framework
• Vuetify: Components Library
• Vue router: routing
• Vuex: State Mangement
• Mirage js: Mock server
• firebase: Notifications
• jest: Unit testing
• Vue Styleguidist: Functional Documtentation
• vue-context: context menu

Main commands for running the Project

Project setup & installing packages

npm install

Compiles and hot-reloads for development

npm run serve

Runs the project by default on port:8080

Compiles and minifies for production

npm run build

The project is found in a /dist folder under the same directory after building

Run your unit tests and generating coverage report

npm run test:unit

This command runs all the unit tests and generates a coverage report index.html including details about all components The generated coverage report is found in the project directory under /coverage/Icov-report

Generate Functional documentation report

npm run styleguide:build

To generate the report under /styleguide folder in the project directory

Lints and fixes files

npm run lint --fix

Running on Mock server

For mocking we use Mirage.js The server is established in development environment automatically and runs on the same port as the frontend code where it intercepts all the requests and api calls and mocks their responses through defined routes

Running on real server from localhost (for debugging temporarily)

some changes should be made in the development env :

1. prevent mirage from runing by changing the condition in main.js from development to production

  if (process.env.NODE_ENV === "production") {
  makeServer();
}

2. define the axios base url to direct the calls to the deployed back end server in main.js

axios.defaults.baseURL = "https://thesymphonia.ddns.net/api";

Running on real server

When deployed in a Production environment, the Mirage server is not established and it doesn't intercept the calls to the api The publicPath is taken form the domain name where the project runs

Customize configuration

See Configuration Reference.

symphonia-fe's Issues

Using id to access other components.

• Fix: the homepage premium page access the navigation bar through this way.

handle the end of the queue correctly

When the queue is finished and repeat is not enabled, the player stops. If the user pressed next again the first song should be played.

don't change the shape of the next and previous in buffering

request the song with the context id and type instead of device only

You should request a song with the context Id. This is the common case. The other case which is requesting with the device only happens in add to queue only.

edit: a track is played after the liked song view is opened.

bug: go to search after that go to the like song, then a track will be played.

handle track token timeout

You can use the same token for the same queue. Once it's expired, request another one through play song API.