Skip to content

Roadmap

Jump to bottom
Fred B edited this page Dec 10, 2020 · 30 revisions

for Roadmap v2 (additional features), check this page

Responsive Design - table of progress

For details on responsive breakpoints, check this page on the material-ui documentation.

Section small screens up to 600px medium screens up to 1280px higher resolution screens
Header x x x
Sidebar x x x
Footer x x x
Remote Control x x
Remote Control Error Msg x x x
Login page x x x
Home page x x x
Featured page x x x
Item page x x x
Not found page x x x
Search page x x x
User Lib page x x x

Mobile, Tablet & Touch

App to be fully functional on mobile and tablet through responsive design

  • hover states: remove all hover states for playlist and album covers, tracks, etc
  • have the virtual keyboard NOT appear on search page if search results are already in the page
  • clicking on the header scrolls back to top

About navigation

  • private routes
  • getting onto a new page must systematically scroll the Body component back to top

Header

Home page

  • the user's recent tracks,
  • the user's top tracks,
  • the user's saved tracks

Footer

When a track is clicked and none of the user's devices are active, the spotify api throws an exception with the following message : "status" : 404,↵ "message" : "Player command failed: No active device found"

  • leverage this exception to contextually explain to the user that: - [x] Spotify must be playing music in some other device, using the same account they signed in, into my app - [x] Also explain that Spotify account type must be premium (restricted by Spotify commercial policy and enforced through API response)
    • will display the message to the user at that point, meaning, when any of the remote control button are pressed and an exception is thrown by the API.
    • Must modify code because currently the message is displayed only when PLAY button is pressed (in SpotifyRemoteControl component)

Search Page

  • User types search terms in the search field
  • Results will be displayed for Albums, Artists and Playlists

Album Results

  • Clicking on an album navigates to the ItemPage component => /album/:id

Artists Results

  • Clicking on an artist navigates to the artist's page on Spotify direclty

Playlists Results

  • Clicking on an playlist navigates to the PlaylistPage ItemPage component => /album/:id

Sidebar

  • ellipsis for playlists names (materialUI )
  • clicking on home icon => navigates to PlaylistPage HomePage component
  • clicking on search icon => navigates to SearchPage
  • clicking on library icon => Library Page
  • clicking on a playlist => navigates to PlaylistPage ItemPage component

ItemPage component

This component must be composed of :

  • PlaylistBanner ItemBanner component
  • PlaylistToolbar ItemToolbar component
  • TrackList component

ItemToolbarcomponent

Play Icon

Clicking this icon starts playing the playlist or album on display :

  • from a randomly selected track if shuffle is actived
  • from first track of list otherwise

Heart Icon toggle

in ItemPage > ItemToolbar

  • __If Item on display is a playlist __, clicking on this toggle follows/unfollows it (according to the Spotify API)

    • is owner -> don't diplay heart

    • if not owner -> isFollower : yes/ no => determine the status of the heart toggle

    • when playlist is followed, it must appear in the list of user's playlist (sidebar & user library)

  • __if Item on display is an album __, clicking on this toggle saves/unsaves it (according to the Spotify API)

  • animate the heart svg on toggle ?

in TrackRow

  • click on the heart toggle to place the track in the saved tracks list

TrackList component

  • displays the tracks of the playlist or album on display

TrackRow component

From any page that displays tracks, users can :

  • click the track to start playing it
    • loads it in the Track area of the remote control
  • click on the more icon to choose an action

More Icon actions

In order top-bottom:

  • Add to queue
  • create new featured page
    • display track title radio was based on
    • section to display the list of recommended tracks

UserLibraryPage

  • this page displays:

    • a list of user's playlists (created + followed playlists)
    • a list of user's saved albums

  • Clicking on a playlist or an album => navigates to ItemPage component

ItemCover component

  • Each is the typical squared cover presentation like here

About Logging In

  • Once the user is connected, the fact that they are signed in must persist even after a browser tab closed/re-opened
  • Handle Spotify access token expiry => every time a new page is navigated to, token validty is checked, resulting to a redirection to the login page when invalid, providing a friendly "session expired" type of message to the user.

Log Out

  • The user must be able to disconnect
    • redirects to the Log In page upon logging out

Page not found

Loader

  • Use this animation
    • once per session only
  • Use only the logo part of this animation has the loader while components are fetching remote data
Clone this wiki locally