Real-Time Canvas Drawing App

A collaborative real-time canvas drawing application built with React, TypeScript, Socket.io, and WebRTC for video conferencing.

Features

• Real-time collaboration: Multiple users can draw on the same canvas simultaneously
• Room-based sessions: Create or join drawing rooms with unique IDs
• Drawing tools: Pen and eraser with customizable colors and line widths
• Live synchronization: All drawing actions are synchronized across all connected users
• Drawing history: New users joining a room see the complete drawing history
• User tracking: See how many users are connected to the room
• Real-time chat: Built-in chat functionality for communication during drawing sessions
• Video conferencing: WebRTC-based video calls with peer-to-peer connections
• User presence indicators: Visual indicators showing who's currently drawing
• Responsive design: Mobile-friendly interface with adaptive layout

Tech Stack

Frontend

• React 18 with TypeScript for type-safe development
• Vite for fast development and hot module replacement
• Socket.io Client for real-time communication
• HTML5 Canvas API for drawing functionality
• WebRTC with simple-peer library for video conferencing
• UUID for unique identifier generation

Backend

• Node.js with Express.js server
• Socket.io for WebSocket-based real-time communication
• CORS middleware for cross-origin resource sharing
• Nodemon for automatic server restarts during development

Real-time Communication

• Socket.io for bidirectional event-driven communication
• WebRTC for peer-to-peer video streaming
• MediaStream API for camera and microphone access

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm

Installation

1. Install frontend dependencies:

   npm install

2. Install backend dependencies:

   cd server
   npm install

Running the Application

1. Start the backend server:

   cd server
   npm run dev

   The server will start on http://localhost:3001

2. Start the frontend development server:

   npm run dev

   The frontend will start on http://localhost:5173

3. Open your browser and navigate to http://localhost:5173

How to Use

1. Create a Room: Click "Create New Room" to generate a unique room ID
2. Join a Room: Enter a room ID and click "Join Room" to join an existing session
3. Start Drawing: Use the pen tool to draw on the canvas
4. Collaborate: Share the room ID with others to start collaborative drawing
5. Tools: Switch between pen and eraser, change colors, and adjust line width
6. Chat: Use the chat panel to communicate with other users in the room
7. Video Call: Enable video conferencing for face-to-face collaboration
8. Clear Canvas: Use the clear button to erase everything (synchronized across all users)

Real-Time Features

• Live Drawing: See other users' drawing strokes in real-time
• Tool Synchronization: All users see the same drawing tools and colors
• User Presence: Track who's connected to the room with visual indicators
• Drawing History: New users automatically see the complete drawing when joining
• Room Management: Each room maintains its own drawing state and chat history
• Real-time Chat: Instant messaging with user identification and timestamps
• Video Conferencing: Peer-to-peer video calls with local and remote video streams
• Connection Status: Real-time connection status indicators

Technical Implementation

Drawing Engine

• HTML5 Canvas with mouse event handling
• Smooth line interpolation and stroke rendering
• Customizable brush tools with color and width controls
• Real-time stroke synchronization across all connected users

Real-time Communication

• Socket.io event-driven architecture for drawing synchronization
• WebRTC peer-to-peer connections for video conferencing
• Automatic reconnection handling for network interruptions
• Room-based session management with user tracking

Data Management

• Map data structures for efficient user and room management
• Drawing history persistence for new user onboarding
• Chat message storage with automatic cleanup
• Memory optimization for concurrent room sessions

Project Structure

starter-project/
├── src/
│   ├── App.tsx          # Main React component with real-time drawing logic
│   ├── App.css          # Styles for the application
│   └── main.tsx         # React entry point
├── server/
│   ├── server.js        # Socket.io server with real-time event handling
│   └── package.json     # Server dependencies
├── package.json         # Frontend dependencies
└── README.md           # This file

Development

• The frontend uses Vite for fast development and hot reloading
• The backend uses nodemon for automatic server restarts during development
• Socket.io handles all real-time communication between clients
• TypeScript provides type safety for both frontend and backend
• WebRTC enables peer-to-peer video communication without server relay

Dependencies

Frontend Dependencies

• react: ^18.2.0
• react-dom: ^18.2.0
• socket.io-client: ^4.7.2
• simple-peer: ^9.11.1
• uuid: ^9.0.1

Backend Dependencies

• express: ^4.18.2
• socket.io: ^4.7.2
• cors: ^2.8.5

Future Enhancements

• User authentication and profiles
• Different brush types and effects
• Image upload and drawing on images
• Drawing export and sharing
• Persistent storage for drawings
• Screen sharing capabilities
• Recording and playback of drawing sessions