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

Web Dev Cody
Web Dev Cody
147,543
0
Published 2024-02-28
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 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: convex.dev/c/wdc
Be sure to checkout Clerk here: 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: projectplannerai.com/
🤖 IconGeneratorAI: icongeneratorai.com/
📝 ThumbnailCritique: thumbnailcritique.com/

Useful Links
💬 Discord: discord.gg/4kGbBaa
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: www.twitch.tv/webdevcody
🤖 Website: webdevcody.com/
🐦 Twitter: twitter.com/webdevcody
All Comments (21)
  • @wafiqhosain5713
    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
  • @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
  • @JH-bb8in
    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 :popcorn-yellow-striped-smile:
  • @eshw23
    Fire, fire, absolute fire!!!
  • @abedaarabi3014
    Great job! 🎉 It would be great if you could take the tutorial to the next level by implementing vector storage, which Convex supports.
  • @Steel0079
    FCC released serverless course, and you released this, now I gotta learn it all. Love you man for your generosity
  • @kartikvishwakarma7567
    Wouldn't it be great that you build the authentication system by your own without using CLERK, that would have been awesome, real learning for us.
  • @Offiziersmesser
    More of this. More of the usual. More of web dev cody !!!!!
  • @alpha8533
    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 😅
  • @insensibility
    That's it! The GOAT with code along video! Keep up!
  • @martapfahl940
    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.