Case study · Shared listening web app
Open a room, share a link, and listen together. We built YouTogether around synchronized playback, a collaborative queue, live lyrics, and conversation, with personal controls that make every listener feel at home.
The product
Share a link and start listening as a guest. Optional Google sign-in adds saved rooms, favorites, and listening history. Saved queues return with the room, and restored playback starts paused so listeners decide when the music begins.
The room shares its lyric recording and timing adjustments. Each listener chooses their own translation language, volume, theme, and lyrics or video view. Optional translation preserves the line structure and timestamps of the original.
Chat, six quick reactions, and eight built-in characters give the room a social presence. Playback controls sit alongside the listening stage, with the queue and conversation arranged for desktop and mobile.
The room shares the song, queue, playback controls, lyric timing, and conversation. Each listener keeps control of volume, language, theme, and how they view the music.
Translation happens on request and stays personal. Local lyric imports stay on the listener’s device unless they choose to translate them. Connected libraries remain private; only selected songs enter the room.
Library integration
YouTube library access uses a separate, read-only connection from Google sign-in. Listeners can browse liked videos and playlists, switch between Music and All videos, and bring selected tracks into the shared queue.
Bulk imports follow pagination, skip tracks already playing or queued, show progress, and support cancellation. Room capacity and bounded batches keep large collections manageable.
Designed for company
Eight characters give listeners an identity from the moment they join. Chat and quick reactions keep the conversation close to the music, while the mobile layout stacks the queue and conversation beneath the listening stage.
Incoming messages respect the reader’s scroll position. Drafts are preserved when a message needs another send, and room chat stays temporary, with the latest 100 messages held in memory.
System architecture
React and TypeScript power the browser. Express and Socket.IO run in one persistent Node.js process, coordinating live rooms in memory. SQLite stores accounts, favorites, listening history, and saved-room checkpoints. Media plays directly through each listener’s YouTube iframe.
Choose Full size to read the diagram and scroll horizontally. Guest rooms, connected listeners, and chat stay in memory; saved rooms and account data persist in SQLite.
React · TypeScript · YouTube iframe
Node.js · Express · Socket.IO
SQLite · Saved rooms · Listening history
Google OAuth · YouTube Data API
LRCLIB · lyrics.ovh · Apple artwork
OpenAI · Timestamp-preserving lyrics
Engineering decisions
The server coordinates the current track, position, and timestamp. Each browser plays through the official YouTube iframe, while its local player clock drives lyric highlighting. Drift correction keeps synchronization deliberate and avoids unnecessary seeks.
The same video can appear more than once in a queue. Each occurrence has its own playback identity, keeping end events and lyric results tied to the correct session. Track changes also reset the lyric view before the next paint.
Keep the music going is an opt-in room setting. The server accepts one pending selection at a time and checks the current room state before adding it. A manual song choice takes priority, and pausing or the last listener leaving the room cancels stale work.
Personal suggestions use a listener’s own favorites and history. Shared autoplay uses the room’s recent listening. Both rank real YouTube tracks with a scoring algorithm; optional lyric translation is the separate OpenAI integration.
Metadata retains its source and original fetch time across imports and saved copies. Disconnect and deletion handling reaches cached data and pending work. A deletion watermark and backup pruning protect those decisions during restore, while release rollback preserves the current database.
The recorded 15 October 2026 release checks passed 161 automated tests and the TypeScript/Vite production build. Browser checks covered multiple listeners, lyrics, chat, reactions, light and dark themes, and desktop and mobile layouts.
Live playback was checked in production. Library pagination and bulk imports were exercised with local fixtures and simulated OAuth and YouTube responses.
Build with Jiss Tech
YouTogether brings product design, real-time engineering, and API integration into one experience. We bring that same care to the web applications we build for our clients.
