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