Build a Fullstack Trello App with NextJS 15, Supabase, TailwindCSS, Drag & Drop

Video Description

Build a Beautiful Trello Clone with Authentication, User Management, Dashboards, Drag and Drop, and Payments... 📖 Video Resources: Clerk: https://go.clerk.com/TFWZCy5 Supabase: http://supabase.com/ Code Repo: https://www.webdevultra.com/video-info/ugxI1o5SyMs ⭐️ Check out My ReactJS Course: https://www.webdevultra.com/react 💻 Check out my Blog: https://www.pedrotech.co 🐤 Follow me on Twitter: (https://twitter.com/pedrotech_) 📸 Follow me on Instagram: (https://www.instagram.com/pedro.fmachado_/) 🧳 Follow me on Linkedin: (https://www.linkedin.com/company/pedrotech) 👨‍💻 GitHub: https://github.com/machadop1407 📋 Business Email: [email protected] Timestamps: 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