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 15 developer in only one course: https://jsmastery.pro/next15
Limited-time FREE 218-page Ultimate Next.js eBook - https://resource.jsmastery.pro/nextjs-ebook
Materials/References:
GitHub Repository (give it a star ): https://github.com/adrianhajdin/figma_clone
README (assets & code): https://github.com/adrianhajdin/figma_clone/blob/main/README.md
Join our Discord Community - https://discord.gg/n6EdbFJ
Follow us on Twitter: https://twitter.com/jsmasterypro
Follow us on Instagram: https://instagram.com/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