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/filedrive'>https://github.com/webdevcody/filedrive

Note: in the video at 46:01, you can import a library directly from clerk instead of the clerksdknode 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: https://dub.sh/A2JQT7h

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