Capstone 13 · Full-Stack

Cue

A room people join with a link. There is a queue, everybody can add to it, everybody can vote, and the highest voted track plays next. While it plays, everybody's screen shows the same position. Real-time is the whole difficulty and it is worth doing because it is immediately obvious when it works. Two phones side by side, in sync, is a demo that needs no explanation. The problems you will actually hit: two people voting at the same instant, so the count must be authoritative on the server. Somebody joining halfway through, who needs the current state including how far into the track it is. Somebody's connection dropping and coming back, which must reconcile rather than reset. And clock differences between devices, which means synchronizing against a server time rather than each device's own. Decide deliberately what happens when the person who started the room leaves, because a room that dies with its host is a bad party.

Concepts used

WebSocketsReal-time statePresenceConflict resolutionOptimistic updatesReconnectionDeploymentTesting

Your dataset

No media hosting needed: use an embeddable player or short audio clips you have rights to.

Milestones

1Get two browsers exchanging a message through a WebSocket connection.
2Build the room: join, leave, and a presence list that is accurate when a tab closes.
3Add the queue, with adds broadcast to everybody.
4Add voting with the count authoritative on the server, and prove two simultaneous votes both land.
5Synchronize playback position against server time rather than device time.
6Handle a late joiner: they receive the full current state including position.
7Handle a dropped connection: reconnect and reconcile rather than reset.
8Decide and implement what happens when the host leaves, then test a room of five for half an hour.

The graded core

The rest of this project is yours to shape. This one function is the piece everything else depends on, so it runs against hidden tests to prove it is right before you build outward.

◈ Graded Challenge

Queue ordering, decided on the server. Write next_up(tracks) returning the ids of the queue in play order: most votes first, and where votes tie, the one added earliest goes first. Each track is a dictionary with id, votes and added_at. An empty queue returns an empty list.

Name it exactly: next_up(tracks)

3 visible + 3 hidden
loading editor…

Your workspace

Build the full project here. Work through the milestones in order, in both languages.

SANKOFA SANDBOX
loading editor…
Your turn → Build it in Python first, then rebuild it in JavaScript. The logic transfers, only the syntax changes.
← All projectsNext: Field Notes →