Загрузка страницы

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_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: contact@jsmastery.pro

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

Видео Build and Deploy a Figma Clone канала JavaScript Mastery
Показать
Комментарии отсутствуют
Введите заголовок:

Введите адрес ссылки:

Введите адрес видео с YouTube:

Зарегистрируйтесь или войдите с
Информация о видео
2 февраля 2024 г. 16:00:06
04:04:53
Другие видео канала
Build and Deploy a Full Stack AI SaaS Platform with Next js 14, TypeScript, StripeBuild and Deploy a Full Stack AI SaaS Platform with Next js 14, TypeScript, StripeBuild and Deploy a React Admin Dashboard With Real time Data, Charts, Events, Kanban, CRM, and MoreBuild and Deploy a React Admin Dashboard With Real time Data, Charts, Events, Kanban, CRM, and MoreLearn Docker in 1 Hour | Full Docker Course for BeginnersLearn Docker in 1 Hour | Full Docker Course for BeginnersBuild and Deploy a Full Stack Next 14 MERN Events App with Stripe, Typescript, TailwindBuild and Deploy a Full Stack Next 14 MERN Events App with Stripe, Typescript, TailwindBuild and Deploy a Full Stack E-Commerce App with an Admin Dashboard & CMS in 2024 | Next 14, StripeBuild and Deploy a Full Stack E-Commerce App with an Admin Dashboard & CMS in 2024 | Next 14, StripeBuild Modern Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion AnimationsBuild Modern Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion AnimationsBuild an Impressive 3D Portfolio Website with No 3D Experience! | JSM Black Friday SpecialBuild an Impressive 3D Portfolio Website with No 3D Experience! | JSM Black Friday SpecialBuild and Deploy an Amazing 3D Developer Portfolio in React with Three.jsBuild and Deploy an Amazing 3D Developer Portfolio in React with Three.jsBuild and Deploy a Full Stack Social Media App | React JS, Appwrite, Tailwind CSS, React QueryBuild and Deploy a Full Stack Social Media App | React JS, Appwrite, Tailwind CSS, React QueryBuild and Deploy a Fully Responsive Modern UI/UX Website | React.js, Next.js 13, Tailwind CSSBuild and Deploy a Fully Responsive Modern UI/UX Website | React.js, Next.js 13, Tailwind CSSWeb Scraping Full Course 2024 | Build and Deploy eCommerce Price TrackerWeb Scraping Full Course 2024 | Build and Deploy eCommerce Price TrackerHow I Made My Website Load in 0.364 SecondsHow I Made My Website Load in 0.364 SecondsNext.js isn't ReactNext.js isn't ReactBuild and Deploy 3 Modern API Applications in 7 Hours - Full CourseBuild and Deploy 3 Modern API Applications in 7 Hours - Full CourseTailwind CSS Full Course 2023 | Build and Deploy a Nike WebsiteTailwind CSS Full Course 2023 | Build and Deploy a Nike WebsiteBuild and Deploy a Full Stack MERN Next.js 14 Threads App | React, Next JS, TypeScript, MongoDBBuild and Deploy a Full Stack MERN Next.js 14 Threads App | React, Next JS, TypeScript, MongoDBTransforming a Design into a Fully Responsive App in an HourTransforming a Design into a Fully Responsive App in an Hour10-Hour Masterclass: Develop 4 React Web Apps & Jumpstart Your Dev Career10-Hour Masterclass: Develop 4 React Web Apps & Jumpstart Your Dev CareerBuild and Deploy a Full Stack Next.js 14 Application | React, Next JS 14, TypeScript, Tailwind CSSBuild and Deploy a Full Stack Next.js 14 Application | React, Next JS 14, TypeScript, Tailwind CSSBuild and Deploy a Modern Next.js 14 Application | React, Next JS 14, TypeScript, Tailwind CSSBuild and Deploy a Modern Next.js 14 Application | React, Next JS 14, TypeScript, Tailwind CSS
Яндекс.Метрика