Spotify Stats Dashboard 🎵

A modern web application that connects with the Spotify Web API to display personalized listening stats, including top tracks and favorite artists. This project demonstrates OAuth implementation, API integration, and CI/CD pipelines for seamless deployment.

---

🚀 Features

• OAuth Authentication: Secure Spotify login using the Authorization Code Flow.
• User Insights: View top tracks, artists, and personalized stats.
• Modern UI: Responsive design built with React and Vite.
• CI/CD Integration: Automated builds and deployments using Netlify.

---

🛠️ Tech Stack

• Frontend: React, Vite, React Router
• Backend: Node.js, Express (optional, for secure API calls)
• API: Spotify Web API - https://developer.spotify.com/documentation/web-api
• CI/CD: GitHub Actions and Netlify

---

🌟 What I Learned

• OAuth 2.0: Implementing Spotify's Authorization Code Flow securely and managing tokens.
• API Integration: Fetching user-specific data with RESTful APIs.
• CI/CD Pipelines: Automating builds and deployments for the frontend with Netlify.
• Environment Management: Handling sensitive credentials securely in development and production.
• Frontend Development: Using React and Vite for fast, modular, and maintainable code.

---

🔧 Setup

1. Clone the repo and install dependencies:

   git clone https://github.com/hahaem1ly/spotify-stats-dashboard.git
   cd spotify-stats-dashboard/frontend
   npm install

2. Add a .env file to frontend:

   VITE_SPOTIFY_CLIENT_ID=<your_client_id>
   VITE_REDIRECT_URI=http://localhost:5173/callback
   

3. Start the app:

   npm run dev

---

🌐 Live Demo

Try the app here!

---

📚 Why This Project?

This project highlights my ability to:

• Build modern web applications with clean and modular code.
• Implement secure user authentication workflows.
• Leverage CI/CD tools for professional-grade deployment workflows.

---