Learn to build a comprehensive Trello clone application using modern web development technologies in this 6 hour 44 minute tutorial. Master the complete development process from initial setup to deployment, covering Next.js 15 for the frontend framework, Supabase for backend database management, and TailwindCSS for responsive styling. Implement user authentication and management through Clerk integration, create dynamic dashboards with multiple view modes, and build sophisticated drag-and-drop functionality for task management. Develop a complete project management system featuring board creation and editing, task cards with metadata including assignees and due dates, column management, and advanced filtering options. Configure Supabase with proper Row Level Security (RLS) policies and SQL setup, establish TypeScript models for type safety, and architect a robust service layer with custom hooks. Build responsive UI components using ShadCN, implement both grid and list view layouts for boards, and create interactive task cards with priority indicators. Set up comprehensive drag-and-drop functionality using DndContext with sortable tasks and live UI reordering. Add subscription-based features with free plan limitations, integrate Clerk's pricing table for payment processing, and implement upgrade dialogs to encourage premium subscriptions. Cover advanced topics including real-time state management, database schema design, authentication flows, and deployment considerations for a production-ready application.

Syllabus

00:00:00 | Introduction & Project Overview
00:06:00 | Next.js App Bootstrapping & Dev Server
00:20:00 | Installing Core Dependencies & UI Libraries
00:35:00 | ShadCN Setup & Generating Components
00:50:00 | Building the Navbar & Responsive Styles
01:05:00 | Clerk Authentication & Billing Integration
01:20:00 | Supabase Schema Design & Environment Setup
01:35:00 | RLS Policies & SQL Configuration
01:50:00 | TypeScript Models & Supabase Client Wiring
02:00:00 | Service Layer Architecture & Hooks Overview
02:00:05 | Building the “Total Boards” Card
02:10:00 | Styling Dashboard Cards & Icons
02:20:00 | Adding “Recent Activity” & “Active Projects” Cards
02:30:00 | Creating the Boards Section Header
02:40:00 | Implementing the Filter Options Container
02:50:00 | Grid/List Toggle Buttons
03:00:00 | Search Bar UI
03:10:00 | Rendering Boards in Grid Mode
03:20:00 | Styling Board Cards & “New Board” Tile
03:30:00 | Implementing List View Layout
03:40:00 | Setting Up the Board‑Detail Route & Navbar Props
03:50:00 | Board Page Header & “Edit Board” Dialog
03:59:55 | Finished Board Page Setup & State Management
04:00:03 | Implementing createTask & createRealTask functions
04:15:00 | Task service insertion & UI state update; debugging task creation
04:26:00 | Styling board layout & “Add New Task” dialog trigger
04:35:00 | Building TaskCard component markup title & description
04:50:00 | Adding task metadata: assignee, due‑date, priority color indicator
05:00:00 | Wiring per‑column “Add Card” button into Column component
05:05:00 | Setting up DnD: DndContext and droppable columns useDroppable
05:15:00 | Enabling sortable tasks: SortableContext & useSortable hooks
05:25:00 | Handling drag start & rendering DragOverlay
05:35:00 | handleDragOver for live UI reorder; handleDragEnd to persist via moveTask
05:45:00 | Adding “Add New Column” dialog & createColumn logic
05:55:00 | Implementing “Edit Column” dialog & updateColumn feature
06:05:00 | Task filtering UI: priority toggles & due‑date picker
06:15:00 | Dashboard filtering: board search & date‑range inputs
06:25:00 | Free‑plan limits & upgrade dialog guard on “Create Board”
06:35:00 | Pricing page with Clerk’s PricingTable & subscription flow
06:43:18 | Redirect after subscribe & final landing‑page sketch