Design a Music Streaming Web App (Front End)
Design the web client of a music streaming service. Users browse and search a large catalog, build playlists, and play music. Playback must continue while they navigate the app, and the same account may be open in several tabs or on other devices. Focus on the client.
Cover the core flows and non-functional requirements, the application architecture (how the player survives navigation), playback (streaming, buffering, preloading the next track, gapless playback, protected content, lock-screen and media-key controls), the client data model (catalog entities, the queue, playlists), syncing state across tabs and devices, performance, and accessibility.
Hints
Hint 1
Mount the player in the app shell, outside the routed pages, so a route change never unmounts it. Pages talk to it through a small store or service, never by owning the audio element.
Hint 2
Model the queue explicitly: an ordered list of track ids, a current index, shuffle as a separate permutation, and a history for Back. Most player bugs are queue bugs.
Hint 3
The Media Session API gives lock-screen and media-key controls. Media Source Extensions give adaptive streaming, and Encrypted Media Extensions give protected content.
Asked at
Sign in to talk to the interviewer — ask what's in scope, what scale to design for, or for a nudge when you're stuck. Conversations save to your account.