Building your own app

Assuming you've read everything else beforehand (or if you're already comfortable with React), then the next steps for you should be the creation of a React app to communicate with an external API, in this case Spotify's API.

Please follow the link above to get started on how to use and set up their API when building your local web app.

In terms of requisites for this app you will be building, these are the tasks we want you to complete:

(each task's estimated duration is within brackets and color coded in terms of difficulty)

• Start up your React app project locally using Vite (1-2 hours)
• A single public access page, with a button to log in to a Spotify account (4-8 hours)
• Once logging in, show a top banner with:
  • a search bar that allows searching for artists, albums and/or tracks, and shows the results of the search on a dropdown container with links to each (3-6 hours)
  • the current user's avatar, name and a logout button (<1 hour)
• Several pages protected by authentication, for the following:
  • a Home page, showing the "top 5 artists" and "top 5 tracks" with links to each (1-2 hours)
  • a dynamic page for each artist, containing the artist's albums and top tracks, with links to each of them (<1 hour)
  • a dynamic page for each album, containing information and links to all tracks (<1 hour)
  • a dynamic page for each track, showing some basic information (i.e. name, image, release date, artist name, album name, track duration and popularity) (<1 hour)

If you have any doubts on how to implement some of these pages, we suggest reading back on how to use React Router, perform Authentication and the basics of state management in React!

As you complete each task, feel free to publish your code on a public repository (i.e. on Github), so that we can guide you and evaluate your work.

Happy coding!