Spotify Queue WebApp

A responsive web application that allows users to search for tracks and add them to their Spotify playback queue. Built with Flask backend and vanilla JavaScript frontend, featuring a modern, mobile-first design optimized for both desktop and mobile devices.

Previously hosted at movik.tvei.to via AWS S3

Features

• Real-time Track Search - Search Spotify's extensive music library with instant results
• Queue Management - Add tracks directly to your active Spotify playback queue
• Responsive Design - Optimized for both mobile and desktop with touch-friendly controls
• Current Track Display - View what's currently playing with album art and progress bar
• Queue Sidebar - See and manage upcoming tracks in your queue (desktop)
• Modern UI - Clean, Spotify-inspired interface with smooth animations

Technology Stack

Backend

• Flask - Python web framework
• Spotify Web API - Integration with Spotify services
• OAuth 2.0 - Secure authentication flow
• python-dotenv - Environment variable management

Frontend

• Vanilla JavaScript - No framework dependencies
• CSS3 - Modern styling with flexbox/grid layouts
• Responsive Design - Mobile-first approach with media queries

UI Design

• UI improvements and responsive design generated by Claude (Anthropic)
• Features include: Sticky header/search, dynamic sizing, mobile-optimized buttons and text

Prerequisites

• Python 3.7 or higher
• Spotify Premium account (required for playback control)
• Spotify Developer account and registered application

Installation

1. Clone the repository

   git clone https://github.com/ThorTveito/spotify-queue-webapp.git
   cd spotify-queue-webapp

2. Install dependencies

   pip install flask requests python-dotenv

3. Set up Spotify Developer Application

   • Go to Spotify Developer Dashboard
   • Create a new application
   • Add http://localhost:5000/callback to Redirect URIs
   • Note your Client ID and Client Secret

4. Configure environment variables

   Create a .env file in the root directory:

   SPOTIFY_CLIENT_ID=your_client_id_here
   SPOTIFY_CLIENT_SECRET=your_client_secret_here
   SPOTIFY_REDIRECT_URI=http://localhost:5000/callback
   ENV_NAME=DEV

Usage

1. Start the Flask server

   python backend/app.py

2. Open your browser

   Navigate to http://localhost:5000

3. Authenticate with Spotify

   • Click the login/authorize button
   • Grant the necessary permissions
   • Start searching and queueing tracks!

Project Structure

spotify-queue-webapp/
├── backend/
│   └── app.py              # Flask application and API endpoints
├── static/
│   ├── styles.css          # Responsive CSS styling
│   └── images/
│       ├── Bakgrunnsbilde.png
│       ├── file.svg
│       └── Screenshot_20250803_123619_Brave.jpg
├── templates/
│   └── index.html          # Main application template
├── .env                    # Environment variables (create this)
├── .gitignore
├── LICENSE
└── README.md

Features in Detail

Mobile Experience

• Sticky Header & Search - Always accessible while scrolling
• Large Touch Targets - Buttons and controls optimized for touch
• Enhanced Readability - Larger text and spacing on mobile devices
• Smooth Animations - Transitions and visual feedback

Desktop Experience

• Compact Layout - Efficient use of screen space
• Sidebar Queue - Slide-out panel showing upcoming tracks
• Hover Effects - Visual feedback on interactive elements
• Keyboard Navigation - Full keyboard support

Search & Queue

• Debounced search input for performance
• Album artwork thumbnails
• Track, artist, and album information display
• One-click add to queue functionality
• Real-time queue updates

Playback Controls

• Current track display with album art
• Progress bar with elapsed/total time
• Play/pause status indicator
• Queue toggle button

API Endpoints

• GET / - Main application page
• GET /callback - OAuth callback handler
• GET /search - Search Spotify tracks
• POST /queue - Add track to playback queue
• GET /current-track - Get currently playing track
• GET /queue-status - Get current queue status

Spotify API Scopes

The application requires the following Spotify API scope:

• user-modify-playback-state - Add tracks to playback queue

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Development

Running in Development Mode

export FLASK_ENV=development
python backend/app.py

Code Attribution

UI improvements and responsive design features were generated by Claude (Anthropic AI), including:

• Sticky header and search bar positioning
• Mobile-optimized button sizes and text scaling
• Responsive layout with dynamic sizing
• Z-index layering for proper element stacking

Deployment

This application was previously hosted at movik.tvei.to using AWS S3 static hosting.

For production deployment:

1. Update SPOTIFY_REDIRECT_URI in your Spotify app settings
2. Configure production environment variables
3. Use a production WSGI server (Gunicorn, uWSGI)
4. Set up HTTPS/SSL certificates
5. Configure CORS settings as needed

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Spotify Web API for music data and playback control
• Flask framework for backend infrastructure
• Claude (Anthropic) for UI/UX improvements and responsive design

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues or questions, please open an issue on the GitHub repository.

---

Note: This application requires an active Spotify Premium subscription to control playback and add tracks to the queue.