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 implement the Spotify OAuth flow with JavaScript

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.

Top Artists

Top Tracks

Playlist tracks sorted by tempo

Course Content

7 modules32 lessons3h 47m total

Intro & Dev Environment Setup

2 lessons 13m total

Course Introduction

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

INTRODUCTION

6:46 minutes

Development Environment Setup

Getting our local development environments set up with nvm

LESSON

6:19 minutes

Getting Started with REST APIs & Express

5 lessons 24m total

INTRODUCTION

1:04 minutes

What is an API?

An introduction to APIs in web development

LESSON

4:09 minutes

Okay, but what is a REST API?

Learn the basics of REST principles and HTTP requests & responses

LESSON

9:38 minutes

Getting Started with Express

Hello World with the Express framework

LESSON

3:57 minutes

Basics of Express Route Handling

Learn the basics of writing Express route handlers

LESSON

5:27 minutes

Authentication & Authorization with Spotify

5 lessons 36m total

INTRODUCTION

0:55 minutes

Getting Started with the Spotify Developer Dashboard

Get your app set up in the Spotify developer dashboard

LESSON

3:16 minutes

Adding nodemon

Set up nodemon to streamline our Node.js development workflow

LESSON

2:54 minutes

Understanding OAuth

Learn how OAuth works and how it will work with the Spotify API

LESSON

8:56 minutes

Implementing the Authorization Code Flow

Build out Spotify's Authorization Code OAuth flow with Express

LESSON

20:00 minutes

Setting Up a React Front-End

3 lessons 15m total

INTRODUCTION

0:57 minutes

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

LESSON

7:59 minutes

Optimizing Client/Server Development Workflow

Streamline development in a client/server architecture with Concurrently

LESSON

6:32 minutes

Login State & Front-End Scaffolding

5 lessons 40m total

INTRODUCTION

1:18 minutes

Using Local Storage to Persist Login State

Learn how to use local storage to let users log in and log out

LESSON

13:10 minutes

Fetching & Displaying Data From Spotify

Use axios to send a request to the Spotify Web API and render response data on the front end

LESSON

7:11 minutes

Setting Up React Router

Scaffold out our app's pages with React Router

LESSON

4:18 minutes

Setting Up Styled Components

Install and configure Styled Components in our React app

LESSON

14:43 minutes

Building & Styling the UI

7 lessons1h 14m total

INTRODUCTION

1:12 minutes

Login Page

Build out and style the login page

LESSON

2:03 minutes

Profile Page

Build out and style the profile page

LESSON

24:33 minutes

Top Artists & Top Tracks Pages

Build out and style the top artists & top tracks pages

LESSON

14:59 minutes

Playlists Page

Build out and style the playlists page

LESSON

11:11 minutes

Individual Playlist Page

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

LESSON

16:50 minutes

Loading Animation

Add a loading state for our React components

LESSON

3:49 minutes

Deploying to the Internet

4 lessons 20m total

INTRODUCTION

0:39 minutes

Updating Favicons & Share Image

Add a custom favicon and share image to our app

LESSON

5:52 minutes

Deploying With Heroku

Deploy our app to the internet with Heroku

LESSON

12:36 minutes

Adding a README

Add a descriptive and helpful README to our project

LESSON

1:43 minutes

Course Wrap Up

1 lesson 1m total

CONCLUSION

1:59 minutes

Your Instructors

bchiang7

Brittany Chiang

👋 Hey there! I'm Brittany and I'm a software engineer specializing in building exceptional digital experiences. I've been building things for the web for over 7 years, and along the way I've had the privilege of working for a bunch of different companies like Apple, Starry Internet, and most recently, Upstatement. I've built many different kinds of websites and digital products with tools like React, Vue, WordPress, Node.js, and more. At the end of the day, I'm not picky about the tech stack I'm using, as long as I'm building something cool!

Hey there! I'm Brittany and I'm a software engineer specializing in building exceptional digital experiences. I've been building things for the web for over 7 years, and along the way I've had the privilege of working for a bunch of different companies like Apple, Starry Internet, and most recently, Upstatement. I've built many different kinds of websites and digital products with tools like React, Vue, WordPress, and Node.js, and I've learned a ton of tips and tricks that I'll share with you throughout the course. I hope you'll join me!

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?

To get the most out of this course, you'll want to have a few things under your belt first. 1) An intermediate understanding of HTML, CSS, and modern (ES6+) JavaScript. 2) Basic knowledge of the React framework and React Hooks. 3) A Spotify account (you can create a Spotify account for free if you don't have one, but the app will be more interesting if you've accumulated some Spotify history already).

What if I need help?

You can ask us questions anytime through the community Discord channel or by sending us a message.

$39

$49

OrGet this course and every newline Book and Guide with a newline Pro subscription for just $20/mo
  • 32 lessons (3h 47m)

  • 1 complete project

  • 1,993 lines of code

Build a Spotify Connected App

$39

$49