This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
A personal Spotify analytics web app that lets you explore your listening habits — top tracks, top artists, recently played, and what's currently playing.
- 🔐 Spotify OAuth2 login via PKCE (no client secret exposed)
- 🎧 Currently playing track
- 📊 Top tracks and artists (1 month, 6 months, 1 year)
- 🕘 Recently played (last 50 tracks)
- ⏱️ Minutes listened in the last 7 days
Frontend
- React 18
- React Router v7
- React Bootstrap
- Vite
Auth
- Spotify Web API
- PKCE Authorization Code Flow
Deployment
- Vercel
- Node.js 18+
- A Spotify account
- A registered app on the Spotify Developer Dashboard
git clone https://github.com/your-username/bumper.git
cd bumper
npm installIn your Spotify Developer Dashboard:
- Create an app
- Add
http://localhost:5173/callbackas a Redirect URI - Copy your Client ID
Open src/pages/Login.jsx and update:
const CLIENT_ID = 'your_client_id_here';
const REDIRECT_URI = 'http://localhost:5173/callback';npm run devVisit http://localhost:5173
- Push your repo to GitHub
- Import the project on Vercel
- Add your production redirect URI in the Spotify Dashboard (e.g.
https://your-app.vercel.app/callback) - Update
REDIRECT_URIinLogin.jsxto match - Ensure a
vercel.jsonexists in the project root:
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}This app is currently in Spotify development mode, meaning only manually added users can log in. To request access, contact the developer.
Extended quota mode (public access) is planned for a future release once a backend is in place.
- Mobile responsive UI improvements
- FastAPI backend for secure token exchange and refresh
- Redis session storage
- Docker Compose setup (frontend + backend + Redis)
- Spotify extended quota mode submission
MIT