OAuth-enabled React SPA for searching tracks and creating playlists via the Spotify Web API.
Find a file
Carlos Buitrago 4642c1b1d4 Update README.
2026-03-07 12:37:36 +00:00
.github/workflows fix: grant write permissions to GITHUB_TOKEN. 2026-02-24 22:33:50 +00:00
public Add favicon to browser tab. 2024-10-05 13:21:51 +01:00
src Replace deprecated spotify implicit grant flow with OAuth 2.0 flow (PKCE). 2026-03-07 12:24:05 +00:00
.gitignore Add .env to gitignore. 2024-10-04 10:07:54 +01:00
.prettierrc create project with create-react-app. Install Prettier. 2024-09-30 17:11:31 +01:00
package-lock.json Add react-toastify to show messages when required in order to improve usability. 2024-10-04 18:57:42 +01:00
package.json fix: correct package name format. 2026-02-24 22:21:34 +00:00
README.md Update README. 2026-03-07 12:37:36 +00:00

Deploy Status

Spotify Playlist Manager

A React single-page application integrating the Spotify Web API using OAuth authentication. Authenticated users can search tracks and create playlists directly in their Spotify account.

Overview

  • OAuth (Authorization Code + PKCE) authentication with Spotify Accounts
  • Client-side access token extraction and persistence
  • Track search and playlist creation via Spotify Web API
  • Authorization header management for protected endpoints
  • 401 handling with automatic token invalidation
  • Conditional UI rendering using React Hooks

Stack

React · JavaScript · Spotify Web API · OAuth 2.0 (Authorization Code + PKCE) · GitHub Actions · GitHub Pages

Deployment

The application is automatically built and deployed via GitHub Actions, generating a production bundle with injected environment variables and publishing the /build directory to GitHub Pages on each push.

Next Steps

  • Retrieve and display the users existing playlists
  • Implement playlist editing (track removal and reordering)