# ghanenxra/syncra architecture

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

- Interactive diagram: https://gitdiagram.com/ghanenxra/syncra
- Repository: https://github.com/ghanenxra/syncra

## Overview

Syncra is a browser-based watch-party app for creating or joining rooms and sharing voice, video/screen media, and chat. The visible server path creates room codes, tracks room membership over WebSockets, and brokers WebRTC session operations through Cloudflare Calls. The frontend excerpts show routing, signaling, media handling, and room controls. Some page and hook excerpts are partial, so uncertain wiring—especially the host form’s room-creation request—is not shown.

Main entry points: [`frontend/src/pages/Room.jsx`](https://github.com/ghanenxra/syncra/blob/main/frontend/src/pages/Room.jsx) (Room interface), [`frontend/src/hooks/useWebRTC.js`](https://github.com/ghanenxra/syncra/blob/main/frontend/src/hooks/useWebRTC.js) (Media connection), [`Signaling/cmd/main.go`](https://github.com/ghanenxra/syncra/blob/main/Signaling/cmd/main.go) (Signaling server), [`Signaling/internal/ws.go`](https://github.com/ghanenxra/syncra/blob/main/Signaling/internal/ws.go) (WebSocket handler)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend experience"]
  node_app["App routes<br/>[App.jsx]"]
  node_home["Host or join<br/>[Home.jsx]"]
  node_roomcontainer["Room entry<br/>[RoomContainer.jsx]"]
  node_roomui["Room interface<br/>[Room.jsx]"]
  node_voicecontrols["Voice controls<br/>[VoiceControls.jsx]"]
  node_chatpanel["Room chat<br/>[ChatPanel.jsx]"]
  node_videogrid["Video grid<br/>[VideoGrid.jsx]"]
end

subgraph group_realtime["Room signaling"]
  node_signalinghook["Signaling client<br/>[useSignaling.js]"]
  node_signalingserver["Signaling server<br/>[main.go]"]
  node_ws["WebSocket handler<br/>[ws.go]"]
  node_hub["Room hub<br/>[hub.go]"]
  node_rooms[("Room membership<br/>[room.go]")]
end

subgraph group_media["Media sessions"]
  node_webrtchook["Media connection<br/>[useWebRTC.js]"]
end

node_participant(("Participant"))
node_cloudflare["Cloudflare Calls"]
node_browsermedia["Browser media"]

node_participant -->|"hosts or joins"| node_home
node_participant -->|"uses room"| node_roomui
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_roomcontainer
node_roomcontainer -->|"renders"| node_roomui
node_roomui -->|"renders"| node_voicecontrols
node_roomui -->|"renders"| node_chatpanel
node_roomui -->|"renders"| node_videogrid
node_roomui -->|"uses media state"| node_webrtchook
node_webrtchook -->|"sends signaling"| node_signalinghook
node_signalinghook -->|"WebSocket messages"| node_signalingserver
node_signalingserver -->|"creates rooms"| node_hub
node_signalingserver -->|"serves WebSocket"| node_ws
node_ws -->|"registers and routes"| node_hub
node_hub -->|"manages membership"| node_rooms
node_ws -->|"session API requests"| node_cloudflare
node_webrtchook -->|"captures media"| node_browsermedia
node_webrtchook -->|"WebRTC session"| node_cloudflare

click node_app "https://github.com/ghanenxra/syncra/blob/main/frontend/src/App.jsx"
click node_home "https://github.com/ghanenxra/syncra/blob/main/frontend/src/pages/Home.jsx"
click node_roomcontainer "https://github.com/ghanenxra/syncra/blob/main/frontend/src/pages/RoomContainer.jsx"
click node_roomui "https://github.com/ghanenxra/syncra/blob/main/frontend/src/pages/Room.jsx"
click node_voicecontrols "https://github.com/ghanenxra/syncra/blob/main/frontend/src/components/VoiceControls.jsx"
click node_chatpanel "https://github.com/ghanenxra/syncra/blob/main/frontend/src/components/ChatPanel.jsx"
click node_videogrid "https://github.com/ghanenxra/syncra/blob/main/frontend/src/components/VideoGrid.jsx"
click node_signalinghook "https://github.com/ghanenxra/syncra/blob/main/frontend/src/hooks/useSignaling.js"
click node_webrtchook "https://github.com/ghanenxra/syncra/blob/main/frontend/src/hooks/useWebRTC.js"
click node_signalingserver "https://github.com/ghanenxra/syncra/blob/main/Signaling/cmd/main.go"
click node_ws "https://github.com/ghanenxra/syncra/blob/main/Signaling/internal/ws.go"
click node_hub "https://github.com/ghanenxra/syncra/blob/main/Signaling/internal/hub.go"
click node_rooms "https://github.com/ghanenxra/syncra/blob/main/Signaling/internal/room.go"

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_home,node_roomcontainer,node_roomui,node_voicecontrols,node_chatpanel,node_videogrid,node_browsermedia toneBlue
class node_signalinghook,node_signalingserver,node_ws,node_hub,node_rooms toneAmber
class node_webrtchook toneMint
class node_participant,node_cloudflare toneIndigo
```

## Components

### Frontend experience

- [App routes](https://github.com/ghanenxra/syncra/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Host or join](https://github.com/ghanenxra/syncra/blob/main/frontend/src/pages/Home.jsx): `frontend/src/pages/Home.jsx`
- [Room entry](https://github.com/ghanenxra/syncra/blob/main/frontend/src/pages/RoomContainer.jsx): `frontend/src/pages/RoomContainer.jsx`
- [Room interface](https://github.com/ghanenxra/syncra/blob/main/frontend/src/pages/Room.jsx): `frontend/src/pages/Room.jsx`
- [Voice controls](https://github.com/ghanenxra/syncra/blob/main/frontend/src/components/VoiceControls.jsx): `frontend/src/components/VoiceControls.jsx`
- [Room chat](https://github.com/ghanenxra/syncra/blob/main/frontend/src/components/ChatPanel.jsx): `frontend/src/components/ChatPanel.jsx`
- [Video grid](https://github.com/ghanenxra/syncra/blob/main/frontend/src/components/VideoGrid.jsx): `frontend/src/components/VideoGrid.jsx`

### Room signaling

- [Signaling client](https://github.com/ghanenxra/syncra/blob/main/frontend/src/hooks/useSignaling.js): `frontend/src/hooks/useSignaling.js`
- [Signaling server](https://github.com/ghanenxra/syncra/blob/main/Signaling/cmd/main.go): `Signaling/cmd/main.go`
- [WebSocket handler](https://github.com/ghanenxra/syncra/blob/main/Signaling/internal/ws.go): `Signaling/internal/ws.go`
- [Room hub](https://github.com/ghanenxra/syncra/blob/main/Signaling/internal/hub.go): `Signaling/internal/hub.go`
- [Room membership](https://github.com/ghanenxra/syncra/blob/main/Signaling/internal/room.go): `Signaling/internal/room.go`

### Media sessions

- [Media connection](https://github.com/ghanenxra/syncra/blob/main/frontend/src/hooks/useWebRTC.js): `frontend/src/hooks/useWebRTC.js`

### Other components

- **Participant**
- **Cloudflare Calls**
- **Browser media**

## Connections

- Participant → Host or join: hosts or joins
- Participant → Room interface: uses room
- App routes → Host or join: routes to
- App routes → Room entry: routes to
- Room entry → Room interface: renders
- Room interface → Voice controls: renders
- Room interface → Room chat: renders
- Room interface → Video grid: renders
- Room interface → Media connection: uses media state
- Media connection → Signaling client: sends signaling
- Signaling client → Signaling server: WebSocket messages
- Signaling server → Room hub: creates rooms
- Signaling server → WebSocket handler: serves WebSocket
- WebSocket handler → Room hub: registers and routes
- Room hub → Room membership: manages membership
- WebSocket handler → Cloudflare Calls: session API requests
- Media connection → Browser media: captures media
- Media connection → Cloudflare Calls: WebRTC session