joe / sukar
All projects

YouTogether

Good music. Better company.

A shared music room that brings playback, a collaborative queue, lyrics, and conversation into one place. Join with a link, listen as a guest, or sign in to keep a room worth coming back to.

My work
Product design, full-stack development, and release engineering
Platform
Web
Stack
React / TypeScript / Node.js / Express / Socket.IO / SQLite / YouTube Data API
Try YouTogether ↗
Have a related project? Let’s talk ↗
YouTogether dark-theme music room with YouTube playback, a shared queue, autoplay controls, and chat
The deployed app during the 15 October 2026 release check. The room and chat message were created for testing.
The challenge
Make listening together feel effortless while keeping each listener's personal choices and music library private.
My contribution
The room experience, real-time state, account and library integration, and the details that carry the product through release.
The result
A deployed listening room with shared playback, saved spaces, personal lyrics, and conversation in one place.

Share a link. Find your next song together.

Sending a song is easy. YouTogether turns that exchange into a place to spend time: open a room, invite someone, and build a queue together. Playback controls, live lyrics, chat, and quick reactions keep the experience on one page, with a layout that works on a phone as well as a desktop.

Guests can join, search, add music, control playback, and chat immediately. Optional Google sign-in adds saved rooms, favorites, and listening history. Saved rooms keep their links and queues; playback restores paused after a server restart, so returning to a room does not unexpectedly start the speakers.

The music is shared. The experience stays personal.

The room shares the current song, queue, playback position, and lyric timing. Volume, theme, Lyrics/Video view, and translation language belong to each listener. One person can read the original Arabic while another follows an English translation without changing everyone else's screen.

Optional translation sends the displayed lyric text through the server to OpenAI only when requested. Translated lines retain their timestamps and structure. Locally imported lyric files stay on the listener's device unless translation is requested; when timed lyrics are unavailable, the interface can show plain text without inventing synchronization.

Bring music into the room, on your terms.

Connecting YouTube is separate from signing in. A listener can choose another Google account and browse its likes and playlists privately through a read-only connection. Only selected imports enter the shared queue; the app does not rewrite the original likes or playlists.

The library defaults to a Music filter, with All videos available for uploads categorized differently. Bulk import follows pagination, skips songs already playing or queued, shows progress, supports cancellation, and respects room capacity. Those details make a large collection manageable without assuming that every liked video is a song.

Keep the room moving. Let people lead.

The optional Keep the music going setting finds another track when the queue runs out. It is off by default and draws on the room's recent listening, without consulting listeners' private favorites or connected libraries. Suggestions rank real tracks using listening signals and title similarity; AI is reserved for optional lyric translation.

A manual song choice takes priority over a suggestion still loading. The server accepts only one pending autoplay selection and checks that it still belongs to the room's current state. Playback corrections tolerate small timing differences, and each queue entry has its own identity so playing the same video twice creates two distinct turns.

A place to listen, and to be there.

Chat and six quick reactions sit beside the queue. Incoming messages leave someone reading older messages where they are, and a failed send preserves the draft. Chat is temporary even in saved rooms, with only the latest 100 messages retained in memory.

Eight default characters give listeners an identity without a profile-photo upload. Their soft clay artwork was generated and prepared as transparent avatar assets, with distinct faces that remain readable at small sizes. Controls live inside the listening stage; on mobile, the queue and conversation stack underneath it.

One shared state, clear boundaries.

React and TypeScript power the browser. Express and Socket.IO run in one persistent Node.js process, coordinating authoritative room state in memory. SQLite keeps accounts and saved rooms; connected members and chat stay temporary. Each browser plays media directly through the official YouTube iframe, while server-side API calls handle search and metadata.

Data ownership extends beyond the original library record. Imported metadata retains its source and age across copies, and cleanup reaches saved data, caches, and pending work. Deletion watermarks prevent an older backup from bringing removed data back. This architecture currently runs as a single room server; coordinating multiple servers remains future work.

A working product, with an honest release status.

The recorded 15 October 2026 release checks passed 161 automated tests and the TypeScript/Vite production build. Browser checks covered two listeners, chat and reactions, lyric transitions, both themes, and desktop and mobile layouts. Production checks included real video playback; library pagination and imports were checked locally with sample data and mocked OAuth/YouTube responses.

As of 16 October 2026, Google branding was verified and published, but the sensitive youtube.readonly permission review had not been submitted; a real demonstration video was still needed. Fresh YouTube embeds also intermittently failed to report readiness. A timeout and Retry path help recovery, while the underlying issue remains unresolved. The next work is to complete that review submission and improve playback reliability.

How it fits together.

  1. 01

    Open a room

    Share a link and let guests join immediately; sign in when you want to save the room.

  2. 02

    Build the soundtrack

    Search, add songs, and control a shared queue while keeping personal libraries private.

  3. 03

    Stay for the company

    Follow lyrics, choose your own view, and react to the music through chat.

Next project
Voxora

Got a good problem?

Tell me what you’re building—or what needs to work better.

Start a project ↗