✨ CollabCode Canvas

Code. Draw. Talk. Think. Build — together.

A real-time collaborative workspace that combines a code editor, whiteboard, HTML Visualizer, video call, chat, and AI assistant into one powerful platform.

🚀 Live Demo

🌐 Try the app:
https://collabcode-canvas-h14w.onrender.com/

---

🎥 Demo

---

💻 Collaborative Code Editor

Features:

• Real-time multi-user editing
• Syntax highlighting
• Multiple language support
• Run code directly in browser

---

📝 Shared Whiteboard

Use the whiteboard to:

• Draw diagrams
• Explain algorithms
• Sketch system architecture
• Annotate ideas visually

---

💬 Real-Time Chat

Collaborators can:

• Share messages
• Discuss solutions
• Send links and notes

---

📹 Video Call Integration

Jump into a live video call with collaborators while coding.

---

🤖 AI Assistant

Use AI to:

• Explain code
• Suggest improvements
• Debug problems
• Brainstorm solutions

---

🌟 Key Features

💻 Real-Time Code Collaboration:

Multiple users can edit code simultaneously in the same editor.

📝 Interactive Whiteboard:

Draw diagrams and explain ideas visually.

📊 Flowchart Builder:

Create logic diagrams and plan algorithms.

🤖 AI Coding Assistant:

Ask questions and get coding help instantly.

💬 Built-in Chat:

Communicate with collaborators without leaving the workspace.

📹 Video Call Integration:

Talk face-to-face during coding sessions.

🧑‍🤝‍🧑 Room-Based Collaboration:

Create rooms where teams can collaborate in real time.

🔗 Shareable Links:

Invite others instantly via room URLs.

🌐 HTML Visualizer:

Provide your HTML, CSS, and JavaScript code, and the platform will instantly render and preview it in the browser.

🏗 Architecture

                 +---------------------+
                 |     Frontend        |
                 |  React / Next.js    |
                 |  Tailwind CSS       |
                 +----------+----------+
                            |
                            | REST API + WebSockets
                            |
                 +----------v----------+
                 |      Backend        |
                 |     Node.js         |
                 |     TypeScript      |
                 |   Express Server    |
                 +----------+----------+
                            |
                            |
                  +---------v----------+
                  | Code Execution API |
                  |  (Python, JS etc.) |
                  +--------------------+

---

🧰 Tech Stack

Frontend

• ⚛️ React / Next.js
• 🧩 TypeScript
• 🎨 Tailwind CSS
• 🔌 WebSockets
• 🖌 Canvas API

Backend

• 🟩 Node.js
• 🧾 TypeScript
• 🌐 REST APIs
• 🔗 WebSocket server
• 🧮 Code execution services

---

📁 Project Structure

CollabCode_Canvas
│
├── backend
│   ├── APIs
│   ├── WebSocket server
│   └── Code execution services
│
├── frontend
│   ├── editor
│   ├── whiteboard
│   ├── chat
│   ├── video
│   └── AI assistant
│
└── README.md

---

🏁 Running Locally

1. Clone repo

git clone https://github.com/Archana-P-Nair/CollabCode_Canvas.git
cd CollabCode_Canvas

2. Install dependencies

Frontend

cd frontend
npm install

Backend

cd ../backend
npm install

3. Run backend

cd backend
npm run dev

4. Run frontend

cd frontend
npm run dev

Then open:

http://localhost:3000

---

🧪 Example Use Cases

👩‍🎓 Students

Practice coding together and explain algorithms visually.

👨‍🏫 Teachers

Teach programming with live diagrams and code execution.

🧑‍💻 Interviewers

Conduct technical interviews remotely.

🌍 Remote Teams

Collaborate on debugging and architecture discussions.

⭐ Support

If you like this project, consider giving it a ⭐ on GitHub!