Build a Real-Time Miro Clone With Nextjs, React, Tailwind (2024)

⭐️ Source Code & More: 💬 Discord & Help: Clerk: Convex: Liveblocks: Logoipsum: Sally 3D illustrations: In this 10 hour tutorial, you will learn how to create your very own Miro clone - A collaborative, real-time whiteboard. Packed with features such as real-time database, whiteboard from scratch with ability to add shapes like Rectangles and Ellipses, Sticky notes and Pencil drawing. Using the newest technologies such as . 14, Clerk, Convex and LiveBlocks. Key Features: - 🛠️ Whiteboard from scratch - 🧰 Toolbar with Text, Shapes, Sticky Notes & Pencil - 🪄 Layering functionality - 🎨 Coloring system - ↩️ Undo & Redo functionality - ⌨️ Keyboard shortcuts - 🤝 Real-time collaboration - 💾 Real-time database - 🔐 Auth, organisations and invites - ⭐️ Favoriting functionality - 🌐 14 framework - 💅 TailwindCSS & ShadcnUI styling Timestamps 00:00 Intro & Demo 03:42 Additional information 04:07 Project setup 12:33 Project structure 30:41 Convex & Clerk 56:51 Dashboard layout 01:10:25 Sidebar 01:35:01 Organization Sidebar 01:49:49 Navbar 02:04:04 Empty States 02:23:22 Create Mutation 02:41:57 Board List 03:14:28 Card Actions 03:55:36 Favoriting Functionality 04:18:12 Search Querying 04:31:52 Canvas Layout 04:42:50 Liveblocks setup 05:00:13 Room Authentication 05:19:44 Room Info 05:36:23 Room Participants 05:49:46 Room Toolbar 05:56:45 Canvas State 06:22:01 Cursors Presence 06:47:41 Insert Layer 07:20:07 Select Layer 07:36:02 Selection Box 07:59:34 Resize Layer 08:17:52 Translate Layer 08:31:29 Color change & Deletion 08:50:09 Layer Depth 08:56:46 Selection Net 09:11:53 Other Elements 09:32:51 Pencil & Drawing 10:13:02 Deployment