UpNext is a real-time social music voting app where people in a room can match their playlists with the queue and collaboratively upvote or downvote songs, shaping the queue and creating a more fair and interactive listening experience.
- Live App: https://upnext-music.vercel.app/
- Backend Repository: https://github.com/vividron/upnext-api
upnext.1.webm
 |
 |
 |
 |
- A host creates a room and adds songs to a queue
- users in the room can either match their playlist or upvote/downvote songs they like.
The queue dynamically updates in real-time, ensuring the most popular songs rise to the top.
In the match playlist flow, users upload their own playlist, and songs that match the room queue's vibe get automatically upvoted, making voting even easier.
Think of it like a democratic playlist for real-world spaces.
- Upvote / downvote songs in the queue
- Queue reorders instantly based on votes
- Fair and community-driven playback
- Hosts create rooms
- Users join and interact within the same session
- Upload your playlist
- Matching songs in the queue are automatically upvoted
- No need to manually scroll and vote
- Powered by WebSockets
- Instant updates for:
- Song changes
- Votes
- Queue updates
- Player state
- Detects inactive or disconnected users
- Grace period (~10s) before removing users
- If host leaves → room automatically ends
- Playback happens on host’s Spotify device
- App acts as a remote controller
- Handles:
- Manual changes from Spotify app
- Device switching
- Playback errors
- Displays sync issues clearly in UI
- No real queue is created on Spotify
- App controls playback dynamically using a virtual queue
- ⚛️ Framework: React (component-driven architecture)
- 🎨 Styling: Tailwind CSS (utility-first styling)
- 🎞️ Animations: Framer Motion (smooth UI transitions & micro-interactions)
- 🔌 Realtime Communication: Socket.IO Client (live voting & sync updates)
- 🧠 State Management: React Context + custom hooks
- 🌐 API Handling: Axios / Fetch for REST communication
- 🔐 Authentication Flow: Spotify OAuth (handled via backend, consumed on frontend)
Handles:
- Http and WebSocket server (Socket.IO)
- Voting logic & concurrency control
- Redis-based real-time state & presence system
- Spotify API integration
- Real-time UI updates for voting & queue changes
- Socket event handling and state synchronization
- Optimistic UI updates for better user experience
- Handling edge cases (disconnects, sync mismatch, stale state)
- Visualizing player state from external Spotify source
-
Clone the repository:
git clone https://github.com/yourusername/upnext-frontend.git cd upnext-frontend -
Install dependencies:
npm install
-
Set up environment variables:
- Create a .env file in the root directory of the project and add the following variables:
VITE_API_BASE_URL=http://127.0.0.1:8000/api // Base URL for all REST API requests VITE_WS_URL=http://127.0.0.1:8000 // WebSocket server URL
-
Start the development server:
npm run dev
-
Open your browser and navigate to
http://localhost:5173(or the port specified by Vite).
src/
├── components/ # Reusable UI components
├── pages/ # Page components
├── context/ # React context for state management
├── hooks/ # Custom React hooks
├── api/ # API calls and configurations
├── sockets/ # WebSocket client setup
├── animations/ # Animation utilities
└── main.jsx # App entry point
Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and test them.
- Submit a pull request with a clear description of your changes.
This project is licensed under the MIT License. See the LICENSE file for details.