test spotify

test-spotify.md

test spotify

The goal of the test is to access your React/Redux skills.
The duration of the test is limited to 4h.
The source code must be provided through a git repository link.

Do not lose time on the environment aspect.
You are free to use your favorite boilerplate (as soon as it relies on webpack), give a try to create-react-app or use jsbin.

The idea of the test is to create a tiny app that interacts with the public spotify API.

spotify API specifications

1. top tracks: GET https://api.spotify.com/v1/artists/{id}/top-tracks?country={code}

• artist id: 0OdUWJ0sBjDrqHygGUXeCF
• country code: FR

1. track: GET https://api.spotify.com/v1/tracks/{id}?market={code}

• track id: 4NtUY5IGzHCaqfZemmAu56
• market code: FR

tiny app specifications

overview

• main page
  • artist selector
  • toolbar
    • sort
    • filter
  • top tracks list
    • track item
• details page
  • track details
  • back to main page link

main page / artist selector

Display a list of exclusive links to select the current artist.
The component visually reflects the current selection.
Default selection is the first artist.
Use the following data for this component:

[
  { name: 'Röyksopp', id: '5nPOO9iTcrs9k6yFffPxjH' },
  { name: 'Macy Gray', id: '4ylR3zwA0zaapAu94fktwa' },
  { name: 'Worakls', id: '5RPzPJCg4ER1LzQkorZ31p' },
  { name: 'Extrawelt', id: '3VRvi42U8SsiT4YKP5LNCB' },
  { name: 'Massive Attack', id: '6FXMGgJwohJLUSr5nVlf9X' },
]

main page / top tracks list

Display the list of top tracks of the current artist, fetched with the first request of the spotify API.
Each item of the list displays the name and the artists of the top track as well as a isStarred toggle link.
Each item can be starred/unstarred by clicking on the toggle link, the label of the link depends on the isStarred state.
Each item has a view details link.

main page / toolbar

Display a sort component and a filter component.

The filter component provide a way to see all top tracks (of an artist) or only starred top tracks (of an artist).
The label of the filter depends on the active filter:

• when only starred top tracks are visible, the label displays 'see all'
• when all top tracks are visible, the label displays 'see starred only'

The sort component provide a way to sort top tracks by popularity or by name.
The sort direction is DESC only. The component should visually reflect the active sort:

• when the sort is by popularity, display sort by name
• when the sort is by name, display sort by popularity

details page / track details

Display the name, the album, the popularity and the first image of the album as well as a isStarred toggle link.
The component uses the second request of the spotify API.

details page / back to main page link

Allow to go back to the main page.

constraints

• UI related data should be stored in the state of the react components
• Spotify related data should be stored in the redux store
• a given uri can only be fetched once
• when the current artist is changed, the active sort and the active filter are kept

misc

• the usage of react-router is allowed but not mandatory