AI, Data Science & Business Certificates from Google, IBM & Microsoft
MIT Sloan AI Adoption: Build a Playbook That Drives Real Business ROI
Overview
Google, IBM & Meta Certificates — All 10,000+ Courses at 40% Off
One annual plan covers every course and certificate on Coursera. 40% off for a limited time.
Get Full Access
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.
Syllabus
- 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
Taught by
JavaScript Mastery