Course Introduction

Overview of what this course is, who this course is for, and what we'll be building

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents
  • |

Lesson Transcript

  • [00:00 - 00:08] Hi everyone, welcome to Build a Spotify Connected App. My name is Brittany Chang and I'll be your instructor for this course.

  • [00:09 - 00:25] I've been building stuff for the web for over six years and along the way I've learned a ton of tips and tricks that I'm going to share with you over the next seven modules. We're going to be covering a lot of ground with this course and by the end you 'll have an app deployed to the internet that you can share with your friends.

  • [00:26 - 00:35] So who's this course for? This course is for anyone interested in building and deploying a full stack web application that integrates with the Spotify Web API.

  • [00:36 - 00:57] Specifically if you've been struggling with understanding and implementing Spotify's OAuth flow to allow users to log into Spotify in your app, this course is for you. If you're a front end developer and want to gain more experience with back end web technologies like Node.js, Express and third party APIs, this course is for you too.

  • [00:58 - 01:09] To get the most out of this course you'll want to have a few things under your belt first. First an intermediate understanding of HTML, CSS and ES6 JavaScript.

  • [01:10 - 01:16] Second basic knowledge of the React framework and React hooks. And third a Spotify account.

  • [01:17 - 01:32] You can totally create a Spotify account right now if you don't have one but the app is going to be a lot more interesting if you've accumulated some Spotify history already . So what we're going to be building in this course is a web app to visualize personalized Spotify data.

  • [01:33 - 01:46] We're going to do this with the help of Node.js, Express, React, Style components and the Spotify API. The Spotify API makes a lot of interesting data available that isn't readily accessible to the general public.

  • [01:47 - 02:06] For example your top tracks and artists of all time, audio features like Danc ibility and Tempo for individual tracks and dynamic recommendations based on a given set of tracks. The goal of our app is going to be to leverage the Spotify web API to provide users with more of their personalized Spotify data.

  • [02:07 - 02:20] Kind of like the data you get from your Spotify wrapped year in review. On the front end we'll build out a professional responsive user interface with React, React hooks and the popular CSS in JS library style components.

  • [02:21 - 02:33] We'll pull in data from the Spotify API using modern ES6 async await methods and display that data in an engaging way. On the back end we'll learn the basics of REST APIs, HTTP requests and OAuth.

  • [02:34 - 02:47] We'll lift the veil on how to authorize an app with Spotify and then build a Node server with the Express framework to handle our authentication requests. Finally, we'll deploy our app to the internet using Heroku.

  • [02:48 - 02:59] So if you've ever checked out your profile page on Spotify, you'll see that they have some interesting information such as your top artists and top tracks. ARAP is going to be very similar to this.

  • [03:00 - 03:16] You can check out a final demo of the app at Spotifyprofilev2.herokuapp.com. Here we let users log in to Spotify and then once they're logged in they can see their top artists, their top tracks and their playlists.

  • [03:17 - 03:41] They are also able to see the different time ranges for their top artists or top tracks, like their top artists in the last six months, all time or just the past four weeks. For playlists they will be able to check out a playlist and sort the tracks by different audio features like Densibility, Tempo or Energy.

  • [03:42 - 03:55] And like I mentioned before, we're going to be accomplishing this with the help of Node.js, Express, React, Style Components and of course the Spotify API. So what are we going to learn in this course?

  • [03:56 - 04:11] In module zero, the module you're in, we're going to be setting up our development environments. In module one, we're going to be learning the basics of APIs and REST principles and how they're relevant to the way we're going to interact with a Spotify API later in this course.

  • [04:12 - 04:26] Then we'll introduce the Express framework and learn the basics of how to handle HTTP requests with Express route handlers. In module two, we'll learn all about OAuth and how it relates to the various authorization flows that are possible with Spotify.

  • [04:27 - 04:45] Then we'll implement Spotify's authorization code flow with our Express app by creating route handlers to interact with the Spotify account service. Once that's all wired up, we'll use our newly acquired Spotify authorization token to test out how to request user data from the Spotify Web API.

  • [04:46 - 04:58] In module three, we'll set up a React app for the front and upper app. We'll configure our project to handle two package.json files and update our workflow to run both client side and server side code at the same time.

  • [04:59 - 05:16] We'll also learn how to pass the Spotify OAuth access token we retrieved from the previous module from our node server to our React app. In module four, we'll learn how to store our Spotify access token in local storage so users don't have to go through the auth flow every time they visit our app.

  • [05:17 - 05:33] We'll also set up a way to automatically refresh the access token when it expires without interrupting the user experience. Additionally, we'll set up our first API call from the React app to the Spotify API and display data from the response in our template.

  • [05:34 - 05:43] Then we'll set up React Router and style components to scaffold out our front end architecture. In module five, we'll be putting in some work to build out our React app.

  • [05:44 - 06:02] We'll use style components to style our UI and then add some features leveraging the Spotify API that the Spotify app doesn't provide out of the box. This will include things like sorting playlists by audio features and toggling between different timeframes for calculating your top artists and top tracks.

  • [06:03 - 06:15] In module six, we're going to go through the steps on how to prepare our app for production and deploy it to the internet with Heroku. And then in module seven, we'll wrap up what we've learned in this course.

  • [06:16 - 06:29] At the beginning of each module, there will be a zip file available with a completed code from the previous module. So if you're having trouble with the code for module two, look to the code in the zip file at the start of module three for the answer.

  • [06:30 - 06:40] Of course, if you ever have a question or stuck on a lesson, you can comment in line or ask in the new line discord. The link will be in the manuscript below.

  • [06:41 - 06:44] Thanks for checking out this course and I'm so excited to have you here. Let's get started.

