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

This podcast episode provides an in-depth exploration of building a scalable web application using Next.js, ShadCNUI, and Convex, guiding listeners through crucial steps such as setting up routing, integrating authentication, implementing real-time collaboration features, and deploying to Vercel, ultimately showcasing how developers can leverage modern technologies to enhance user experience and streamline functionality with tools that promote scalability and efficiency.

Outlines

Sign in to continue reading, translating and more.

Continue

Code With Antonio

Introduction to Real-Time Collaborative Whiteboard Project

Setting Up Next.js and ShadCNUI

Understanding Next.js Routing Conventions

Setting Up Convex Database and Clerk Authentication

Adding Loading States and Authentication Indicators

Creating a Basic Layout for the Application

Implementing Organization Management Functionality

Adding Hints and Tooltips for User Guidance

Enhancing the Organization Sidebar and Navbar

Creating Empty States and a Basic Dashboard Page

Implementing Database Schema and Board Creation

Displaying Boards and Implementing Loading Skeletons

Adding Actions to Board Cards: Copy, Delete, and Rename

Implementing Favorite Boards Functionality

Enhancing the Navbar and Search Functionality

Connecting to Liveblocks for Real-Time Collaboration

Authenticating Users for Room Access

Building the Info Component and Displaying Board Details

Implementing Cursor Presence and User Avatars

Creating a Toolbar for Drawing Tools and Actions

Implementing Tool Selection and Canvas State Management

Rendering and Selecting Elements on the Canvas

Adding Selection Box and Resizing Functionality

Implementing Layer Translation and Deselection

Adding Selection Net and Layer Depth Control

Implementing Text and Sticky Note Elements

Implementing Pencil Drawing Functionality

Enhancing User Experience with Hooks and Shortcuts

Deploying the Application to Vercel

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

Code With Antonio

00:00Introduction to Real-Time Collaborative Whiteboard Project

Introduction to Real-Time Collaborative Whiteboard Project

03:38Setting Up Next.js and ShadCNUI

Setting Up Next.js and ShadCNUI

08:09Understanding Next.js Routing Conventions

Understanding Next.js Routing Conventions

30:42Setting Up Convex Database and Clerk Authentication

Setting Up Convex Database and Clerk Authentication

48:09Adding Loading States and Authentication Indicators

Adding Loading States and Authentication Indicators

56:52Creating a Basic Layout for the Application

Creating a Basic Layout for the Application

1:09:59Implementing Organization Management Functionality

Implementing Organization Management Functionality

1:29:09Adding Hints and Tooltips for User Guidance

Adding Hints and Tooltips for User Guidance

1:39:40Enhancing the Organization Sidebar and Navbar

Enhancing the Organization Sidebar and Navbar

1:50:05Creating Empty States and a Basic Dashboard Page

Creating Empty States and a Basic Dashboard Page

2:03:55Implementing Database Schema and Board Creation

Implementing Database Schema and Board Creation

2:23:23Displaying Boards and Implementing Loading Skeletons

Displaying Boards and Implementing Loading Skeletons

2:41:58Adding Actions to Board Cards: Copy, Delete, and Rename

Adding Actions to Board Cards: Copy, Delete, and Rename

3:14:39Implementing Favorite Boards Functionality

Implementing Favorite Boards Functionality

3:49:46Enhancing the Navbar and Search Functionality

Enhancing the Navbar and Search Functionality

4:19:02Connecting to Liveblocks for Real-Time Collaboration

Connecting to Liveblocks for Real-Time Collaboration

4:42:51Authenticating Users for Room Access

Authenticating Users for Room Access

5:00:14Building the Info Component and Displaying Board Details

Building the Info Component and Displaying Board Details

5:20:24Implementing Cursor Presence and User Avatars

Implementing Cursor Presence and User Avatars

5:49:47Creating a Toolbar for Drawing Tools and Actions

Creating a Toolbar for Drawing Tools and Actions

6:00:18Implementing Tool Selection and Canvas State Management

Implementing Tool Selection and Canvas State Management

6:21:53Rendering and Selecting Elements on the Canvas

Rendering and Selecting Elements on the Canvas

7:00:22Adding Selection Box and Resizing Functionality

Adding Selection Box and Resizing Functionality

8:00:00Implementing Layer Translation and Deselection

Implementing Layer Translation and Deselection

8:49:50Adding Selection Net and Layer Depth Control

Adding Selection Net and Layer Depth Control

9:11:53Implementing Text and Sticky Note Elements

Implementing Text and Sticky Note Elements

9:49:52Implementing Pencil Drawing Functionality

Implementing Pencil Drawing Functionality

10:10:03Enhancing User Experience with Hooks and Shortcuts

Enhancing User Experience with Hooks and Shortcuts

10:13:09Deploying the Application to Vercel

Deploying the Application to Vercel