Spotify Client App

A React application that demonstrates Spotify Web API authentication and displays user profile information and playlists with the ability to add songs to playlists. Please note that this is purely for educational purposes.

Features

• Spotify OAuth 2.0 authentication using PKCE flow
• Display user profile information including:
  • Display name
  • Profile image
  • User ID
  • Email
  • Country
  • Follower count
  • Spotify URI and profile links
• Browse user playlists including:
  • Playlist images and names
  • Track counts
  • Owner information
  • Public/private status
  • Collaborative playlists
  • Pagination support
• Add songs to playlists:
  • Search for songs by name, artist, or album
  • Select multiple tracks to add
  • Choose from user's playlists
  • Real-time feedback and error handling
• Modern React with TypeScript
• Responsive design with Spotify branding
• Navigation between Profile and Playlists views

Setup Instructions

1. Create a Spotify App

1. Go to Spotify Developer Dashboard
2. Log in with your Spotify account
3. Click "Create App"
4. Fill in the app details:
   • App name: "Spotify Client App" (or any name you prefer)
   • App description: "A React app to view Spotify profile data and manage playlists"
   • Redirect URI: http://127.0.0.1:5173/callback
   • Website: http://127.0.0.1:5173
5. Click "Save"

2. Get Your Client ID

1. After creating the app, you'll see your Client ID
2. Copy the Client ID

3. Set Up Environment Variables

1. Create a .env file in the root directory
2. Add your Spotify Client ID:

VITE_SPOTIFY_CLIENT_ID=your_actual_client_id_here

4. Install Dependencies

npm install

5. Run the Application

npm run dev

The application will be available at http://127.0.0.1:5173

How It Works

1. Authentication Flow: The app uses Spotify's OAuth 2.0 PKCE (Proof Key for Code Exchange) flow for secure authentication
2. User Authorization: Users are redirected to Spotify to authorize the application with required scopes
3. Profile Data: After authorization, the app fetches and displays the user's profile information
4. Playlist Data: Users can browse their playlists with pagination support
5. Song Management: Users can search for songs and add them to their playlists
6. State Management: Authentication state is managed using React hooks and localStorage

Required Scopes

The application requests the following Spotify scopes:

• user-read-private: Access user's private information
• user-read-email: Access user's email address
• playlist-read-private: Access user's private playlists
• playlist-read-collaborative: Access user's collaborative playlists
• playlist-modify-public: Modify user's public playlists
• playlist-modify-private: Modify user's private playlists

Project Structure

src/
├── components/
│   ├── Login.tsx              # Login component
│   ├── Profile.tsx            # Profile display component
│   ├── Playlists.tsx          # Playlists display component
│   ├── AddSongToPlaylist.tsx  # Add songs to playlist component
│   └── Callback.tsx           # OAuth callback handler
├── hooks/
│   └── useSpotifyAuth.ts      # Custom hook for auth state
├── services/
│   └── spotifyAuth.ts         # Spotify API service
├── types.ts                   # TypeScript interfaces
├── App.tsx                    # Main app component with navigation
└── main.tsx                   # App entry point with routing

Technologies Used

• React 19
• TypeScript
• React Router DOM
• Spotify Web API
• Vite (build tool)

API Endpoints Used

• GET /v1/me - Get current user's profile
• GET /v1/users/{user_id}/playlists - Get user's playlists
• GET /v1/search - Search for tracks
• POST /v1/playlists/{playlist_id}/tracks - Add tracks to playlist

Security Notes

• The app uses PKCE flow for enhanced security
• Access tokens are stored in localStorage (for demo purposes)
• In production, consider using more secure token storage methods
• The redirect URI is configured to prevent unauthorized redirects

Troubleshooting

Common Issues

1. "Invalid redirect URI" error: Make sure the redirect URI in your Spotify app settings exactly matches http://127.0.0.1:5173/callback

2. "Invalid client" error: Verify that your Client ID is correctly set in the .env file

3. "Insufficient scope" error: Make sure your Spotify app has the required scopes enabled

4. "Forbidden" error when adding songs: Ensure you have playlist-modify-public and playlist-modify-private scopes

5. CORS errors: The app runs on localhost, so CORS shouldn't be an issue, but make sure you're using the correct redirect URI

Development Tips

• Check the browser console for any error messages
• Verify that your Spotify app has all the required scopes enabled
• Make sure you're logged into the correct Spotify account when testing
• The playlist modification feature requires the user to have playlists they can modify
• Search results are limited to 10 tracks per search for performance

License

This project is for educational purposes. Please follow Spotify's API terms of service when using their APIs.