🎨 SyncCanvas — Real-Time Collaborative Infinite Whiteboard & Vector Engine

SyncCanvas is an interactive, real-time collaborative infinite whiteboard with live multi-cursor presence, vector shape drawing, spatial pan-zoom viewport matrix transformation, and optimistic local state synchronization.

---

⚡ Key Features

• Infinite Vector Canvas: Freeform coordinate plane with smooth pan and zoom transforms ($10% - 500%$) leveraging 2D affine matrix rendering.
• Multiplayer Cursor Presence: Real-time simulated peer cursor tracking with participant name tags, active selection bounding boxes, and color identity.
• Vector Primitive Creation:
  • ✏️ Smooth freehand stylus/pen drawing with cubic bezier curve simplification.
  • 📐 Parametric shapes: Rectangles, Ellipses, Arrows, Diamonds, and Sticky Notes.
  • 🔤 Rich typography text nodes and markdown cards.
• Optimistic State Updates & History: Local undo/redo transaction stack (Ctrl+Z / Ctrl+Y) with non-destructive shape transformation.
• Export & Serialization: High-DPI PNG and vector SVG export, plus JSON scene serialization.

---

🛠️ Architecture & Tech Stack

• Frontend: React 19, TypeScript, Tailwind CSS, Lucide React Icons.
• Spatial Engine: Custom 2D Viewport Transform Matrix (worldToScreen & screenToWorld coordinate projection).
• State Management: React Canvas Context with batch update throttling.
• Build & Quality: Vite 6, Oxlint.

---

🚀 Getting Started

# Clone the repository
git clone https://github.com/freshstart2066-create/synccanvas.git
cd synccanvas

# Install dependencies
npm install

# Launch dev server
npm run dev

---

📄 License

Licensed under the Apache License, Version 2.0.