Home Page
This is the Metrinom Homepage.
This is the first page visible to the User when they have logged in.
This page shows the user a general summary of most of the information that is available within this web app within an auto-scrolling carousel.
Information Shown:
- Users Number one medium_term artist
- Users Number one medium_term track
- Users Top 5 Genres
The three different pieces of information are shown within an auto-scrolling infinite carousel (pure-react-carousel) of a transition every 2.5 seconds. Material UI components are used to display the information which each enclosed within a Grid.
This is the first view that is shown on the homepage using a Carousel.
The Top track is enclosed within a Card component where the titles and headers use a Card Header. The track information is sourced from the user's top Tracks API using the timeframe: medium_term, type: tracks variable and the first item in the response is retrieved which correlates to the user's number one track.
This is the second view that is shown on the homepage using a Carousel.
The Top Artist is enclosed with the same format as the top track component. The track information is sourced from the user's top Artists API using the timeframe: medium_term, type: artists variable and the first item in the response is retrieved which correlates to the user's number one artist.
This is the third view that is shown on the homepage using a Carousel.
The Top 5 Genres are also enclosed using a Grid component. The chart library recharts is used to display the information in the form of a bar graph. We used the Genres API to retrieve all the top genres and splices the array to only show the top 5.