🚀 CollabCode Canvas 🎨

A powerful and interactive web application that combines a live code editor with a collaborative digital whiteboard. Perfect for developers to write, test, and execute code snippets while simultaneously designing algorithms, flowcharts, or explaining concepts on a shared drawing space. ✏️💻

✨ Features

👩‍💻 Code Editor

• 🔴 Live Preview: See the output of your Python,C++,C,Java and JavaScript code in real-time.
• 🌈 Syntax Highlighting: Supports multiple programming languages for better code readability.
• ▶️ Code Execution: Run code snippets directly within the browser.
• 💾 Share Snippets: Share your code for later use with your friends.

📝 Whiteboard Panel:

• Drawing tool: Select a (e.g., pen ✏️, rectangle ▭, circle 🔵) from the toolbar.
• 🎨 Choosing Colors: Click the color picker to choose from a preset palette or create a custom color for your strokes and fill.
• Stroke:Adjust the stroke width and opacity for different effects.
• ↩️ Undoing Mistakes: Click the "Undo" button to remove your last action. Keep clicking to go further back in your history.
• ↪️ Redoing Actions: Click the "Redo" button to restore an action you just undid.
• Eraser: Use to correct small mistakes
• Clear 🧹: button to reset the entire canvas.

⚡ Integrated Workspace

• 📊 Split View: Work on your code and whiteboard side-by-side within a single tab.

📦 Installation & Setup

Follow these steps to run the project locally on your machine: 🖥️

1. 📥 Clone the repository

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

2. 📦 Install dependencies

   npm install
   cd frontend
   npm install
   cd ..
   cd backend
   npm install

3. 🎯 Run the development server

   npm run dev

   Now open another terminal

   cd frontend
   npm run dev

4. 🌐 Open your browser and navigate to http://localhost:3000

🎮 How to Use

1. 👩‍💻 Code Editor Panel:

   • Select your programming language from the dropdown menu. 🗃️
   • Start writing your code in the editor pane.
   • Click the "Run" ▶️ button to see the output in the preview panel.

2. 📝 Whiteboard Panel:

   • Select a drawing tool (e.g., pen, rectangle, circle) from the toolbar. 🖌️🔴🟦
   • Choose your desired color 🎨 and stroke width.
   • Start drawing on the canvas.
   • Use the eraser ✏️ to correct mistakes or the clear 🧹 button to start over.

3. 💾 Share Your Work:

   • Use the "Share" 📤 button on the code editor to share your code.

🌐 Live Demo

Check out the live application here: ➡️ https://code-edfitor-whiteboard-3c5a-or2g8vmia.vercel.app/

👩‍💻 Author

Archana Prasad Nair

• LinkedIn: Archana Prasad Nair 🤝

⭐️ If you found this project helpful, don't forget to give it a star! ⭐️

Untitled.video.-.Made.with.Clipchamp.mp4