Have you ever been curious to see what your Spotify data looks like? How a round-up of your listening habits gets compiled every year? Or even wanted to see metadata of your favorite tracks? Luckily, Spotify makes a ton of interesting data like this accessible via the Spotify API. For example, there is data available for every users’ [top tracks and artists](https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-users-top-artists-and-tracks) of all time and [audio features](https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-several-audio-features) like danceability and tempo for every single track.

## Why this course

If you're interested in accessing personalized Spotify data like we mentioned above, Spotify requires your app to be authorized. And to get authorization, you'll need to implement something called OAuth. This course will walk you through every step of the OAuth flow in a concise, easy to follow way. Unlike YouTube tutorials that only cover a few concepts and leave you with half-baked GitHub repositories, we'll cover everything from explaining what REST APIs are to implementing Spotify's OAuth flow to fetching data from the Spotify API in React hooks. Split into seven modules, each lesson includes clear, detailed explanations and complete code examples. By the end of the course, you'll have an app deployed to the internet that you can share with your friends and add to your portfolio.

## What we’ll build

**On the front end**, we’ll build out a professional, responsive user interface with [React](https://reactjs.org/), React Hooks, and the popular CSS-in-JS library, [Styled Components](https://styled-components.com/). We’ll pull in data from the Spotify API using modern ES6 [async/await](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await) methods and display that data in an engaging way.

**On the back end**, we’ll learn the basics of [REST APIs](https://en.wikipedia.org/wiki/Representational_state_transfer), [HTTP requests](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods), and [OAuth](https://oauth.net/). We'll lift the veil on how to [authorize an app with Spotify](https://developer.spotify.com/documentation/general/guides/authorization-guide/), and then build a Node server with the [Express framework](https://expressjs.com/) to handle our authentication requests. Finally, we’ll deploy our app to the internet using [Heroku](https://www.heroku.com/).

![Top Artists](https://d2uusema5elisf.cloudfront.net/courses/build-a-spotify-connected-app/module_00/lesson_00.00/public/assets/screenshot-1.png)

![Top Tracks](https://d2uusema5elisf.cloudfront.net/courses/build-a-spotify-connected-app/module_00/lesson_00.00/public/assets/screenshot-2.png)

![Playlist tracks sorted by tempo](https://d2uusema5elisf.cloudfront.net/courses/build-a-spotify-connected-app/module_00/lesson_00.00/public/assets/screenshot-3.png)

Learn how to build a full stack web app to visualize personalized Spotify data with the help of Node.js, React, Styled Components, and the Spotify Web API.

Build a Spotify Connected App

---
title: How to Build a Spotify Individual Playlist Page in React
description: Build out and style a page for each playlist and let users sort tracks by audio features
privateVideoUrl: https://fullstack.wistia.com/medias/4q2xhxprcf
isPublicLesson: true
---

The last page we're going to build out is the individual Playlist page - not to be confused with the Playlists page! With this page, we're going to display all of the tracks in the playlist as well as add a way for users to sort songs by different [audio features](https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-several-audio-features) like danceability, tempo, and energy. Let's get started!

## Update Route in `App.js`

First, we'll update our router in our `App.js` file to use the `<Playlist />` page component we'll work on building out in the following sections. Again, take care to distinguish this from the `<Playlists />` page component!

```js { actualFilename=./protected/src/01/App.js endLine=9 startLine=9 statedFilename=client/src/App.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.05/protected/src/01/App.js#L9 }
import { Login, Profile, TopArtists, TopTracks, Playlists, Playlist } from './pages';
```

```js { actualFilename=./protected/src/01/App.js endLine=70 startLine=68 statedFilename=client/src/App.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.05/protected/src/01/App.js#L68 }
              <Route path="/playlists/:id">
                <Playlist />
              </Route>
```

Note that unlike all of the other routes, this route has an `:id` param. We'll be using this param to fetch the playlist we want from Spotify.

## Add a `Playlist.js` file and fetch playlist data

Now, we'll stub out a `Playlist.js` file under `client/src/pages` and export it from the `index.js` file, like all the other pages.

```js { actualFilename=./protected/src/01/pages/index.js endChar=300 endLine=7 startChar=0 startLine=1 statedFilename=client/src/pages/index.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.05/protected/src/01/pages/index.js }
export { default as Login } from './Login';
export { default as Playlist } from './Playlist';
export { default as Playlists } from './Playlists';
export { default as Profile } from './Profile';
export { default as TopArtists } from './TopArtists';
export { default as TopTracks } from './TopTracks';
```

```js { actualFilename=./protected/src/01/pages/Playlist.js endChar=95 endLine=8 startChar=0 startLine=1 statedFilename=client/src/pages/Playlist.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.05/protected/src/01/pages/Playlist.js }
const Playlist = () => {
  return (
    <h1>Playlist page</h1>
  )
}

export default Playlist;
```

### Add `getPlaylistsById()` to `spotify.js`

Next, we'll get the ID of the playlist from the URL param and then use that ID to fetch playlist data from the Spotify API with the [`/playlists/{playlist_id}` endpoint](https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-playlist).

First, in our `spotify.js` file, we'll add a `getPlaylistsById` function.

```js { actualFilename=./protected/src/02/spotify.js endLine=172 startLine=164 statedFilename=client/src/spotify.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.05/protected/src/02/spotify.js#L164 }
/**
 * Get a Playlist
 * https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-playlist
 * @param {string} playlist_id - The Spotify ID for the playlist.
 * @returns {Promise}
 */
export const getPlaylistById = playlist_id => {
  return axios.get(`/playlists/${playlist_id}`);
}
```

`getPlaylistsById()` hits the [`https://api.spotify.com/v1/playlists/{playlist_id}`](https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-playlist) endpoint to get us data for an individual playlist.

### Use `id` URL param to fetch playlist data

Then, in our `Playlist.js` file, we'll use [React Router's `useParams` hook](https://reactrouter.com/web/api/Hooks/useparams) to get the ID param off of the URL and pass it to `getPlaylistsById` to fetch our playlist data.

```js { actualFilename=./protected/src/02/pages/Playlist.js endChar=1410 endLine=49 startChar=0 startLine=1 statedFilename=client/src/pages/Playlist.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.05/protected/src/02/pages/Playlist.js }
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { catchErrors } from '../utils'
import { getPlaylistById } from '../spotify';
import { StyledHeader } from '../styles';


const Playlist = () => {
  const { id } = useParams();
  const [playlist, setPlaylist] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const { data } = await getPlaylistById(id);
      setPlaylist(data);
    };

    catchErrors(fetchData());
  }, [id]);

  return (
    <>
    {playlist && (
      <>
        <StyledHeader>
          <div className="header__inner">
            {playlist.images.length && playlist.images[0].url && (
              <img className="header__img" src={playlist.images[0].url} alt="Playlist Artwork"/>
            )}
            <div>
              <div className="header__overline">Playlist</div>
              <h1 className="header__name">{playlist.name}</h1>
              <p className="header__meta">
                {playlist.followers.total ? (
                  <span>{playlist.followers.total} {`follower${playlist.followers.total !== 1 ? 's' : ''}`}</span>
                ) : null}
                <span>{playlist.tracks.total} {`song${playlist.tracks.total !== 1 ? 's' : ''}`}</span>
              </p>
            </div>
          </div>
        </StyledHeader>
      </>
    )}
  </>
  )
}

export default Playlist;
```

### Handle tracks pagination

If you take a look at the JSON being returned from the get playlist endpoint, you'll notice that the `tracks` are being returned in a paging object just like we saw in the previous lesson. The actual track items are in the `items` array.

```json
"tracks": {
  "href": "https://api.spotify.com/v1/users/spotify/playlists/59ZbFPES4DQwEjBpWHzrtC/tracks",
  "items": [
    ...
  ],
  "limit": 100,
  "next": "https://api.spotify.com/v1/users/spotify/playlists/59ZbFPES4DQwEjBpWHzrtC/tracks?offset=100&limit=100",
  "offset": 0,
  "previous": null,
  "total": 105
}
```

We'll implement the same kind of logic from the Playlists page to render all tracks and update our template to render the `<TrackList>` component we have.

```js { actualFilename=./protected/src/03/pages/Playlist.js endChar=2462 endLine=84 startChar=0 startLine=1 statedFilename=client/src/pages/Playlist.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.05/protected/src/03/pages/Playlist.js }
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import { catchErrors } from '../utils'
import { getPlaylistById } from '../spotify';
import { TrackList, SectionWrapper } from '../components';
import { StyledHeader } from '../styles';

const Playlist = () => {
  const { id } = useParams();
  const [playlist, setPlaylist] = useState(null);
  const [tracksData, setTracksData] = useState(null);
  const [tracks, setTracks] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const { data } = await getPlaylistById(id);
      setPlaylist(data);
      setTracksData(data.tracks);
    };

    catchErrors(fetchData());
  }, [id]);

  // When tracksData updates, compile arrays of tracks and audioFeatures
  useEffect(() => {
    if (!tracksData) {
      return;
    }

    // When tracksData updates, check if there are more tracks to fetch
    // then update the state variable
    const fetchMoreData = async () => {
      if (tracksData.next) {
        const { data } = await axios.get(tracksData.next);
        setTracksData(data);
      }
    };

    setTracks(tracks => ([
      ...tracks ? tracks : [],
      ...tracksData.items
    ]));

    catchErrors(fetchMoreData());
  }, [tracksData]);

  return (
    <>
      {playlist && (
        <>
          <StyledHeader>
            <div className="header__inner">
              {playlist.images.length && playlist.images[0].url && (
                <img className="header__img" src={playlist.images[0].url} alt="Playlist Artwork"/>
              )}
              <div>
                <div className="header__overline">Playlist</div>
                <h1 className="header__name">{playlist.name}</h1>
                <p className="header__meta">
                  {playlist.followers.total ? (
                    <span>{playlist.followers.total} {`follower${playlist.followers.total !== 1 ? 's' : ''}`}</span>
                  ) : null}
                  <span>{playlist.tracks.total} {`song${playlist.tracks.total !== 1 ? 's' : ''}`}</span>
                </p>
              </div>
            </div>
          </StyledHeader>

          <main>
            <SectionWrapper title="Playlist" breadcrumb={true}>
              {tracks && (
                <TrackList tracks={tracks} />
              )}
            </SectionWrapper>
          </main>
        </>
      )}
    </>
  )
}

export default Playlist;
```

### Create a memoized array of tracks

You'll see an error in your browser now — this is because we're passing data to the `<TrackList>` component in a way that it doesn't expect. In each track item object, the data `<TrackList>` expects is nested in a `track` property.

To fix this, we'll just create an array of memoized tracks that is structured in a way that works with our `<TrackList>` component.

First, we'll import `useMemo` at the top of our `Playlist.js` file.

```js { actualFilename=./protected/src/04/pages/Playlist.js endLine=1 startLine=1 statedFilename=client/src/pages/Playlist.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.05/protected/src/04/pages/Playlist.js }
import { useState, useEffect, useMemo } from 'react';
```

Next, we'll create a `tracksForTracklist` array that maps over each track item object and returns the data in the nested `track` property.

```js { actualFilename=./protected/src/04/pages/Playlist.js endLine=52 startLine=47 statedFilename=client/src/pages/Playlist.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.05/protected/src/04/pages/Playlist.js#L47 }
  const tracksForTracklist = useMemo(() => {
    if (!tracks) {
      return;
    }
    return tracks.map(({ track }) => track);
  }, [tracks]);
```

Build out and style a page for each playlist and let users sort tracks by audio features