# sameersharmadev/canverse architecture

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

- Interactive diagram: https://gitdiagram.com/sameersharmadev/canverse
- Repository: https://github.com/sameersharmadev/canverse

## Overview

Canverse is a collaborative whiteboard: participants enter a room, draw and edit shared content, see live presence, and optionally talk over voice chat. The frontend combines room selection, canvas interaction/rendering, and socket-driven updates; the backend routes room, drawing, and voice events through managers, with room state persisted in Redis. The README documents the major product features, while several implementation links—especially frontend-to-backend event wiring—are not shown in excerpts and are left unverified.

Main entry points: [`src/components/canvas/Canvas.tsx`](https://github.com/sameersharmadev/canverse/blob/main/src/components/canvas/Canvas.tsx) (Canvas view), [`backend/src/server.ts`](https://github.com/sameersharmadev/canverse/blob/main/backend/src/server.ts) (Socket server), [`backend/src/roomManager.ts`](https://github.com/sameersharmadev/canverse/blob/main/backend/src/roomManager.ts) (Room manager), [`src/types/canvas.ts`](https://github.com/sameersharmadev/canverse/blob/main/src/types/canvas.ts) (Canvas data types)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Room entry"]
  node_room_selector["Room selector<br/>[RoomSelector.tsx]"]
  node_app["App routing<br/>[App.tsx]"]
end

subgraph group_canvas["Whiteboard"]
  node_canvas_view["Canvas view<br/>[Canvas.tsx]"]
  node_canvas_events["Canvas events<br/>[useCanvasEvents.ts]"]
  node_canvas_interaction["Canvas interaction"]
  node_element_creation["Element creation"]
  node_canvas_elements["Element rendering<br/>[CanvasElements.tsx]"]
  node_transformer["Selection transform"]
  node_toolbar["Drawing toolbar<br/>[Toolbar.tsx]"]
  node_presence_view["Live cursors<br/>[UserCursors.tsx]"]
  node_canvas_types["Canvas data types<br/>[canvas.ts]"]
end

subgraph group_realtime["Realtime backend"]
  node_socket_hook["Socket client<br/>[useSocket.ts]"]
  node_server["Socket server<br/>[server.ts]"]
  node_room_events["Room events"]
  node_drawing_events["Drawing events<br/>[drawingManager.ts]"]
  node_voice_events["Voice events"]
end

subgraph group_state["Room state"]
  node_room_manager["Room manager<br/>[roomManager.ts]"]
  node_redis[("Redis store<br/>[redis.ts]")]
end

subgraph group_voice["Voice chat"]
  node_voice_ui["Voice controls<br/>[VoiceChat.tsx]"]
  node_voice_hook["Voice peer audio<br/>[useVoiceChat.ts]"]
end

node_participant(("Participant"))

node_participant -->|"chooses room"| node_room_selector
node_room_selector -.->|"joins room"| node_app
node_app -->|"shows when unjoined"| node_room_selector
node_app -->|"opens joined room"| node_canvas_view
node_canvas_view -->|"handles gestures"| node_canvas_events
node_canvas_view -->|"uses hit testing"| node_canvas_interaction
node_canvas_events -->|"creates and updates"| node_element_creation
node_canvas_view -->|"renders elements"| node_canvas_elements
node_canvas_view -->|"renders selection transform"| node_transformer
node_canvas_view -->|"renders tools"| node_toolbar
node_canvas_view -->|"renders user cursors"| node_presence_view
node_canvas_view -->|"receives room updates"| node_socket_hook
node_canvas_view -->|"renders voice chat"| node_voice_ui
node_voice_ui -->|"uses voice controls"| node_voice_hook
node_socket_hook -.->|"exchanges events"| node_server
node_voice_hook -.->|"exchanges voice events"| node_server
node_server -->|"registers room events"| node_room_events
node_server -->|"registers drawing events"| node_drawing_events
node_server -->|"registers voice events"| node_voice_events
node_room_events -->|"updates room state"| node_room_manager
node_drawing_events -->|"persists drawing changes"| node_room_manager
node_voice_events -->|"tracks voice participants"| node_room_manager
node_room_manager -->|"loads and saves rooms"| node_redis
node_canvas_events -->|"uses element types"| node_canvas_types
node_canvas_interaction -->|"uses element types"| node_canvas_types
node_canvas_elements -->|"uses element types"| node_canvas_types
node_toolbar -->|"uses tool types"| node_canvas_types

click node_room_selector "https://github.com/sameersharmadev/canverse/blob/main/src/components/RoomSelector.tsx"
click node_app "https://github.com/sameersharmadev/canverse/blob/main/src/App.tsx"
click node_canvas_view "https://github.com/sameersharmadev/canverse/blob/main/src/components/canvas/Canvas.tsx"
click node_canvas_events "https://github.com/sameersharmadev/canverse/blob/main/src/hooks/useCanvasEvents.ts"
click node_canvas_interaction "https://github.com/sameersharmadev/canverse/blob/main/src/hooks/useCanvasInteraction.ts"
click node_element_creation "https://github.com/sameersharmadev/canverse/blob/main/src/components/canvas/CanvasEventHandlers.ts"
click node_canvas_elements "https://github.com/sameersharmadev/canverse/blob/main/src/components/canvas/CanvasElements.tsx"
click node_transformer "https://github.com/sameersharmadev/canverse/blob/main/src/components/canvas/ElementTransformer.tsx"
click node_toolbar "https://github.com/sameersharmadev/canverse/blob/main/src/components/canvas/Toolbar.tsx"
click node_socket_hook "https://github.com/sameersharmadev/canverse/blob/main/src/hooks/useSocket.ts"
click node_presence_view "https://github.com/sameersharmadev/canverse/blob/main/src/components/canvas/UserCursors.tsx"
click node_voice_ui "https://github.com/sameersharmadev/canverse/blob/main/src/components/VoiceChat.tsx"
click node_voice_hook "https://github.com/sameersharmadev/canverse/blob/main/src/hooks/useVoiceChat.ts"
click node_server "https://github.com/sameersharmadev/canverse/blob/main/backend/src/server.ts"
click node_room_events "https://github.com/sameersharmadev/canverse/blob/main/backend/src/roomEventManager.ts"
click node_drawing_events "https://github.com/sameersharmadev/canverse/blob/main/backend/src/drawingManager.ts"
click node_voice_events "https://github.com/sameersharmadev/canverse/blob/main/backend/src/voiceChatManager.ts"
click node_room_manager "https://github.com/sameersharmadev/canverse/blob/main/backend/src/roomManager.ts"
click node_redis "https://github.com/sameersharmadev/canverse/blob/main/backend/src/redis.ts"
click node_canvas_types "https://github.com/sameersharmadev/canverse/blob/main/src/types/canvas.ts"

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_room_selector,node_app toneBlue
class node_canvas_view,node_canvas_events,node_canvas_interaction,node_element_creation,node_canvas_elements,node_transformer,node_toolbar,node_presence_view,node_canvas_types toneAmber
class node_socket_hook,node_server,node_room_events,node_drawing_events,node_voice_events toneMint
class node_room_manager,node_redis toneRose
class node_voice_ui,node_voice_hook,node_participant toneIndigo
```

## Components

### Room entry

- [Room selector](https://github.com/sameersharmadev/canverse/blob/main/src/components/RoomSelector.tsx): `src/components/RoomSelector.tsx`
- [App routing](https://github.com/sameersharmadev/canverse/blob/main/src/App.tsx): `src/App.tsx`

### Whiteboard

- [Canvas view](https://github.com/sameersharmadev/canverse/blob/main/src/components/canvas/Canvas.tsx): `src/components/canvas/Canvas.tsx`
- [Canvas events](https://github.com/sameersharmadev/canverse/blob/main/src/hooks/useCanvasEvents.ts): `src/hooks/useCanvasEvents.ts`
- [Canvas interaction](https://github.com/sameersharmadev/canverse/blob/main/src/hooks/useCanvasInteraction.ts): `src/hooks/useCanvasInteraction.ts`
- [Element creation](https://github.com/sameersharmadev/canverse/blob/main/src/components/canvas/CanvasEventHandlers.ts): `src/components/canvas/CanvasEventHandlers.ts`
- [Element rendering](https://github.com/sameersharmadev/canverse/blob/main/src/components/canvas/CanvasElements.tsx): `src/components/canvas/CanvasElements.tsx`
- [Selection transform](https://github.com/sameersharmadev/canverse/blob/main/src/components/canvas/ElementTransformer.tsx): `src/components/canvas/ElementTransformer.tsx`
- [Drawing toolbar](https://github.com/sameersharmadev/canverse/blob/main/src/components/canvas/Toolbar.tsx): `src/components/canvas/Toolbar.tsx`
- [Live cursors](https://github.com/sameersharmadev/canverse/blob/main/src/components/canvas/UserCursors.tsx): `src/components/canvas/UserCursors.tsx`
- [Canvas data types](https://github.com/sameersharmadev/canverse/blob/main/src/types/canvas.ts): `src/types/canvas.ts`

### Realtime backend

- [Socket client](https://github.com/sameersharmadev/canverse/blob/main/src/hooks/useSocket.ts): `src/hooks/useSocket.ts`
- [Socket server](https://github.com/sameersharmadev/canverse/blob/main/backend/src/server.ts): `backend/src/server.ts`
- [Room events](https://github.com/sameersharmadev/canverse/blob/main/backend/src/roomEventManager.ts): `backend/src/roomEventManager.ts`
- [Drawing events](https://github.com/sameersharmadev/canverse/blob/main/backend/src/drawingManager.ts): `backend/src/drawingManager.ts`
- [Voice events](https://github.com/sameersharmadev/canverse/blob/main/backend/src/voiceChatManager.ts): `backend/src/voiceChatManager.ts`

### Room state

- [Room manager](https://github.com/sameersharmadev/canverse/blob/main/backend/src/roomManager.ts): `backend/src/roomManager.ts`
- [Redis store](https://github.com/sameersharmadev/canverse/blob/main/backend/src/redis.ts): `backend/src/redis.ts`

### Voice chat

- [Voice controls](https://github.com/sameersharmadev/canverse/blob/main/src/components/VoiceChat.tsx): `src/components/VoiceChat.tsx`
- [Voice peer audio](https://github.com/sameersharmadev/canverse/blob/main/src/hooks/useVoiceChat.ts): `src/hooks/useVoiceChat.ts`

### Other components

- **Participant**

## Connections

- Participant → Room selector: chooses room (evidence: `README.md`)
- Room selector → App routing: joins room (evidence: `src/App.tsx`)
- App routing → Room selector: shows when unjoined (evidence: `src/App.tsx`)
- App routing → Canvas view: opens joined room (evidence: `src/App.tsx`)
- Canvas view → Canvas events: handles gestures (evidence: `src/components/canvas/Canvas.tsx`)
- Canvas view → Canvas interaction: uses hit testing (evidence: `src/components/canvas/Canvas.tsx`)
- Canvas events → Element creation: creates and updates (evidence: `src/hooks/useCanvasEvents.ts`)
- Canvas view → Element rendering: renders elements (evidence: `src/components/canvas/Canvas.tsx`)
- Canvas view → Selection transform: renders selection transform (evidence: `src/components/canvas/Canvas.tsx`)
- Canvas view → Drawing toolbar: renders tools (evidence: `src/components/canvas/Canvas.tsx`)
- Canvas view → Live cursors: renders user cursors (evidence: `src/components/canvas/Canvas.tsx`)
- Canvas view → Socket client: receives room updates (evidence: `src/components/canvas/Canvas.tsx`)
- Canvas view → Voice controls: renders voice chat (evidence: `src/components/canvas/Canvas.tsx`)
- Voice controls → Voice peer audio: uses voice controls (evidence: `src/components/VoiceChat.tsx`)
- Socket client → Socket server: exchanges events
- Voice peer audio → Socket server: exchanges voice events
- Socket server → Room events: registers room events (evidence: `backend/src/server.ts`)
- Socket server → Drawing events: registers drawing events (evidence: `backend/src/server.ts`)
- Socket server → Voice events: registers voice events (evidence: `backend/src/server.ts`)
- Room events → Room manager: updates room state (evidence: `backend/src/roomEventManager.ts`)
- Drawing events → Room manager: persists drawing changes (evidence: `backend/src/drawingManager.ts`)
- Voice events → Room manager: tracks voice participants (evidence: `backend/src/voiceChatManager.ts`)
- Room manager → Redis store: loads and saves rooms (evidence: `backend/src/roomManager.ts`)
- Canvas events → Canvas data types: uses element types (evidence: `src/hooks/useCanvasEvents.ts`)
- Canvas interaction → Canvas data types: uses element types (evidence: `src/hooks/useCanvasInteraction.ts`)
- Element rendering → Canvas data types: uses element types (evidence: `src/components/canvas/CanvasElements.tsx`)
- Drawing toolbar → Canvas data types: uses tool types (evidence: `src/components/canvas/Toolbar.tsx`)