How aditya726/teamsketch works
Purpose and runtime topology
TeamSketch is a collaborative whiteboarding system with room-based drawing, text chat, voice chat, and authenticated access. It runs as three processes: a React/Vite browser client, an Express API server, and a separate Socket.IO whiteboard synchronization server. Deployment automation is defined in .github/workflows/deploy.yml.
Frontend application shell
The React TypeScript client bootstraps from frontend/src/main.tsx and composes routing/UI in frontend/src/App.tsx. Page-level flows cover landing, credential/OAuth completion, registration, and user profile at frontend/src/pages/LandingPage.tsx, frontend/src/pages/AuthSuccess.tsx, and frontend/src/pages/UserProfile.tsx. Vite serves the client and injects API/socket URLs through environment configuration.
Authentication and client state boundary
Authentication is owned by the API and exposed through backend/src/routes/authRoutes.js and backend/src/controllers/authController.js. Passport configuration supports Google OAuth in backend/src/config/passport.js; JWT-based protection is enforced by backend/src/middleware/authMiddleware.js. The browser persists/consumes auth state through Zustand in frontend/src/store/useAuthStore.ts, separating session state from feature components.
Core REST API and persistence
The main Express entry point is backend/src/app.js. It initializes API routes, database, middleware, and Swagger documentation. MongoDB/Mongoose persistence is configured in backend/src/config/database.js, with user identity modeled by backend/src/models/User.js. Room creation/joining is handled across backend/src/routes/roomRoutes.js and backend/src/controllers/roomController.js; frontend callers are centralized in frontend/src/services/roomApi.ts.
Real-time whiteboard subsystem
Whiteboard synchronization is intentionally isolated from the REST server in backend/src/whiteboardServer.js. Socket event behavior resides in backend/src/socket/whiteboardSocket.js, allowing room-scoped canvas updates to flow independently of HTTP requests. The interactive Fabric.js client canvas is frontend/src/components/Whiteboard.tsx, with shared drawing/event types in frontend/src/types/whiteboard.types.ts. The client connects using the dedicated socket-server URL rather than the API base URL.
Collaboration features
The room experience layers communication beside the canvas: frontend/src/components/RoomChat.tsx provides real-time text chat, while frontend/src/components/RoomVoiceChat.tsx handles room voice interaction. These components are feature boundaries around the central room/whiteboard context rather than API entry points.
External infrastructure and service contracts
MongoDB stores application/user data; Redis is configured through backend/src/config/redis.js for caching and/or Socket.IO-scale pub/sub responsibilities. Google Cloud OAuth is an optional external identity provider. Swagger is configured in backend/src/config/swagger.js and exposed by the Express API. Browser-to-server boundaries are: HTTP API via frontend/src/services/api.ts, authenticated API calls via JWT, and live collaborative events via Socket.IO.
Main entry points: App.tsx App shell & routes · app.js Express API · whiteboardServer.js Socket.IO server · deploy.yml Deployment workflow
Components 22
Browser client
- React/Vite bootstrap
frontend/src/main.tsx - App shell & routes
frontend/src/App.tsx - Auth and profile pages · Landing, OAuth completion, registration, and profile flows.
frontend/src/pages/LandingPage.tsx - Auth state · Persists browser session state separately from feature components.
frontend/src/store/useAuthStore.ts - HTTP API client
frontend/src/services/api.ts - Room API client
frontend/src/services/roomApi.ts - Fabric.js canvas
frontend/src/components/Whiteboard.tsx - Room text chat
frontend/src/components/RoomChat.tsx - Room voice chat
frontend/src/components/RoomVoiceChat.tsx
REST API
- Express API · Initializes middleware, routes, database, and Swagger.
backend/src/app.js - Auth routes
backend/src/routes/authRoutes.js - Auth controller
backend/src/controllers/authController.js - Google OAuth
backend/src/config/passport.js - JWT protection
backend/src/middleware/authMiddleware.js - Room routes & controller · Creates and joins rooms.
backend/src/routes/roomRoutes.js - Swagger docs
backend/src/config/swagger.js
Whiteboard sync
- Socket.IO server · Runs independently from the REST API.
backend/src/whiteboardServer.js - Room canvas events · Scopes drawing updates to rooms.
backend/src/socket/whiteboardSocket.js
Infrastructure
- MongoDB / User model · Mongoose stores user identity and application data.
backend/src/models/User.js - Redis
backend/src/config/redis.js - Deployment workflow
.github/workflows/deploy.yml
Connections 26
- React/Vite bootstrap → App shell & routes: mounts
- App shell & routes → Auth and profile pages: routes to
- Auth and profile pages → Auth state: updates session
- App shell & routes → Room API client: uses
- Room API client → HTTP API client: uses
- HTTP API client → Express API: HTTP + JWT
- App shell & routes → Fabric.js canvas: hosts room canvas
- App shell & routes → Room text chat: hosts
- App shell & routes → Room voice chat: hosts
- Fabric.js canvas → Socket.IO server: Socket.IO events
- Room text chat → Socket.IO server: room events
- Room voice chat → Socket.IO server: room interaction
- Socket.IO server → Room canvas events: registers
- Room canvas events → Redis: scales via pub/sub
- Express API → Auth routes: mounts
- Auth routes → Auth controller: dispatches
- Auth controller → Google OAuth: uses OAuth strategy
- Google OAuth → Google: OAuth
- Express API → JWT protection: protects routes
- Express API → Room routes & controller: mounts
- Auth controller → MongoDB / User model: reads/writes users
- Room routes & controller → MongoDB / User model: persists room access
- Express API → Swagger docs: serves documentation
- Deployment workflow → React/Vite bootstrap: deploys client
- Deployment workflow → Express API: deploys API
- Deployment workflow → Socket.IO server: deploys sync server