Demo Application

Look at how the Spotify API can be integrated into a functional React application.

We'll cover the following

Let's look at a React app that uses some of the previously discussed Spotify API endpoints to retrieve the requested data. We'll call the following Spotify endpoints in this application:

  • Featured Playlists
  • Playlist’s Information
  • Search
  • Audio Features
  • New Releases
  • Album’s Information
  • Artist’s Top Tracks

Application workflow

Let's look at the application workflow from the user's perspective:

  • When the application starts we are presented with the homepage. This page has three featured playlists, three newly released albums, and a navbar.

  • Using the search bar in the navbar, we can search for any artist.

  • If we click on any of the playlists on the homepage, we're redirected to the playlists page which contains information about the tracks in the playlist.

  • Similarly, clicking on any album redirects us to the albums page which contains information about the tracks in the album.

Demo application

The widget below contains the code for our application. Click the "Run" button to see the app in action.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    
     <!-- Latest compiled and minified CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
 
     <!-- Latest compiled JavaScript -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
     
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Music Database</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
Demo application

Code explanation

Let's look at the code to understand how we've integrated the API into the application.

Note: We use a custom hook useFetch to call the API and return the response to the components.

Our application contains different components, each of which performs a specific function. Let's look at the components of our app.

  • Home: This component renders the homepage of the app.

  • FeaturedPlaylists: This component renders three playlists featured on Spotify.

    • Line 17: We use the custom hook useFetch to call the Get Featured Playlists endpoint of the Spotify API. The response is saved in data and the response status is saved in responseStatus.

    • Lines 25–52: We render the response in our required format.

  • NewReleases: This component renders three newly released albums. Its code structure is similar to that of FeaturedPlaylists.

  • Playlist: This component renders information about tracks on a playlist. It also provides previews of the tracks (depending on availability on Spotify).

  • Album: This component renders information about tracks in an album.

  • Artists: This component shows information about the tracks of an artist along with the previews of the tracks.

  • AudioAnalysis: This component displays a bar chart based on the data received from the Get Track’s Audio Features endpoint.

  • SearchedArtist: This component provides us a list of all the artists that match our search criteria when we search for an artist using the search tool in the navbar.