Excalidraw Clone - Real-Time Collaborative Whiteboard

Live Demo | Video Demo

🎯 Project Overview

A production-grade clone of Excalidraw featuring real-time collaboration, infinite canvas, and persistent state. Built to demonstrate mastery of real-time systems, complex state management, and modern web architecture.

✨ Key Features

• ✅ Real-time collaboration (multiple users editing simultaneously)
• ✅ Infinite canvas with pan/zoom
• ✅ Drawing tools: rectangle, circle, line, arrow, text
• ✅ User authentication (with sign-in page)
• ✅ Persistent storage (saves your work)
• ✅ Undo/redo functionality
• ✅ Export to PNG/SVG
• ✅ Responsive design (works on mobile/tablet)

🛠 Tech Stack

Frontend:

• Next.js 14 (App Router)
• TypeScript
• TailwindCSS
• WebSockets (for real-time sync)
• Express

Backend:

• [Your backend tech - Node/Express? Next.js API routes?]
• [Your database - Neon? Supabase?]
• [Real-time: Socket.io? Pusher? Ably?]

Infrastructure:

• Vercel (deployment)
• Turborepo (monorepo management)

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm/pnpm/yarn

📝 Lessons Learned

• Real-time systems need careful state reconciliation strategies
• Canvas optimization is critical for smooth UX at scale
• Monorepo structure (Turborepo) simplifies shared code management
• WebSocket connection handling requires robust error recovery

⭐ If this helped you learn, please star the repo!