Demo Application

Learn how the Deezer APIs can be integrated into a real-world application.

We'll cover the following

We gained hands-on experience with the Deezer API endpoints in the previous chapters. Let’s go over the workflow of our functional application.

Workflow

  1. When we run the application, the first page we see is the homepage. The homepage has two main components:

    • Navigation Bar: This contains the search bar, favorites button, playlist button, and login button.
    • Flashcards: There are different flashcards to display top tracks, albums, artists, playlists, and podcasts.

  2. Each flashcard is clickable and upon clicking it, it takes you to the page where more details are shown.

  3. Using the search bar in the header, you can search for any tracks, albums, and artists.

  4. The sign-in button redirects you to the Deezer login page where you will log in to your Deezer account and provide authorizations to the application so that you can view your playlists and favorites.

  5. If you click the heart button in the navigation bar, it takes you to the favorites page where tracks added to the favorites are shown.

  6. The playlist button displays all the playlists that you have created.

The code widget below contains the code for our application. Click the “Run” button to see the react application in action:

Get hands-on with 1400+ tech skills courses.