sameersharmadev/canverse

How sameersharmadev/canverse works

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: Canvas.tsx Canvas view · server.ts Socket server · roomManager.ts Room manager · canvas.ts Canvas data types

Components 21

Room entry

Room selector src/components/RoomSelector.tsx
App routing src/App.tsx

Whiteboard

Canvas view src/components/canvas/Canvas.tsx
Canvas events src/hooks/useCanvasEvents.ts
Canvas interaction src/hooks/useCanvasInteraction.ts
Element creation src/components/canvas/CanvasEventHandlers.ts
Element rendering src/components/canvas/CanvasElements.tsx
Selection transform src/components/canvas/ElementTransformer.tsx
Drawing toolbar src/components/canvas/Toolbar.tsx
Live cursors src/components/canvas/UserCursors.tsx
Canvas data types src/types/canvas.ts

Realtime backend

Socket client src/hooks/useSocket.ts
Socket server backend/src/server.ts
Room events backend/src/roomEventManager.ts
Drawing events backend/src/drawingManager.ts
Voice events backend/src/voiceChatManager.ts

Room state

Room manager backend/src/roomManager.ts
Redis store backend/src/redis.ts

Voice chat

Voice controls src/components/VoiceChat.tsx
Voice peer audio src/hooks/useVoiceChat.ts

Other components

Participant

Connections 27

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

More TypeScript diagrams: productofamerica/turbo-starter · qlik-oss/qlik-api-ts · realfascinated/scoresaber-reloaded · samualtnorman/hackmud-script-manager · savekar-ev/ocpp-1.6-charging-point-management-system

Drawn by GitDiagram on September 30, 2026 from the repository's file tree, README and source files. Read as Markdown ·