Build a Real-Time Figma Clone: Next.js 15, React, Tailwind, Auth.js, Prisma (2024)
Source code: https://github.com/Andreaswt/figma-clone
Discord & More: https://andreastrolle.com
Hi 🤙 In this FREE 11 hour video you'll learn how to build a real-time Figma clone. You'll build features like real-time canvas updates, collaborative tools, advanced shape and text editing, and much more. We'll be using modern technologies such as Next.js 15, React 18, TypeScript and Liveblocks. You'll be able to build along with me from project setup to Vercel deployment.
Features:
🔄 Real-time canvas updates
👀 See others' cursors
🔗 Share rooms
🛠️ Property editor
📊 Dashboard
✏️ Shapes, drawings, and text
↩️ Undo and redo
🔀 Manage layer's z-indexes
🔑 Sign Up And In
🚀 Vercel Deployment
📊 Postgres Database
📖 Chapters
00:00:00 Demo
00:02:25 Setup
00:21:09 Create free database
00:24:38 Credentials auth
00:41:35 Signup page
01:07:40 Signin page
01:19:10 Middleware
01:25:54 Room page
01:31:00 TS Types
01:39:29 Liveblocks config
01:47:12 Liveblocks providers
01:54:58 Liveblocks auth endpoint
02:06:22 Liveblocks loading state
02:09:26 Canvas component
02:11:06 Canvas BG color
02:17:41 Layer insertion and rendering
03:41:06 Zooming
03:51:41 Dragging
03:58:48 Pencil drawing
04:42:19 Text element
05:01:10 Selecting and resizing layers
05:46:59 Translating
05:57:07 Hover state
06:03:09 Redo/undo
06:11:50 Selection net
06:46:28 Keyboard shortcuts
07:00:01 Right clicking layers
07:19:44 Left sidebar
07:50:40 Right sidebar
08:48:21 User avatar
08:57:25 Live cursors
09:13:18 Rooms in DB
09:18:10 Dashboard page
09:34:15 Create room
09:45:26 Rooms overview
10:25:37 Sharing rooms
11:02:14 Bugfixing
11:03:24 Deployment