SpotiSpy - Spotify Listening Habits Visualizer

A web application that visualizes your Spotify listening habits by displaying your top artists and tracks with dynamic image sizing based on ranking.

Security Notice

This application requires a Spotify Premium account and uses the Spotify Web Playback SDK. To ensure secure usage:

1. Never commit your .env file to version control
2. Keep your Spotify Client ID private
3. Set up proper redirect URIs in your Spotify Dashboard
4. Use HTTPS in production

Features

• View your top artists and tracks from Spotify
• Choose between different time ranges (4 weeks, 6 months, all time)
• Dynamic visualization with image sizes based on ranking
• Beautiful, responsive UI with hover effects

Setup

1. Create a Spotify Application:

   • Go to Spotify Developer Dashboard
   • Create a new application
   • Note down your Client ID
   • Add your redirect URIs in the app settings

2. Environment Setup:

   # Copy the example environment file
   cp .env.example .env
   
   # Edit .env with your values
   VITE_SPOTIFY_CLIENT_ID=your_client_id_here
   VITE_SPOTIFY_REDIRECT_URI=http://your-domain.com/

3. Install Dependencies:

   npm install

4. Run Development Server:

   npm run dev

Production Deployment

When deploying to production:

1. Use environment variables appropriate for your hosting platform
2. Enable HTTPS
3. Update the redirect URI in your Spotify Dashboard
4. Ensure all sensitive data is properly secured
5. Set up proper CORS headers if needed

Required Spotify Permissions

This app requires the following Spotify permissions:

• streaming
• user-read-email
• user-read-private
• user-read-playback-state
• user-modify-playback-state
• user-read-currently-playing
• user-read-recently-played
• user-top-read

Security Best Practices

1. Token Handling:

   • Never store refresh tokens in localStorage
   • Use secure session storage for temporary tokens
   • Implement proper token refresh mechanisms

2. API Access:

   • Use appropriate CORS settings
   • Implement rate limiting
   • Monitor for suspicious activity

3. User Data:

   • Only request necessary Spotify permissions
   • Handle user data according to GDPR and privacy laws
   • Provide clear privacy policy and terms of service

License

[Add your license here]

Running the Application

1. Start the development server:

   npm run dev

2. Open your browser and navigate to http://localhost:5173
3. Log in with your Spotify account when prompted
4. Use the controls to select between artists/tracks and time ranges
5. Click "Load Data" to fetch and visualize your top items

Technologies Used

• React
• TypeScript
• Vite
• Spotify Web API
• Styled Components

Deploying to Vercel

1. Create a Vercel Account:

   • Go to Vercel and sign up/login
   • Connect your GitHub repository

2. Configure Environment Variables:

   • In your Vercel project settings, go to "Environment Variables"
   • Add the following variables:

     VITE_SPOTIFY_CLIENT_ID=your_spotify_client_id
     VITE_SPOTIFY_REDIRECT_URI=https://your-vercel-domain.vercel.app/
     

3. Update Spotify Dashboard:

   • Go to your Spotify Developer Dashboard
   • Select your app
   • Click "Edit Settings"
   • Add your Vercel domain to the Redirect URIs:

     https://your-vercel-domain.vercel.app/
     

   • Save the changes

4. Deploy:

   • Push your changes to GitHub
   • Vercel will automatically deploy your app
   • Your app will be available at https://your-vercel-domain.vercel.app

5. Verify:

   • Test the authentication flow
   • Ensure playback works correctly
   • Check that all features are working as expected