Build and Deploy a Figma Clone

Build a Figma clone with real-world features like live collaboration through cursor chat, comments, reactions, and drawing designs (shapes, image upload) on the canvas using Next.js 14, Fabric.js, and Liveblocks.

⭐ Liveblocks: https://liveblocks.io

🌟 Become a top 1% Next.js 14 developer in only one course: https://jsmastery.pro/next14

📚 Materials/References:
GitHub Repository (give it a star ⭐): https://github.com/adrianhajdin/figma...
README (assets & code): https://github.com/adrianhajdin/figma...

💻 Join our Discord Community -   / discord  
🐦 Follow us on Twitter:   / jsmasterypro  
🖼️ Follow us on Instagram:   / javascriptmastery  

💼 Business Inquiries: [email protected]

Time Stamps 👇
00:00:00 - Intro
00:04:39 - Setup
00:09:13 - Liveblocks
00:16:07 - File Structure & Shadcn
00:25:17 - Live Cursors
01:03:46 - Reactions
01:27:46 - Active Users
01:47:00 - Sidebars
01:49:37 - Canvas
01:58:03 - Toolbar & Shapes Menu
02:08:09 - Real-Time Feature
02:33:03 - History Feature
02:35:00 - Undo & Redo
02:41:42 - Images
02:48:23 - Right Sidebar
02:59:46 - Dimensions Settings
03:07:48 - Text Settings
03:10:15 - Color Settings
03:13:49 - Export to PDF
03:16:16 - Comments Bubble
03:38:47 - Custom Context Menu
03:48:17 - Free Drawing Fix
03:50:38 - TypeScript Types Fix
03:54:04 - Dev Tool
03:55:47 - Deployment