draw.wine

draw.wine is a real-time collaborative whiteboard built with React, TypeScript, Express, and Socket.IO. It supports multiplayer drawing sessions, live cursor sync, room invitations, AI-assisted drawing generation, and shared room state.

Features

• Real-time collaboration with room-based sessions and live cursor sync
• Drawing tools for select, pencil, text, image, rectangle, circle, diamond, line, arrow, eraser, and laser pointer
• Custom stroke styles with adjustable width and curated colors
• Export and import support for PNG, JPG, SVG, JSON, and Mermaid diagrams
• Save and restore drawings from project files or imported JSON
• Undo and redo history with up to 50 steps
• Invite collaborators by email via backend API
• Gemini-powered AI drawing generation (vector and raster modes)
• Installable PWA frontend for desktop and mobile use

Monorepo Layout

.
├── be/   # Express + Socket.IO backend
├── fe/   # React + Vite frontend
├── docs/ # Product and architecture notes
└── Makefile

API Docs

• REST API (OpenAPI / Swagger): served by the backend at /api when the backend is running. In development the Swagger UI is available at http://localhost:3000/api (adjust the port if you use a different PORT). The OpenAPI spec is generated from JSDoc annotations in be/src via swagger-jsdoc.
• WebSocket / Realtime events (AsyncAPI): the AsyncAPI JSON spec is available at /asyncapi.json and an AsyncAPI web UI is served at /ws. In development you can visit http://localhost:3000/ws to view the WebSocket event documentation and examples. The source spec lives at be/src/asyncapi.json.

These docs make it easy to explore the backend's REST endpoints and the realtime socket messages supported by draw.wine.

Prerequisites

• Node.js 18+
• npm 9+

Quick Start

1. Clone the repository.

git clone https://github.com/pandarudra/draw.wine.git
cd draw.wine

2. Install dependencies (recommended).

make install

Alternative manual install:

cd be && npm install
cd ../fe && npm install

3. Create backend environment file: be/.env

PORT=3000
NODE_ENV=development
FE_URL_DEV=http://localhost:5173
FE_URL_PROD=https://your-frontend-domain.com

# Optional: enable real email sending in production mode
RESEND_API_KEY=
RESEND_FROM_EMAIL=Draw Wine <onboarding@resend.dev>

# Required for AI generation endpoints
GEMINI_API_KEY=your_google_gemini_api_key_here

4. Optional frontend environment file: fe/.env

# If omitted, frontend uses http://localhost:3000 in development
VITE_ENV=prod
VITE_BE_URL=https://your-backend-domain.com

5. Start both apps.

make dev

Alternative manual start:

# Terminal 1
cd be
npm run dev

# Terminal 2
cd fe
npm run dev

6. Open the app:

• Frontend: http://localhost:5173

Scripts

Root (Makefile)

make install      # install frontend + backend dependencies
make dev          # run frontend and backend together
make build        # build frontend and backend
make lint         # lint frontend
make typecheck    # typecheck frontend and backend
make check        # lint + typecheck

Backend (be)

npm run dev       # nodemon + ts-node (src/app.ts)
npm run build     # compile TypeScript to dist/
npm run start     # run dist/app.js

Frontend (fe)

npm run dev
npm run build
npm run preview
npm run lint

API Overview

REST Endpoints

• POST /api/rooms/send-invitations: send invitation emails
• POST /api/ai/generate: generate drawing layout from prompt
• POST /api/ai/chat: chat endpoint for AI assistant features

Note: there is currently no /health endpoint in the backend.

Socket Collaboration (High Level)

• Room lifecycle: join and leave room
• Presence: collaborators and cursor updates
• Canvas sync: drawing element operations and laser pointer activity

Frontend Routes

• /: landing page
• /board/:id: drawing board
• /collab: collaborative room view

Runtime Notes

• Backend CORS allow-list is composed from FE_URL_DEV and FE_URL_PROD.
• Frontend API base URL defaults to http://localhost:3000 unless VITE_ENV=prod.
• Invitation emails are simulated in development mode and sent with Resend in production mode when configured.
• On small screens (<768px), the app currently renders a mobile fallback screen instead of the full board UI.

Documentation

Detailed notes are available in docs/:

• architecture.md
• canvas-interactions.md
• collaboration.md
• drawing-tools.md
• export-import.md
• pwa.md
• state-management.md

LLM & Aider

This repository provides a machine-readable context map for use with LLM tools (for example, Aider).

• Generate the repo context map (requires aider):

make create-map

• View LLM workflow help:

make llm-help

• The generated file repo-context.txt contains a structured summary of the project (folders, key files, APIs, and workflows) and is intended to be attached to LLM prompts or passed to tools like aider with --llm-context.

• Note: .aiderignore is now allowed in the repository (see .gitignore). To add your local .aiderignore to the repo:

git add .aiderignore
git commit -m "Add .aiderignore"
git push

Tech Stack

• Frontend: React 19, TypeScript, Vite, Tailwind CSS 4, Radix UI, Rough.js, Socket.IO client
• Backend: Express 5, Socket.IO, TypeScript, Helmet, CORS, compression, express-rate-limit, Resend, Google Generative AI SDK

Architecture Overview

The diagrams below show the high-level structure and flow of draw.wine.

High-Level Architecture

Detailed Architecture Flow

In short, the frontend handles drawing and collaboration UI, the backend manages rooms, permissions, and AI requests, and Redis keeps shared session state reliable across users.

Contributing

1. Create a feature branch.
2. Make and test your changes.
3. Open a pull request with a clear description.

License

ISC