Build a File Storage App with Role Based Authorization (Next.js, 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 https://github.com/webdevcody/file-drive 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: https://convex.dev/c/wdc 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: https://projectplannerai.com 🤖 IconGeneratorAI: https://icongeneratorai.com 📝 ThumbnailCritique: https://thumbnailcritique.com Useful Links 💬 Discord: / discord 🔔 Newsletter: https://newsletter.webdevcody.com/ 📁 GitHub: https://github.com/webdevcody 📺 Twitch: / webdevcody 🤖 Website: https://webdevcody.com 🐦 Twitter: / webdevcody

System Design Explained: APIs, Databases, Caching, CDNs, Load Balancing & Production Infra

Real-Time WebSockets Course | Build a Live Sports Dashboard with Node.js & PostgreSQL

Every React Concept Explained: The Core Mental Model

I FULLY Switched to Linux... but will I stay?

Tibetan Healing Sounds for Mind, Body & Soul | Relaxation, Sleep & Inner Peace

AWS Bedrock AgentCore: From Concept to Production (Full Deep Dive)

Next.js Tutorial 2026 (UPDATED) - Full Course - Start Your Next.js Journey Here

The PROBLEM with Capitalism - Smarter Every Day 316

No Boss, No Money: The Raw Reality of China’s Gen-Z Freelancers

TypeScript in Express – TypeScript Tutorial

REPAIRING MY VEYRON THEN TAKING IT BACK TO BUGATTI

Deep House Mix 2026 | Luxury Vocal House, Nu Disco & Sophisticated Groove Collection

Full Archon Guide - Build AI Coding Harnesses That Actually Ship (LIVE)

THE LIMIT OF MY VOLKSWAGEN | EP7

Jon Stewart on Trump's "Meritocracy" & Desi Lydic on MAGA Moving Iran Goalposts | The Daily Show

I Quit EVERY Modern Day Poison

Full Stack Ecommerce Store With Admin Dashboard From Scratch - Next.js, Prisma, Stripe, Tailwind

Lawrence Wilkerson: Iran-Krieg spitzt sich zur globalen Krise zu

Build and Deploy a Full Stack Video Conferencing App with Next JS

