Music Now Playing

A creative music visualization website that shows what I'm currently listening to on Spotify.

Setup

1. Environment Variables

Copy .env.example to .env and fill in your credentials:

cp .env.example .env

2. Spotify API Setup

1. Go to Spotify Developer Dashboard
2. Create a new app
3. Get your Client ID and Client Secret
4. Add http://localhost:4321/callback to Redirect URIs (or your domain)
5. Get a refresh token:
   • Use Spotify OAuth Flow
   • Request scopes: user-read-currently-playing, user-read-recently-played

3. Install & Run

npm install
npm run dev

Visit http://localhost:4321

Features

• Real-time Spotify integration
• GSAP animations
• Live/offline indicator
• Audio preview playback
• Responsive design
• Automatic token refresh (in-memory caching)

Tech Stack

• Astro
• React 19
• TypeScript
• GSAP
• Tailwind CSS 4
• Spotify Web API
• Axios