Spotify Web API Integration

A pure client-side React application that integrates with the Spotify Web API to provide a range of popular functionalities.

This app use Authorization code PKCE flow which is designed for client-side applications and enhances security by using a code challenge and verifier. It mitigates the risks associated with storing client secrets on the client-side. Learn more about the Spotify PKCE Authorization Flow.

Prerequisites

To run this project, you need to have a premium Spotify account.

Installation

The module "SpotifyController_PKCE" in "src/lib/spotifyController/index.ts" can be reused as a standalone module, which can handle Authorization code PKCE and some other itergration with Spotify API inside a client-side application.

Or you can install the full project following these instructions below

1. Clone the repository:

    git clone https://github.com/tranquochuy645/spotify-web-api-consumer

2. Navigate to the project directory:

    cd spotify-web-api-consumer

3. Install the dependencies:

    npm install

Spotify Developer Account Setup

Before running the application, you need to set up your Spotify Developer account and obtain your client ID and client secret. Follow their instructions: Spotify Web API Documentation.

Configuration

Create a config.ts file in the src directory and export your client id:

Replace the string with your actual Spotify client ID obtained from your Spotify Developer account.

Usage

Run the project in dev mode:

npm run dev

Result