APP_ID

Application ID present in Deezer My Apps information

SECRET_KEY

Secret Key present in Deezer My Apps information

CODE_FROM_ABOVE

Code returned by Deezer after user authentication which is then used to generate ACCESS_TOKEN

ACCESS_TOKEN

PLAYLIST_ID

ID of the playlist we created in the above code widget

Gain insights into Deezer API, its endpoints, and access keys. Delve into discovering artists, albums, and genres. Learn about integrating Deezer API in a React app.

deezer-final.tar.gz

Deezer React App

Access Token

Deezer is an online music streaming service that gives its users access to millions of songs, playlists, albums, artists, podcasts, etc. Deezer also gives you curated recommendations that fit your liking. 

In this course, you will first get an introduction to the Deezer API and the different endpoints it offers. You’ll then be provided with a step-by-step guide on how to sign up for an account and retrieve the access keys. Then, you will be provided a hands-on guide on performing various tasks using the API. These include discovering artists, exploring different genres, getting information about albums and their tracks, finding top tracks, albums, artists, playlists, podcasts, and searching for resources on Deezer. You will also be provided with a hands-on guide to integrating Deezer’s API in a functioning React application. 

By the end of this course, you will be equipped with the skills needed to develop applications and integrations using Deezer’s API.

Getting Started with the Deezer API in JavaScript

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:

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

Introduction

Artists and Genre

Albums and Tracks

Playlists

Charts and Search Deezer Resources

The Deezer API Integration in React

Conclusion

Appendix

Demo Application

Workflow