A feature-rich web application that allows users to search the Spotify library, create custom playlists, and save them to their Spotify account using modern web technologies and the latest Spotify API.
- 30-second track previews for most songs
- Play/pause controls directly in search results and playlist
- Visual feedback with loading states and play/pause icons
- Auto-stop when playing a different preview
- Filtered results - only shows songs not already in your playlist
- Real-time filtering - results update when you add/remove tracks
- Larger result set - searches up to 50 tracks for better variety
- Album artwork displayed for each track
- Auto-save playlist to localStorage during creation
- Survives token refresh - playlist persists even if you need to re-authenticate
- Session recovery - playlist restored if you refresh the page
- Auto-cleanup when playlist is successfully saved
- Exact expiration tracking - tokens expire at the precise time from Spotify
- Proactive refresh - tokens refresh 2 minutes before expiry
- No interruption - seamless experience during token refresh
- Smart scheduling - refresh timer adjusts to actual token lifetime
- Pre-redirect storage - search term saved before Spotify login
- Post-redirect restoration - automatically restores and re-runs search
- URL hash preservation - search terms preserved in browser history
- Seamless experience - no need to re-enter search after login
- Full-screen overlay during playlist saving
- Progress indication with animated spinners
- Informative messages explaining what's happening
- Batch processing for large playlists (100+ tracks)
- Authorization Code Flow with PKCE (2024 Spotify standard)
- Automatic token refresh with precise timing
- Secure token storage with expiration tracking
- Graceful error handling for authentication failures
- Efficient API calls with proper error handling and retries
- Smart caching of playlist data in localStorage
- Batch processing for large playlist saves
- Optimized re-renders with React hooks
- Responsive design works on all devices
- Keyboard navigation support
- Screen reader friendly with proper ARIA labels
- Visual feedback for all user actions
- Album artwork for visual track identification
- Preview controls with play/pause states
- Loading animations for better perceived performance
- Smart filtering prevents duplicate tracks
- Persistent state across sessions
- Clean, modern design with smooth transitions
- Chrome 63+ (full support)
- Firefox 57+ (full support)
- Safari 11.1+ (full support)
- Edge 79+ (full support)
Requires:
- Web Crypto API (for PKCE)
- Web Audio API (for previews)
- LocalStorage
- Fetch API
- ES6+ features
-
Spotify Developer Setup
- Create app at Spotify Developer Dashboard
- Do NOT enable Implicit Grant (deprecated)
- Set redirect URI to your deployment URL
- Copy Client ID
-
Code Configuration ```javascript // In utils/spotify.js const clientId = "YOUR_ACTUAL_CLIENT_ID" const redirectUri = "https://yourapp.netlify.app/" ```
-
Deploy and Test
- Deploy to your hosting platform
- Test authentication flow
- Verify all features work correctly
- Login - Secure OAuth 2.0 with PKCE
- Search - Find tracks with preview and artwork
- Preview - Listen to 30-second samples
- Build Playlist - Add tracks (no duplicates shown)
- Save - Create playlist in your Spotify account
- Persist - Playlist saved locally until successfully uploaded
- Token refresh happens automatically in background
- Search restoration after login redirects
- Playlist persistence survives page refreshes
- Batch uploads for large playlists
- Smart filtering prevents duplicate additions
- Audio management prevents multiple simultaneous previews
MIT License - see LICENSE file for details.
Built with React, modern JavaScript, and the latest Spotify Web API standards.