Planning

https://docs.google.com/document/d/1xG603gizBOan2lmvd-iFtynFjE2XDCu11tr5SCvF7Yw/edit?usp=sharing

Muzaic (deezer/spotify) 
  https://developers.deezer.com/api




visual muzaic

muzaic

focus on artist -> similar artist

Potential home page -> album covers 

Components:
-App (Hashrouter)
-Homepage
    -Mosaic Homepage
    Flex-wrap ; page with border; 
    Map; for each album

 
-NavBar (refer to NickNavBar.js)
  -Search bar will return artistsn 
  Refer to NickBag.js for search 
    useState ; input
    fetch deezer/artist{id}
    (Stretch goals)
        -Login (Refer to NickApp.js)
    -Link to favourites

-Artists
  -returning search fetch  
    -the artist that was searched for
    -related artists (deezer/artist/{id}/related)
  -onClick moves to Individual artist page or related artist page(individual id)
      -artist.name
    -artist.picture

-Individual Artist Page (Artist)
  -return albums (deezer/artist/{id}/albums)
  -return most popular ((deezer/artist/{id}/top))
  - (Stretch goal) return radio ((deezer/artist/{id}/related))
  -onClick moves to album(/radio) page
    -artist.name
    -artist.picture
    -artist.tracklist


-Album page (return id (using templete literal and :id) or we can deezer album fetch)
  -list of tracks
    - title ; duration; artist.name; album.title
    - (preview)
    - album.cover_small
    - album.cover_median
    - album.cover_big
    -album.genres
    -album.duration
    -album.realise_date

    deezer/albums/{album id}/tracks

-Radio page (Stretch)

Plan for 17/6/20

Import and link after before/ after each step

1. figure search and fetch for artists (navbar)
2. Fetch albums, related artists and top songs
3. individual album page
4. fetch album tracklists
5. mosaic homepage (random album generation and links to each album onclick)

CSS

Stretch
Search bar works with press enter
1.Register/Login
2. Add [ artist, album ] and songs to favourites (+ favourites page)
3. Artist radio
Live Search


CSS

Extreme Stretch
Personalised mosaic based on favourites
4. songs preview and media ( sdk ) playback
6. autocomplete ; using rank method
5. genius lyrics