Music Platform — Spotify Clone
Player state that survives navigation, a catalogue fed by a real API, and playlists tied to the signed-in user.
Chapters, description and comments are on YouTube.Watch on YouTube instead
One request, end to end.
Select a stage to read what it decides.
The account that owns the playlists
Browsing needs no session and saving does, and drawing that line early is what keeps the catalogue pages public and fast while anything personal stays behind the boundary.
Someone else's data, at our edge
The catalogue comes from a third-party API — rate limits, outages and a response shape we do not choose — so it is normalised at our own boundary and the rest of the app never sees any of that.
Search and the pages built from it
Albums, artists and search results are all views over the same normalised records, so a track looks the same wherever it is rendered.
State that outlives the page
Anything owned by a route dies with that route, so playback is owned above the router with a single audio element under it and navigation happens underneath.
Our rows, their tracks
A playlist is our data and the tracks in it are not, so we store the reference rather than a copy and the catalogue can change without our rows going stale.
Three things you can point at afterwards.
A player that survives navigation
Playback state owned above the router with one audio element under it, so moving between pages does not interrupt it.
A real API handled honestly
A third-party catalogue fetched and normalised at your own boundary, with its failures treated as expected states.
Personal data behind the boundary
Playlists tied to the signed-in account, referencing upstream tracks instead of copying them.
Where to go from here.
Closest to this one by what it teaches, then by what it is built on.
Listings, hosts, and bookings modelled as one system — including the overlapping-dates edge case most clones quietly skip.
A browser video editor for product videos: record or upload your app, let an AI director plan the camera, cuts and text, refine it on a multi-track timeline, then export an MP4 or share a link.
A course marketplace in the shape of Udemy: instructors author courses that go live through an admin review, learners buy through Stripe and earn certificates anyone can verify, and every sale records the instructor's share.