How ghanenxra/syncra works
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: Room.jsx Room interface · useWebRTC.js Media connection · main.go Signaling server · ws.go WebSocket handler
Components 16
Frontend experience
- App routes
frontend/src/App.jsx - Host or join
frontend/src/pages/Home.jsx - Room entry
frontend/src/pages/RoomContainer.jsx - Room interface
frontend/src/pages/Room.jsx - Voice controls
frontend/src/components/VoiceControls.jsx - Room chat
frontend/src/components/ChatPanel.jsx - Video grid
frontend/src/components/VideoGrid.jsx
Room signaling
- Signaling client
frontend/src/hooks/useSignaling.js - Signaling server
Signaling/cmd/main.go - WebSocket handler
Signaling/internal/ws.go - Room hub
Signaling/internal/hub.go - Room membership
Signaling/internal/room.go
Media sessions
- Media connection
frontend/src/hooks/useWebRTC.js
Other components
- Participant
- Cloudflare Calls
- Browser media
Connections 18
- 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