Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint

Format with Prettier

npm run format

TODOS

• Artist page

  As a user I want to be able to see all the information about an artist, including their albums and tracks.

    When the user clicks on an artist
    Then the artist page should be displayed
  
    When the user clicks on an artist
    Then the artist page should be displayed
  

• Album page

  As a user I want to be able to see all the information about an album, including its tracks.

    When the user clicks on an album
    Then the album page should be displayed
  

• Audio player

  As a user I want to be able to play music from the app.

    When the user clicks on the play button
    Then the audio player should apppear
    And the audio player should play the track
  
    When the user clicks on the play button
    Then the audio player should play the track
  
    When the user clicks on the pause button
    Then the audio player should pause
  
    When the user clicks on the next button
    Then the audio player should play the next track
  
    When the user clicks on the previous button
    Then the audio player should play the previous track
  

• Search bar and results

  As a user I want to be able to search for artists, albums and tracks.

    When the user types in the search bar
    Then the search results should be displayed
  
    When the user types in the search bar
    Then the search results should be displayed
  
    When the user clicks on an artist
    Then the artist page should be displayed
  
    When the user clicks on an album
    Then the album page should be displayed
  
    When the user clicks on a track
    Then the audio player should play the track
  

• Sorting

  As a user I want to be able to sort my playlists

    When the user clicks on the name header
    Then the playlist should be sorted by name
  
    When the user clicks on the artist header
    Then the playlist should be sorted by artist
  
    When the user clicks on the album header
    Then the playlist should be sorted by album
  
    When the user clicks on the duration header
    Then the playlist should be sorted by duration
  
    When the user clicks on the BPM header
    Then the playlist should be sorted by BPM
  
    When the user clicks on the key header
    Then the playlist should be sorted by key
  

  As a user I want to be able to save sorted playlists

    When the user clicks on the save with sorting button
    Then the playlist should be saved with the current sorting
  

• Navigatable user icon

  As a user I want navigate to my spotify profile

    When the user clicks on their user icon
    Then the user should be redirected to their spotify profile
  

• Logout

  As a user I want to be able to logout

    When the user clicks on the logout button
    Then the user should be redirected to the landing page
  

• Create playlist

  As a user I want to be able to create a playlist

    When the user clicks on the create playlist button
    Then a new playlist is created
  

• Delete playlist - NOT MVP

• Add to playlist

  As a user I want to be able to add tracks to a playlist

    When the user clicks on the add to playlist button
    Then the track should be added to the playlist
  

• Track info

  As a user I want to retrieve additional information about a track

    When the user clicks on the fetch info button
    Then the track info should be displayed
  

  As a user I want to retrieve additional information about each track in a playlist

    When the user clicks on the fetch info button on the playlist header
    Then the track info should be displayed for every track
  

• Light/Dark mode

• Caching

  As a user I don't want to have to log back in when I refresh

    When the user refreshes the page
    Then the user should still be logged in
  

• Mobile support

  As a mobile user I want to be able to use the application

    When the user loads the application on a mobile device
    Then the display size should be adjusted
  

• Sizable ports

  As a user I want to resize each panel

    When the user clicks on the panel separator
    Then they should be able to resize the panel