🎵 Spotify Album Finder App

React + Vite

A responsive React web application that integrates with the Spotify Web API to allow users to search for an artist and dynamically view their albums.

This project demonstrates third-party API integration, OAuth token handling using the Client Credentials flow, pagination management, and proper API rate-limit handling.

Built as a portfolio project to practice real-world API consumption and frontend state management.

🚀 Project Overview

• Search for any artist available on Spotify
• Retrieve album data in real time from Spotify's REST API
• Display album artwork, name, release date, and direct Spotify link
• Handle paginated API responses safely
• Manage rate-limiting errors

---

🛠 Tech Stack

• React (Vite)
• React Bootstrap
• Spotify Web API
• Fetch API

---

🧠 Technical Highlights

• Implemented Spotify OAuth Client Credentials flow
• Managed API keys securely using environment variables
• Prevented infinite API request loops during pagination
• Added response validation to handle rate-limit errors
• Built responsive UI using React-Bootstrap and Flexbox layout

---

🔐 Environment Variables

This project uses Spotify Client Credentials flow.

You must create your own Spotify Developer App to run this project.

1️⃣ Create Spotify App

Go to: https://developer.spotify.com/dashboard

Create a new app and obtain:

• Client ID
• Client Secret

---

2️⃣ Create .env file

In the root directory: Add:

VITE_CLIENT_ID=your_spotify_client_id
VITE_CLIENT_SECRET=your_spotify_client_secret

---

📦 Installation

git clone https://github.com/DesmondJS/Spotify_Album_Finder.git
cd Spotify_Album_Finder
npm install
npm run dev

---

⚠ Important Notes

• Do NOT expose your Client Secret publicly.
• .env is included in .gitignore.
• If you encounter 429 Too Many Requests, wait before retrying.