# tejxs18/vibesync architecture

> Architecture diagram of the GitHub repository tejxs18/vibesync, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/tejxs18/vibesync
- Repository: https://github.com/tejxs18/vibesync

## Overview

VibeSync is a browser-based collaborative listening platform. Users discover or join public and password-protected rooms, search YouTube tracks to play or queue, then listen in sync while managing playback and chatting. The server handles room membership, shared playback and queue state, chat history, and listener counts; the client provides the lobby and room experience. The README documents invite links and cleanup, and the sampled server code shows in-memory room cleanup. Some component implementations were not sampled, so uncertain wiring is omitted.

Main entry points: [`server/index.js`](https://github.com/tejxs18/vibesync/blob/main/server/index.js) (HTTP and Socket.IO), [`client/src/App.jsx`](https://github.com/tejxs18/vibesync/blob/main/client/src/App.jsx) (Lobby and room), [`client/src/components/SyncAudioPlayer.jsx`](https://github.com/tejxs18/vibesync/blob/main/client/src/components/SyncAudioPlayer.jsx) (Synced player), [`client/src/components/SearchBar.jsx`](https://github.com/tejxs18/vibesync/blob/main/client/src/components/SearchBar.jsx) (Track search)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client experience"]
  node_app["Lobby and room<br/>[App.jsx]"]
  node_socket_provider["Socket provider<br/>[SocketContext.jsx]"]
  node_search["Track search<br/>[SearchBar.jsx]"]
  node_player["Synced player"]
  node_chat["Room chat<br/>[ChatBox.jsx]"]
  node_visualizer["Music visualizer"]
  node_share["Invite sharing<br/>[ShareButton.jsx]"]
end

subgraph group_server["Room runtime"]
  node_socket_server["HTTP and Socket.IO<br/>[index.js]"]
  node_room_state[("Room state<br/>[index.js]")]
  node_search_api["Search endpoint<br/>[index.js]"]
end

subgraph group_music["Music integration"]
  node_youtube_search["YouTube search"]
  node_youtube_player["YouTube playback"]
end

node_listener(("Listener"))

node_listener -->|"uses"| node_app
node_app -->|"uses socket"| node_socket_provider
node_app -->|"fetches rooms"| node_socket_server
node_app -->|"joins room"| node_socket_server
node_search -->|"searches tracks"| node_search_api
node_search_api -->|"queries"| node_youtube_search
node_search -->|"selects or queues"| node_socket_server
node_player -->|"syncs playback"| node_socket_server
node_chat -->|"sends and reads chat"| node_socket_server
node_socket_server -->|"reads and updates"| node_room_state
node_socket_server -->|"sends room updates"| node_app
node_socket_server -->|"broadcasts playback and queue"| node_player
node_socket_server -->|"broadcasts messages"| node_chat
node_player -->|"controls playback"| node_youtube_player
node_player -->|"passes play state"| node_visualizer
node_app -->|"provides room ID"| node_share

click node_app "https://github.com/tejxs18/vibesync/blob/main/client/src/App.jsx"
click node_socket_provider "https://github.com/tejxs18/vibesync/blob/main/client/src/context/SocketContext.jsx"
click node_search "https://github.com/tejxs18/vibesync/blob/main/client/src/components/SearchBar.jsx"
click node_player "https://github.com/tejxs18/vibesync/blob/main/client/src/components/SyncAudioPlayer.jsx"
click node_chat "https://github.com/tejxs18/vibesync/blob/main/client/src/components/ChatBox.jsx"
click node_visualizer "https://github.com/tejxs18/vibesync/blob/main/client/src/components/MusicVisualizer.jsx"
click node_share "https://github.com/tejxs18/vibesync/blob/main/client/src/components/ShareButton.jsx"
click node_socket_server "https://github.com/tejxs18/vibesync/blob/main/server/index.js"
click node_room_state "https://github.com/tejxs18/vibesync/blob/main/server/index.js"
click node_search_api "https://github.com/tejxs18/vibesync/blob/main/server/index.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_socket_provider,node_search,node_player,node_chat,node_visualizer,node_share toneBlue
class node_socket_server,node_room_state,node_search_api toneAmber
class node_youtube_search,node_youtube_player toneMint
class node_listener toneIndigo
```

## Components

### Client experience

- [Lobby and room](https://github.com/tejxs18/vibesync/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Socket provider](https://github.com/tejxs18/vibesync/blob/main/client/src/context/SocketContext.jsx): `client/src/context/SocketContext.jsx`
- [Track search](https://github.com/tejxs18/vibesync/blob/main/client/src/components/SearchBar.jsx): `client/src/components/SearchBar.jsx`
- [Synced player](https://github.com/tejxs18/vibesync/blob/main/client/src/components/SyncAudioPlayer.jsx): `client/src/components/SyncAudioPlayer.jsx`
- [Room chat](https://github.com/tejxs18/vibesync/blob/main/client/src/components/ChatBox.jsx): `client/src/components/ChatBox.jsx`
- [Music visualizer](https://github.com/tejxs18/vibesync/blob/main/client/src/components/MusicVisualizer.jsx): `client/src/components/MusicVisualizer.jsx`
- [Invite sharing](https://github.com/tejxs18/vibesync/blob/main/client/src/components/ShareButton.jsx): `client/src/components/ShareButton.jsx`

### Room runtime

- [HTTP and Socket.IO](https://github.com/tejxs18/vibesync/blob/main/server/index.js): `server/index.js`
- [Room state](https://github.com/tejxs18/vibesync/blob/main/server/index.js): `server/index.js`
- [Search endpoint](https://github.com/tejxs18/vibesync/blob/main/server/index.js): `server/index.js`

### Music integration

- **YouTube search**
- **YouTube playback**

### Other components

- **Listener**

## Connections

- Listener → Lobby and room: uses
- Lobby and room → Socket provider: uses socket
- Lobby and room → HTTP and Socket.IO: fetches rooms
- Lobby and room → HTTP and Socket.IO: joins room
- Track search → Search endpoint: searches tracks
- Search endpoint → YouTube search: queries
- Track search → HTTP and Socket.IO: selects or queues
- Synced player → HTTP and Socket.IO: syncs playback
- Room chat → HTTP and Socket.IO: sends and reads chat
- HTTP and Socket.IO → Room state: reads and updates
- HTTP and Socket.IO → Lobby and room: sends room updates
- HTTP and Socket.IO → Synced player: broadcasts playback and queue
- HTTP and Socket.IO → Room chat: broadcasts messages
- Synced player → YouTube playback: controls playback
- Synced player → Music visualizer: passes play state
- Lobby and room → Invite sharing: provides room ID