Skip to main content

Build a Spotify Connected App

3h 47m 28s
English
Paid

Course description

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.

Read more about the course

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 APIsHTTP 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.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 32 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Course Introduction

All Course Lessons (32)

#Lesson TitleDurationAccess
1
Course Introduction Demo
06:47
2
Development Environment Setup
06:20
3
Module 1 Introduction
01:05
4
What is an API?
04:10
5
Okay, but what is a REST API?
09:39
6
Getting Started with Express
03:58
7
Basics of Express Route Handling
05:28
8
Module 2 Introduction
00:56
9
Getting Started with the Spotify Developer Dashboard
03:17
10
Adding nodemon
02:55
11
Understanding OAuth
08:57
12
Implementing the Authorization Code Flow
20:01
13
Module 3 Introduction
00:58
14
Create React App & Passing Tokens
08:00
15
Optimizing Client/Server Development Workflow
06:33
16
Module 4 Introduction
01:19
17
Using Local Storage to Persist Login State
13:11
18
Fetching & Displaying Data From Spotify
07:12
19
Setting Up React Router
04:20
20
Setting Up Styled Components
14:44
21
Module 5 Introduction
01:13
22
Login Page
02:04
23
Profile Page
24:34
24
Top Artists & Top Tracks Pages
15:00
25
Playlists Page
11:12
26
Individual Playlist Page
16:51
27
Loading Animation
03:50
28
Module 6 Introduction
00:40
29
Updating Favicons & Share Image
05:53
30
Deploying With Heroku
12:37
31
Adding a README
01:44
32
Wrapping Up What We’ve Learned
02:00

Unlock unlimited learning

Get instant access to all 31 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Build a Shopping Cart App

Build a Shopping Cart App

Sources: Reed Barger
Gain expert skills to build and deploy an amazing React app. An epic training course that gives you the entire process to build and deploy your own top-tier e-c
1 hour 41 minutes 52 seconds
TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL

TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL

Sources: fullstack.io
Learn advanced React, Node, TypeScript, and GraphQL by creating a ready-to-use application in this online course. Explore each of these technologies and find out how to create a...
30 hours 50 minutes 42 seconds
Building a Component Library with Storybook

Building a Component Library with Storybook

Sources: learn.handlebarlabs.com
Learn to create a library of components that are easy to use, self documenting, and easily tested. I've found that using Storybook to define my component's API
1 hour 10 minutes 41 seconds