Build and Deploy a Figma Clone with Real-Time Collaboration

Learn to build a Figma clone with advanced features including real-time collaboration, cursor chat, comments, reactions, and design creation using Fabric.js and Liveblocks. Master the implementation of live cursors, reactions, active user tracking, and canvas manipulation. Explore the development of toolbars, shape menus, and real-time features. Dive into history management, undo/redo functionality, image handling, and customizable sidebars. Implement dimension and text settings, color customization, PDF export capabilities, and a comment system. Enhance the user experience with a custom context menu and address free drawing and TypeScript type issues. Conclude by setting up developer tools and deploying the finished project.

- Intro
- Setup
- Liveblocks
- File Structure & Shadcn
- Live Cursors
- Reactions
- Active Users
- Sidebars
- Canvas
- Toolbar & Shapes Menu
- Real-Time Feature
- History Feature
- Undo & Redo
- Images
- Right Sidebar
- Dimensions Settings
- Text Settings
- Color Settings
- Export to PDF
- Comments Bubble
- Custom Context Menu
- Free Drawing Fix
- TypeScript Types Fix
- Dev Tool
- Deployment