This change requires saving the album cover with the width and height as extra parameters.

Create a detailed view for an spotify object (Album / Track / Artist)

Show the artist albums

Create a Settings Page with the Tab Component

Tab 1: User Settings

• Delete Account
• Toggle View between Premium - No Premium

Tab 2: Cache Settings

• Flush Cache
• Quick Refresh Cache
• Full Cache Refresh

Allow the user to Log In automatically after the Authentication Token has expired by using the refresh token.

Store both tokens inside a Cookie.

• Auth Token as a Session Cookie
• Refresh Token as a 14 days cookie.

Some tests require to check that an specific string appears in a mounted component. A good practice is to use the internationalized string output as the assert string.

https://github.com/i18next/react-i18next

Typescript feels way slower since the upgrade (14bbea8).

microsoft/TypeScript#44851

This view will be used across all the pages that render cards (Home Page, random, albums, etc).

RF:

• Implement a search / filter box
• Implement a Sort menu
• Implement a Toggle View button (That Toggles between full cards and small / line cards)
• Implement a Pagination Bar

UX:

• Infinite Scroll Loading (Must be tuned for mobile devices)
• Loading Track placeholder Proxy
• Differentiate between No results and Login

Props

• Toggle View
• Is Loading
• Current View (So it can differentiate between Horizontal and vertical)
• Cards to Render (as children)
• Sort Menu (For the specific items)
• InputFilter props

Create a component that allows the user to add some of the tracks to an specific playlist or create a new one.

Use DexieDB (IndexedDB wrapper) as a local cache in order to save some of the static data locally.

Create a wrapper that checks if the user has enough privileges to access an specific page / route / component.

Privileges:

• Is Admin
• Is Logged

Show an skeleton track card while the tracks are loading.

#23

Create a style guide of the different elements of the website with Catalog

• Define a Context that manages the current theme.
• Define a function that saves and toggles the current theme.
• Configure Tailwind to allow the use of the :dark pseudoclass.

Create a context to access the Api Object from any React Component.

All the requirements are in the issue #23

Implement a navigation bar only visible in large screens that includes:

• Logo / Title
• User Picture + Log In / Log Out
• User Settings
• Links to the different pages
• Github Repo Link
• Help Page Link
• Toggle Language Link?
• TBD

• Card View
• List View

Create a card item that displays track information as a card

Spotify API has a limit of 50 items (20 albums) per request.
LastFM API has a limit 1 item per request.

This request could be done in batches of two or three request in parallel to greatly improve the facade performance.

Create a Modal component that will be use to render any component across all the pages.

The modal can be closed by:

• Clicking the BackGround
• Clicking the Close Button
• Pressing ESC key
• Back browser action.

Format the code and remove unused imports on every commit.

The main idea is write the integration tests in Cypress as it seems to be the most advanced integration / system testing framework for JS at the moment.

This action must be completed before the configuration for unit testing.

Create a homepage that displays the user most listened tracks in the past hours, month, year and since the creation of the account.

Filters the Track View

This button should appear by default but it could be toggled with an optional prop

• Artist
• Album
• Artist Genre
• Artist Popularity
• Release date
• Album Popularity

• Move the top navigation down to the bottom and make it larger to improve accessibility.
• Remove the rounded corners
• Fix the not centered buttons.

Document every api endpoint with this template so they can be translated into the OpenAPI specification.

Implement an artist view based on the generic card view

Show a spinner in the top of the page if the facade is in use