skip to content
Avatar Bruno Garcia

App developed with React & the API of Spotify

react , spotify

Full stack web app to visualize personalized Spotify data with the help of Node.js, React, Styled Components, and the Spotify Web API

Image of the app

Resume

Full stack web app to visualize personalized Spotify data with the help of Node.js, React, Styled Components, and the Spotify Web API.

Following the instructions of the course Build a Spotify Connected App.

Client

  • Build out a professional, responsive user interface with React, React Hooks, React Query, and the popular CSS-in-JS library, Styled Components.
  • Pull in data from the Spotify API using modern ES6 async/await methods and display that data in an engaging way.
  • Use Storybook for building UI components and pages in isolation.
  • Use Mock Service Worker as API mocking library. This library uses Service Worker API to intercept actual requests.
  • Use Zod as TypeScript-first schema validation with static type inference.
  • Use Vercel Serverless Functions to handle the authentication flow.

Server

  • Apply the basics of REST APIs, HTTP requests, and OAuth.
  • Authorize an app with Spotify.
  • Build a Node server with the Express framework to handle our authentication requests

See in action

https://bge-spotify-react.vercel.app

Github

Check out the source code on Github.

https://github.com/brunogarcia/react-spotify