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: [ Ссылка ]

свернуть