Skip to content

Frontend Routes and Components

Jump to bottom
BillTheDev edited this page Feb 24, 2022 · 4 revisions

Organization for Frontend Components:

  • Root
    • App
      • NavSidebarLeft
        • NavLinks* (Home, Search, Your Library, Create Playlist, Liked Songs)
        • Playlists*
      • NavHeader
        • CurrentUser*
      • [ Main Component ]
      • MediaPlayerFooter*

*Note: If logged out, the display layout is similar, but content changes. NavLinks only allow Home and Search, otherwise prompt login/signup. Playlists are not displayed. CurrentUser is replaced with login and signup buttons. MediaPlayer is replaced with Footer that indicates preview and shows another signup button.

The following routes will be defined in the App Component and will render the components as the [Main Component] above.

Not logged In / Signed Up:

  • /home
    • SplashContentModal
    • NavHeader (Logo, GH/LI, Sign Up, Log In)
    • NavSidebarLeft
      • NavLinks (Home, Search, Your Library, Create Playlist, Liked Songs)
  • /login
  • /signup

Logged In

Home

  • /home redirects from / (exact)
    • NavHeader (Logo, GH/LI, Username, Log Out)
    • HomeTiles displays 'Recently Played' and 'Earshot Suggests'

Search

  • /search
    • NavHeader (Logo, GH/LI, Username, Log Out)
      • SearchBar
    • SearchHome if no search is made
      • RecentSearch
      • GenreTiles
    • SearchResult if search is made
      • ResultSongs
      • ResultArtists
      • ResultAlbums
      • ResultPlaylists

Your Library

  • /library
    • LibHeader (Logo, Playlists, Artists, Albums, GH/LI, Username, Logout)
      • Playlists
        • LikedSongs all user-liked songs
        • PlaylistTiles displays 'Recently Played' and 'Earshot Suggests' playlists
      • Artists
        • ArtistTiles displays user-liked artists and 'Earshot Suggests'
      • Albums
        • AlbumTiles displays user-liked albums and 'Earshot Suggests' TBD: library separate pages? /library/playlists, etc

Create Playlist

  • /newplaylist
    • NavHeader (Logo, GH/LI, Username, Log Out)
    • PlaylistForm
      • Modal onclick (Title, Description, Art)
      • SearchBar
      • SearchResult blank if no search is made
        • CombinedResults list format songs from song/artist/album/playlist results

Liked Songs

  • /library/tracks links playlist of user-liked songs

Playlists (NavSideBarLeft)

Component lists recently played playlists in scrollable side-bar, links directly to playlist show page

  • /library/playlist/:id

Show - Artist, Album, Track, Playlist

  • /artist/:id
    • ArtistHeader Name, Info, Avatar
    • ArtistInteractive Play and Like (dynamic)
    • ArtistContent List popular tracks and info, Tile albums and album art
  • /album/:id
    • AlbumHeader Title, Info, Album Art
    • AlbumInteractive Play and Like (dynamic)
    • AlbumContent Track list and info
  • /track/:id
    • redirect to associated album album/id with track selected
  • /playlist/:id
    • PlaylistHeader Name, Info, Album Art
    • PlaylistInteractive Play, Like (dynamic), and Edit (if user-owned)
      • /playlist/:id/edit redirects and populates data to /newplaylist and takes appropriate action (update, destroy) on submit
    • PlaylistContent Track list and info
Clone this wiki locally