Completed
02:40:00 | Implementing the Filter Options Container
Class Central Classrooms beta
YouTube videos curated by Class Central.
Classroom Contents
Build a Fullstack Trello App with NextJS 15, Supabase, TailwindCSS, Drag and Drop
Automatically move to the next video in the Classroom when playback concludes
- 1 00:00:00 | Introduction & Project Overview
- 2 00:06:00 | Next.js App Bootstrapping & Dev Server
- 3 00:20:00 | Installing Core Dependencies & UI Libraries
- 4 00:35:00 | ShadCN Setup & Generating Components
- 5 00:50:00 | Building the Navbar & Responsive Styles
- 6 01:05:00 | Clerk Authentication & Billing Integration
- 7 01:20:00 | Supabase Schema Design & Environment Setup
- 8 01:35:00 | RLS Policies & SQL Configuration
- 9 01:50:00 | TypeScript Models & Supabase Client Wiring
- 10 02:00:00 | Service Layer Architecture & Hooks Overview
- 11 02:00:05 | Building the “Total Boards” Card
- 12 02:10:00 | Styling Dashboard Cards & Icons
- 13 02:20:00 | Adding “Recent Activity” & “Active Projects” Cards
- 14 02:30:00 | Creating the Boards Section Header
- 15 02:40:00 | Implementing the Filter Options Container
- 16 02:50:00 | Grid/List Toggle Buttons
- 17 03:00:00 | Search Bar UI
- 18 03:10:00 | Rendering Boards in Grid Mode
- 19 03:20:00 | Styling Board Cards & “New Board” Tile
- 20 03:30:00 | Implementing List View Layout
- 21 03:40:00 | Setting Up the Board‑Detail Route & Navbar Props
- 22 03:50:00 | Board Page Header & “Edit Board” Dialog
- 23 03:59:55 | Finished Board Page Setup & State Management
- 24 04:00:03 | Implementing createTask & createRealTask functions
- 25 04:15:00 | Task service insertion & UI state update; debugging task creation
- 26 04:26:00 | Styling board layout & “Add New Task” dialog trigger
- 27 04:35:00 | Building TaskCard component markup title & description
- 28 04:50:00 | Adding task metadata: assignee, due‑date, priority color indicator
- 29 05:00:00 | Wiring per‑column “Add Card” button into Column component
- 30 05:05:00 | Setting up DnD: DndContext and droppable columns useDroppable
- 31 05:15:00 | Enabling sortable tasks: SortableContext & useSortable hooks
- 32 05:25:00 | Handling drag start & rendering DragOverlay
- 33 05:35:00 | handleDragOver for live UI reorder; handleDragEnd to persist via moveTask
- 34 05:45:00 | Adding “Add New Column” dialog & createColumn logic
- 35 05:55:00 | Implementing “Edit Column” dialog & updateColumn feature
- 36 06:05:00 | Task filtering UI: priority toggles & due‑date picker
- 37 06:15:00 | Dashboard filtering: board search & date‑range inputs
- 38 06:25:00 | Free‑plan limits & upgrade dialog guard on “Create Board”
- 39 06:35:00 | Pricing page with Clerk’s PricingTable & subscription flow
- 40 06:43:18 | Redirect after subscribe & final landing‑page sketch
