CodeBoard

A browser-based collaborative workspace that combines a whiteboard and code editor in a single view. Built for developers who need to sketch ideas and write code together in real time without switching between apps.

What it does

CodeBoard lets users create or join a session and collaborate with up to 4 people simultaneously. The workspace is split into two resizable panels:

• Code editor (left) — Monaco Editor with syntax highlighting, powered by the same editor as VS Code
• Whiteboard (right) — Excalidraw-based drawing canvas for diagrams, sketches, and visual communication

All edits to both panels are synchronized in real time across all connected users via WebSockets. Sessions are anonymous by default — no account or installation required.

Tech stack

Layer	Technology
Frontend	React + Vite, Tailwind CSS
Code editor	Monaco Editor
Whiteboard	Excalidraw
State	Zustand
Real-time sync	WebSocket (native API)
Backend	AWS API Gateway (WSS) + Lambda (serverless)
Session store	DynamoDB (connection tracking only — no content is persisted)
Hosting	S3 + CloudFront

Getting started

Prerequisites

• Node.js (v18+)
• npm

Frontend setup

npm install

Create a .env file in the project root with the WebSocket and session-check URLs:

VITE_WS_URL=wss://<your-api-gateway-url>
VITE_SESSION_CHECK_URL=https://<your-session-check-endpoint>

Start the dev server:

npm run dev

The app will be available at http://localhost:5173. Click Create New Session to start a workspace, then share the session ID with collaborators.

Backend (AWS Lambda)

The backend consists of four Lambda functions in lambda/:

Function	Purpose
connect.js	Handles WebSocket $connect — registers the connection in DynamoDB, enforces 4-user cap
disconnect.js	Handles $disconnect — removes the connection from DynamoDB
message.js	Handles $default — validates messages and broadcasts to all other session participants
session-check.js	HTTP endpoint to check if a session exists before joining

Deploy these to AWS Lambda and wire them to an API Gateway WebSocket API with a DynamoDB table named codeboard-connections.

Project structure

src/
  App.jsx                # Main app — lobby routing + workspace layout
  pages/Lobby.jsx        # Session create/join screen
  components/Toolbar.jsx
  hooks/useWebSocket.js  # WebSocket connection hook with sync protocol
  lib/session.js
lambda/                  # AWS Lambda handlers
index.html
package.json
vite.config.js
proposal.md              # Original project proposal