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.

Note: in the video at 46:01, you can import a library directly from clerk instead of the clerk-sdk-node library like so

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

Useful Links

[WebDevCody]

After making this tutorial, it came to my attention that I used the incorrect way for showing the images and this can cause an error stating you need to use a uuid to access storage entries.

[wafiqhosain]

You've also entered into to the "Project making" arena. Cool, atleast some production like coding practice can be learnt.

[samincgs]

Learning so much from you Cody thank you very much, please keep using convex! much love from Canada

[kamertonaudiophileplayer]

It looks like a cool application. Thank you for sharing with us your effort.

[martinfolk]

I like the way you are presenting. Thank youso much.

[DenisEneotescu]

one or two a month like this would be insane

[mahendranath]

Wow, Nice thank you so much for sharing the knowledge

[insensibility]

That's it! The GOAT with code along video! Keep up!

[NickHamilton]

Next level content and code! Good work

[martapfahl]

Awesome tutorial thank you! I think as a next step I will try to build this in Angular as well to strengthen my Angular skills.

[Offiziersmesser]

More of this. More of the usual. More of web dev cody

[bjrjrvk]

I love your content! Thank you so much

[CodeSnap]

wonderfull project. thankyou for sharing

[Steel]

FCC released serverless course, and you released this, now I gotta learn it all. Love you man for your generosity

[abedaarabi]

Great job! 🎉 It would be great if you could take the tutorial to the next level by implementing vector storage, which Convex supports.

[JH-bbin]

Sidenote: Don't use Clerk. 1) they use dark patterns to prevent you from cancelling & migrating data later (I got burnt recently) 2) their UI elements have subtle bugs that create hydration / refresh issues

[codinginflow]

Thank you I will watch this tonight on the couch

[alpha]

Wonderful video! I'm trying to re-create it with extra features like malware detection, adult-content detection and darkmode...also got these ideas from comment section 😅

[lxxfgcp]

Glad to be here Cody. As I learn from your videos, do you have plans to do a dedicated video on Convex at any point in the future? Keep up the great work 🙂

[abdirahmann]

add malware scanning, adult/cp content detection and also a summary of what files might be related to the current open file, This will really ramp up the value of this project from being a relatively "bare bones" crud to MADNESS