Build a Spotify Connected App
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.
What You Will Learn
Principles of REST APIs and how they relate to the Spotify API
What OAuth is and how it works
How to use local storage to store auth tokens
How to fetch data from the Spotify API in a React app
How to handle async code with React hooks and async/await
How to efficiently style an app with Styled Components
How to deploy an app with a React front-end and Node.js back-end to Heroku
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 of all time and 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, React Hooks, and the popular CSS-in-JS library, Styled 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.
Intro & Dev Environment Setup
Getting Started with REST APIs & Express
What is an API?
An introduction to APIs in web development
Okay, but what is a REST API?
Learn the basics of REST principles and HTTP requests & responses
Getting Started with Express
Hello World with the Express framework
Basics of Express Route Handling
Learn the basics of writing Express route handlers
Authentication & Authorization with Spotify
Getting Started with the Spotify Developer Dashboard
Get your app set up in the Spotify developer dashboard
Set up nodemon to streamline our Node.js development workflow
Learn how OAuth works and how it will work with the Spotify API
Implementing the Authorization Code Flow
Build out Spotify's Authorization Code OAuth flow with Express
Setting Up a React Front-End
Create React App & Passing Tokens
Use Create React App to quickly spin up a React front end and pass OAuth tokens from server to client
Optimizing Client/Server Development Workflow
Streamline development in a client/server architecture with Concurrently
Login State & Front-End Scaffolding
Using Local Storage to Persist Login State
Learn how to use local storage to let users log in and log out
Fetching & Displaying Data From Spotify
Use axios to send a request to the Spotify Web API and render response data on the front end
Setting Up React Router
Scaffold out our app's pages with React Router
Setting Up Styled Components
Install and configure Styled Components in our React app
Building & Styling the UI
Build out and style the login page
Build out and style the profile page
Top Artists & Top Tracks Pages
Build out and style the top artists & top tracks pages
Build out and style the playlists page
Individual Playlist Page
Build out and style a page for each playlist and let users sort tracks by audio features
Add a loading state for our React components
Deploying to the Internet
Updating Favicons & Share Image
Add a custom favicon and share image to our app
Deploying With Heroku
Deploy our app to the internet with Heroku
Adding a README
Add a descriptive and helpful README to our project
Course Wrap Up
Frequently Asked Questions
Who is 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 or implementing Spotify's OAuth flow to allow users to log in with 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!
Are there any prerequisites?
What if I need help?
You can ask us questions anytime through the community Discord channel or by sending us a message.
32 lessons (3h 47m)
1 complete project
1,993 lines of code