Build a File Storage App with Role Based Authorization (, Shadcn, Typescript)

This might be my longest tutorial to date. We will be building a full stack file storage application with organizations, file upload, management, role based authorization. authentication, cron deletes, favorites, trash feature, including many UI components including dialogs, modals, toasts, dropdown, etc. Link to repo Note: in the video at 46:01, you can import a library directly from clerk instead of the clerk-sdk-node library like so import type { WebhookEvent } from “@clerk/nextjs/server“ Be sure to checkout Convex here: Be sure to checkout Clerk here: 00:00:00 Overview 00:04:55 Next Convex Setup 00:08:15 Clerk Setup 00:11:48 ShadCN 00:13:40 Clerk Components 00:16:35 First Convex Mutation 00:20:27 Convex Query 00:23:54 Auth in Convex 00:25:55 Header 00:31:03 Scope Files using OrgId 00:42:17 Clerk Webhooks 01:02:45 OrgId Authorization 01:12:55 File Upload Dialog 01:29:18 Toast Component 01:36:01 Button Loader 01:39:09 Styling Homepage 01:44:20 Delete File Dropdown 01:54:50 Empty States 02:00:26 Page Spinner 02:03:12 File Types 02:17:30 Download Button 02:18:21 Search Bar 02:29:55 Side Nav 02:33:57 Refactor Layout 02:38:56 Active Link Style 02:41:27 File Browser 02:43:43 Mark as Favorite 02:54:31 Favorites Page 03:00:21 Favorite Star 03:12:33 Role Based Authorization 03:27:02 Delete Cron 03:32:09 Restore Item 03:39:22 Upload User 03:54:06 Minor Tweaks 03:58:39 Table 04:11:28 View Toggle 04:22:44 Personal Account Bug 04:29:44 Footer & Landing Page This video was sponsored by Convex and Clerk. My Products 📖 ProjectPlannerAI: 🤖 IconGeneratorAI: 📝 ThumbnailCritique: Useful Links 💬 Discord: 🔔 Newsletter: 📁 GitHub: 📺 Twitch: 🤖 Website: 🐦 Twitter: