🖌️ Real-Time Collaborative Whiteboard

A browser-based real-time whiteboard application where multiple users can draw together simultaneously.
Built using React, Canvas API, and Socket.IO for real-time communication.

🚀 Features

• 🎨 Draw on a full-screen canvas
• 👥 Real-time multi-user drawing using WebSockets
• 🧰 Floating tools panel with animations
• 🎨 Brush color picker
• 🟦 Board background color picker
• ✏️ Adjustable brush size
• 🧹 Clear board option
• ⌨️ Keyboard shortcut (Press T to toggle tools)
• ⚡ Smooth drawing with device pixel ratio handling

🛠️ Tech Stack

• Frontend: React (Vite), HTML Canvas, CSS
• Backend: Node.js, Express, Socket.IO
• Real-time Communication: WebSockets (Socket.IO)

📘 What I Have Learned

• How to use the HTML Canvas API with React
• Handling mouse events for drawing (mousedown, mousemove, mouseup)
• Using useRef and useEffect for managing canvas context
• Fixing canvas scaling issues using device pixel ratio (DPR)
• Implementing real-time communication using Socket.IO
• Broadcasting and receiving drawing data between multiple users
• Managing application state for tools like color, brush size, and background
• Creating animated and interactive UI components in React
• Structuring a full-stack project with separate client and server folders

📁 Project Structure

whiteboard-project/ ├── client/ # React frontend └── server/ # Node.js + Socket.IO backend

▶️ How to Run the Project

Follow the steps below to run the project locally on your system.

Prerequisites

• Node.js installed (v18 or above recommended)
• npm installed

🎥 Project Demo Video

18-00-08.mp4

Demo video is available in the server/demo folder.