Build a Spotify Connected App

3h 47m 28s
English
Paid

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 Build a Spotify Connected App

Join premium to watch
Go to premium
# Title Duration
1 Course Introduction 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

Similar courses to Build a Spotify Connected App

Composing Layouts in React

Composing Layouts in Reactfullstack.io

Category: React.js, CSS
Duration 4 hours 38 minutes 12 seconds
Instagram Clone Coding 3.0

Instagram Clone Coding 3.0Nomad Coders

Category: React.js, Node.js, GraphQL, React Native
Duration 20 hours 48 minutes 39 seconds
Full-Stack React with GraphQL and Apollo Boost

Full-Stack React with GraphQL and Apollo Boostudemy

Category: React.js, Node.js, MongoDB, GraphQL
Duration 6 hours 54 minutes 31 seconds
Loopback 4: Modern ways to Build APIs in Typescript & NodeJs

Loopback 4: Modern ways to Build APIs in Typescript & NodeJsudemy

Category: TypeScript, Node.js, MongoDB
Duration 5 hours 14 minutes 32 seconds
React and NestJS: A Practical Guide with Docker

React and NestJS: A Practical Guide with Dockerudemy

Category: React.js, Docker, NestJS
Duration 6 hours 54 minutes 20 seconds
MobX In Depth With React(Hooks+TypeScript)

MobX In Depth With React(Hooks+TypeScript)udemy

Category: React.js, Other (Tools)
Duration 2 hours 25 minutes 54 seconds
React Supabase Full Course

React Supabase Full Coursefireship.io

Category: React.js
Duration 1 hour 39 minutes 49 seconds
Master Full-Stack Web Development | Node, SQL, React, & More

Master Full-Stack Web Development | Node, SQL, React, & Moreudemy

Category: React.js, Node.js
Duration 18 hours 36 minutes 51 seconds
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide

React, NodeJS, Express & MongoDB - The MERN Fullstack Guideudemy

Category: React.js, Node.js, MongoDB
Duration 18 hours 45 minutes 10 seconds
React Summit Remote Edition 2021

React Summit Remote Edition 2021reactsummit.com

Category: React.js, Conferences
Duration 16 hours 1 minute 10 seconds