Hi everyone, welcome to Build a Spotify Connected App. My name is Brittany Chang and I'll be your instructor for this course. I've been building stuff for the web for over six years and along the way I've learned a ton of tips and tricks that I'm going to share with you over the next seven modules. We're going to be covering a lot of ground with this course and by the end you 'll have an app deployed to the internet that you can share with your friends. So who's this course for? This course is for anyone interested in building and deploying a full stack web application that integrates with the Spotify Web API. Specifically if you've been struggling with understanding and implementing Spotify's OAuth flow to allow users to log into Spotify in your app, this course is for you. If you're a front end developer and want to gain more experience with back end web technologies like Node.js, Express and third party APIs, this course is for you too. To get the most out of this course you'll want to have a few things under your belt first. First an intermediate understanding of HTML, CSS and ES6 JavaScript. Second basic knowledge of the React framework and React hooks. And third a Spotify account. You can totally create a Spotify account right now if you don't have one but the app is going to be a lot more interesting if you've accumulated some Spotify history already . So what we're going to be building in this course is a web app to visualize personalized Spotify data. We're going to do this with the help of Node.js, Express, React, Style components and the Spotify API. The Spotify API makes a lot of interesting data available that isn't readily accessible to the general public. For example your top tracks and artists of all time, audio features like Danc ibility and Tempo for individual tracks and dynamic recommendations based on a given set of tracks. The goal of our app is going to be to leverage the Spotify web API to provide users with more of their personalized Spotify data. Kind of like the data you get from your Spotify wrapped year in review. On the front end we'll build out a professional responsive user interface with React, React hooks and the popular CSS in JS library style components. We'll pull in data from the Spotify API using modern ES6 async await methods and display that data in an engaging way. On the back end we'll learn the basics of REST APIs, HTTP requests and OAuth. We'll lift the veil on how to authorize an app with Spotify and then build a Node server with the Express framework to handle our authentication requests. Finally, we'll deploy our app to the internet using Heroku. So if you've ever checked out your profile page on Spotify, you'll see that they have some interesting information such as your top artists and top tracks. ARAP is going to be very similar to this. You can check out a final demo of the app at Spotifyprofilev2.herokuapp.com. Here we let users log in to Spotify and then once they're logged in they can see their top artists, their top tracks and their playlists. They are also able to see the different time ranges for their top artists or top tracks, like their top artists in the last six months, all time or just the past four weeks. For playlists they will be able to check out a playlist and sort the tracks by different audio features like Densibility, Tempo or Energy. And like I mentioned before, we're going to be accomplishing this with the help of Node.js, Express, React, Style Components and of course the Spotify API. So what are we going to learn in this course? In module zero, the module you're in, we're going to be setting up our development environments. In module one, we're going to be learning the basics of APIs and REST principles and how they're relevant to the way we're going to interact with a Spotify API later in this course. Then we'll introduce the Express framework and learn the basics of how to handle HTTP requests with Express route handlers. In module two, we'll learn all about OAuth and how it relates to the various authorization flows that are possible with Spotify. Then we'll implement Spotify's authorization code flow with our Express app by creating route handlers to interact with the Spotify account service. Once that's all wired up, we'll use our newly acquired Spotify authorization token to test out how to request user data from the Spotify Web API. In module three, we'll set up a React app for the front and upper app. We'll configure our project to handle two package.json files and update our workflow to run both client side and server side code at the same time. We'll also learn how to pass the Spotify OAuth access token we retrieved from the previous module from our node server to our React app. In module four, we'll learn how to store our Spotify access token in local storage so users don't have to go through the auth flow every time they visit our app. We'll also set up a way to automatically refresh the access token when it expires without interrupting the user experience. Additionally, we'll set up our first API call from the React app to the Spotify API and display data from the response in our template. Then we'll set up React Router and style components to scaffold out our front end architecture. In module five, we'll be putting in some work to build out our React app. We'll use style components to style our UI and then add some features leveraging the Spotify API that the Spotify app doesn't provide out of the box. This will include things like sorting playlists by audio features and toggling between different timeframes for calculating your top artists and top tracks. In module six, we're going to go through the steps on how to prepare our app for production and deploy it to the internet with Heroku. And then in module seven, we'll wrap up what we've learned in this course. At the beginning of each module, there will be a zip file available with a completed code from the previous module. So if you're having trouble with the code for module two, look to the code in the zip file at the start of module three for the answer. Of course, if you ever have a question or stuck on a lesson, you can comment in line or ask in the new line discord. The link will be in the manuscript below. Thanks for checking out this course and I'm so excited to have you here. Let's get started. [BLANK_AUDIO]