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.
To run this project, you need to have a premium Spotify account.
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
- Clone the repository:
git clone https://github.com/tranquochuy645/spotify-web-api-consumer
- Navigate to the project directory:
cd spotify-web-api-consumer
- Install the dependencies:
npm install
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.
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.
Run the project in dev mode:
npm run dev