🎨 SleekDraw

A virtual hand-drawn style collaborative whiteboard. E2EE and responsive.

🌐 Try Live App

Features | Tech Stack | Local Development | Docker Setup

Create beautiful hand-drawn styled mockups, arrows, rectangles, freehand drawings, and diagrams.

---

✨ Features

SleekDraw is packed with tools for creators, designers, and teams:

• 🎨 Hand-Drawn Aesthetics: Uses Rough.js to draw beautiful, sketchy shapes, lines, arrows, rectangles, ellipses, and pencil paths.
• 🔒 End-to-End Encrypted (E2EE) Collaboration: Real-time whiteboard room syncing over Socket.io. Canvas data is encrypted directly in the client using Web Crypto APIs. The server only relays encrypted blobs—the key resides exclusively in the URL hash and never touches the server.
• 🚀 High-Performance Culling: Runs coordinate-bounding culling bounds checks. Caching the elements bounds shifts drawing culling and outlines computation from $O(N)$ to $O(1)$, keeping canvas rendering smooth.
• 🗃️ Excalidraw Shape Library Integration: Seamlessly browse the entire community Excalidraw libraries catalog from GitHub, download shape collections, and insert/auto-scale template components directly onto your canvas.
• 🔄 Local Undo/Redo Stack: Full canvas state history management with robust undo and redo buffers.
• 🔍 Cursor-Centered Panning Zoom: Grab canvas Panning using Spacebar + mouse drag, and zoom in/out relative to your cursor using Ctrl + Mouse Wheel Scroll.
• 📁 Vector Graphics Exporters: Export drawings natively to clean vector SVGs or high-definition PNGs.
• 🌓 Glassmorphic UI Themes: Dark and Light interface layouts featuring Harmonious HSL colors.

---

🛠️ Tech Stack

• Frontend: React 19, TypeScript, Vite, TailwindCSS (for CSS styling layouts), Rough.js (hand-drawn rendering)
• Icons & Fonts: Lucide React, Outfit (Google Font)
• Backend: Node.js, Express, Socket.io (real-time communication)
• Encryption: Web Crypto API (AES-GCM encryption)

---

💻 Local Development

1. Prerequisite

Ensure you have Node.js installed.

2. Frontend Development

Run the React + Vite dev server locally:

# Install root dependencies
npm install

# Run Vite dev server
npm run dev

3. Backend Development

Run the Socket.io relay server locally:

# Navigate to server directory
cd server

# Install dependencies
npm install

# Run the relay server
npm start

The server will boot on http://localhost:4000.

---

🐳 VPS Docker Deployment

The project includes a ready-to-use Docker configuration to deploy the Socket.io relay backend on your VPS.

Launch via Docker Compose

Build and run the backend container in detached mode on port 4000:

docker compose up -d --build

Docker Services structure:

• backend: Runs Node.js alpine container.
• Port mapping: 4000:4000

---

🚀 Production Deployment

🌐 Live URLs

• Frontend App: https://sleek-draw.vercel.app
• Backend API (Relay Server): https://sleekdraw.duckdns.org

🖥️ VPS Infrastructure (Backend)

The backend is hosted on your DigitalOcean VPS (139.59.69.207) configured as follows:

• Application: Dockerized Node.js relay server running on port 4000.
• Process Management: Runs inside Docker Compose with automatic restarts.
• Subdomain: Routed through sleekdraw.duckdns.org using Duck DNS.
• Reverse Proxy: Nginx configured with WebSocket support (proxy_set_header Upgrade $http_upgrade;).
• SSL Certificate: Secured with Let's Encrypt TLS/SSL using Certbot (auto-renewing).

⚡ Frontend Deployment

• Automatically deployed to Vercel via .github/workflows/vercel-deploy.yml upon pushes to the main branch.
• Configured with the VITE_BACKEND_URL environment variable pointing to https://sleekdraw.duckdns.org.