English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 3h 47m | 0.98 GB
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.
Table of Contents
1 Course Introduction
2 Development Environment Setup
3 Module 1 Introduction
4 What is an API?
5 Okay, but what is a REST API?
6 Getting Started with Express
7 Basics of Express Route Handling
8 Module 2 Introduction
9 Getting Started with the Spotify Developer Dashboard
10 Adding nodemon
11 Understanding OAuth
12 Implementing the Authorization Code Flow
13 Module 3 Introduction
14 Create React App & Passing Tokens
15 Optimizing Client/Server Development Workflow
16 Module 4 Introduction
17 Using Local Storage to Persist Login State
18 Fetching & Displaying Data From Spotify
19 Setting Up React Router
20 Setting Up Styled Components
21 Module 5 Introduction
22 Login Page
23 Profile Page
24 Top Artists & Top Tracks Pages
25 Playlists Page
26 Individual Playlist Page
27 Loading Animation
28 Module 6 Introduction
29 Updating Favicons & Share Image
30 Deploying With Heroku
31 Adding a README
32 Wrapping Up What We’ve Learned
Resolve the captcha to access the links!