Design a music player frontend like Spotify
PremiumFrontend systemEasy
- Persistent player
- Playback queue
- Gapless playback
Quick answer
This frontend system interview question asks you to design a music player frontend like Spotify. Aim for a design that loads fast, stays responsive and is easy to maintain, then explain components, state, data fetching and trade-offs. Interviewers want to see how you structure the interface, manage state and keep the experience fast.
The problem
Design the frontend of a music player like Spotify Web Player, YouTube Music or JioSaavn on the web, where playback continues as the user browses. The hard part is a player that survives page changes, a queue with shuffle and repeat, starting the next track without a gap, and accessible controls.
Users browse home, search, albums, artists and playlists, press play on a track or a whole playlist, and keep listening while they move around the app. A player bar at the bottom shows the current track with play, pause, next, previous, shuffle, repeat, a seek bar and volume. Users can add songs to a queue, like songs, and control playback from the keyboard, the lock screen or headphone buttons.
What must a music player frontend like Spotify do?
- Play anywhere: Play a track, an album or a playlist from any page; playback continues while navigating.
- Queue: Shows "Next in queue" (user-added) before "Next from playlist"; drag to reorder; remove items.
How well must it do it?
- Navigation: Page changes never pause, restart or stutter the audio.
- Gaps: The next track starts within 100 ms of the previous one ending.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- Persistent player
- Playback queue
- Gapless playback
- Media session API
- Virtualized list
- Signed URLs
How you’ll practise
- Requirements
- Components
- State and data
- Network and caching
- Performance and accessibility
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any frontend system design round.
- Starts from the user flows and the screens
- Splits the interface into clear components
- Decides where state lives and how it stays in sync
- Plans data fetching, caching and loading states
- Covers performance, accessibility and error states
- Explains how the design holds up on slow networks and small screens
Questions people ask about this interview question
- Which design type is this question?
- It is a frontend system question. You design a music player frontend like Spotify and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Easy, so it suits engineers who are new to frontend system interviews. It is also a good warm-up before harder questions.
- What should I cover first?
- Start with the main user flows, the screens and the data each one needs. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team