code-a-man/ws-canvas-demo

Collaborative Drawing App

A real-time collaborative drawing application where multiple users can draw together on a shared canvas using WebSocket communication.

Technologies Used

Frontend

• React
• TypeScript
• Tailwind CSS
• WebSocket API
• Vite

Backend

• Go
• Gorilla WebSocket

Features

• Real-time collaborative drawing
• Multiple users can draw simultaneously
• Color picker
• Canvas state synchronization between clients
• Automatic reconnection on connection loss
• Connected users counter

Prerequisites

• Node.js (v18 or higher)
• Go (v1.23 or higher)
• npm or bun

Installation

1. Clone the repository:

git clone https://github.com/code-a-man/ws-canvas-demo.git
cd ws-canvas-demo

2. Install frontend dependencies:

npm install

3. Install backend dependencies:

cd backend
go mod download

Running the Application

You can start both frontend and backend servers with a single command:

npm run dev

This will start:

• Frontend server at http://localhost:5173
• Backend WebSocket server at ws://localhost:8080

To run servers separately:

Frontend only:

npm run frontend

Backend only:

npm run backend

Building for Production

npm run build

This will create a production build in the dist directory.

Project Structure

.
├── backend/          # Go WebSocket server
├── src/             # React frontend source
│   ├── App.tsx      # Main application component
│   ├── lib/         # Utility functions
│   └── main.tsx     # Application entry point
└── public/          # Static assets

License

MIT