CoCanvas is an all-in-one collaborative workspace that helps developers and students build logic, clear doubts, and grow together. By combining live pair programming, secure code execution, visual whiteboarding, and voice chat into a single browser tool, it transforms solo coding struggles into shared learning.
This project is built using an Agile iterative approach rather than building everything at once:
-
Sprint-Based Delivery: Features are broken down into small, manageable cycles (UI
$\rightarrow$ Real-time Sync$\rightarrow$ Code Execution$\rightarrow$ Whiteboard/Voice). - Continuous Testing: Each component is built and tested independently to ensure a stable, lightweight application.
- Real-Time Collaboration: Multiple users can write and edit code simultaneously using WebSockets and Yjs (CRDTs) for conflict-free merging.
- Secure Code Execution: Run multiple programming languages safely in an isolated sandbox via the Piston API with instant output consoles.
- Visual Whiteboard: Sketch out algorithms, data structures, and logic using digital color pens (via Excalidraw integration).
- Peer Voice Chat: Talk through problems and debug together directly in the browser using WebRTC (zero third-party apps required).
- Cloud Persistence: Save code snippets and instantly share unique workspace links via Supabase PostgreSQL.
- Frontend: Next.js / React (Vercel)
- Backend: Node.js with Express (Render)
- Real-Time Sync: Socket.io & Yjs
- Database: Supabase PostgreSQL & Upstash Redis
- Execution & Audio: Piston API & WebRTC