A modern web application that allows users to search for songs using the Spotify API and create custom playlists that are saved directly to their Spotify account.

• 🔍 Search Spotify Catalog: Search for songs, albums, or artists using Spotify's extensive music library
• ➕ Add Tracks: Build your playlist by adding tracks from search results
• ➖ Remove Tracks: Remove tracks from your playlist before saving
• 💾 Save to Spotify: Save playlists directly to your Spotify account with custom names
• 🔐 OAuth Authentication: Secure authentication flow using Spotify's OAuth 2.0
• 📱 Responsive Design: Clean, modern UI that works across different screen sizes

Visit the live application: https://jammming.xosnos.com/

• React 19 - Modern UI library with class components
• TypeScript - Type-safe JavaScript for better code quality
• Vite - Fast build tool and development server
• Spotify Web API - Music search and playlist management
• OAuth 2.0 - Secure user authentication
• CSS3 - Custom styling for a polished user experience

Before you begin, ensure you have:

• Node.js (v18 or higher)
• npm or yarn package manager
• A Spotify account
• Spotify Developer account (for API credentials)

git clone https://github.com/yourusername/jammming.git
cd jammming

npm install

1. Go to Spotify Developer Dashboard
2. Create a new app
3. Copy your Client ID
4. Add your redirect URI(s) in the Spotify app settings:
   • For local development: http://localhost:5173/
   • For production: https://your-domain.com/ (e.g., https://jammming.xosnos.com/)
5. Create a .env file in the root directory:

cp .env.example .env

6. Edit .env and add your Spotify credentials:

VITE_SPOTIFY_CLIENT_ID=your-client-id-here
VITE_SPOTIFY_REDIRECT_URI=http://localhost:5173/

Note:

• The VITE_ prefix is required for Vite to expose these variables to the client-side code
• For production, update VITE_SPOTIFY_REDIRECT_URI to your production URL
• Never commit your .env file to version control (it's already in .gitignore)

npm run dev

The application will open at http://localhost:5173

npm run build

jammming/
├── src/
│   ├── components/
│   │   ├── App/           # Main application component
│   │   ├── SearchBar/     # Search input component
│   │   ├── SearchResults/ # Display search results
│   │   ├── Playlist/      # Playlist builder component
│   │   ├── Tracklist/     # Reusable track list component
│   │   └── Track/         # Individual track component
│   ├── util/
│   │   └── Spotify.ts     # Spotify API integration
│   ├── main.tsx          # Application entry point
│   └── index.css         # Global styles
├── public/               # Static assets
└── package.json         # Dependencies and scripts

• Implements OAuth 2.0 implicit grant flow for authentication
• Uses Spotify Web API endpoints for:
  • Track search (/v1/search)
  • User profile (/v1/me)
  • Playlist creation (/v1/users/{user_id}/playlists)
  • Adding tracks to playlists (/v1/users/{user_id}/playlists/{playlist_id}/tracks)

• Fully typed with TypeScript interfaces
• Strict TypeScript configuration enabled
• Type-safe API responses and component props

• Class-based React components
• Proper state management
• Reusable components (Tracklist, Track)
• Clean separation of concerns

1. User clicks search or attempts to save a playlist
2. Application checks for valid access token
3. If no token exists, redirects to Spotify authorization page
4. User authorizes the application
5. Spotify redirects back with access token in URL
6. Token is extracted and stored for API requests

The application is configured for deployment on Vercel:

1. Push your code to GitHub
2. Import the project in Vercel
3. Configure Environment Variables in Vercel:
   • Go to your project settings in Vercel
   • Navigate to "Environment Variables"
   • Add the following variables:
     • VITE_SPOTIFY_CLIENT_ID - Your Spotify Client ID
     • VITE_SPOTIFY_REDIRECT_URI - Your Vercel deployment URL (e.g., https://jammming.xosnos.com/)
4. Update the redirect URI in Spotify Developer Dashboard to match your Vercel URL
5. Redeploy your application (Vercel will automatically use the new environment variables)

Important: After adding environment variables, you must redeploy for them to take effect.

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

• Modify styles in component-specific CSS files
• Update colors and fonts in src/index.css
• Customize playlist default name in src/components/App/App.tsx