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

⭐ī¸ Source Code & More: https://dub.sh/rOPR3sV
đŸ’Ŧ Discord & Help: https://www.codewithantonio.com/discord

Clerk: https://dub.sh/mz7fwfW
Convex: https://convex.dev/c/cwa
Liveblocks: https://liveblocks.io/
Logoipsum: https://logoipsum.com/
Sally 3D illustrations: https://www.figma.com/community/file/890095002328610853/saly-3d-illustration-pack

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 Next.js. 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
– 🌐 Next.js 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