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. Instead of pointing to the /api/storage/:id endpoint, you should be using an action with ctx.storage.get method outline in this documentation: docs.convex.dev/file-storage/serve-files. The updated commit can be here: github.com/webdevcody/file-drive/commit/0e31fcd44134d65ab95d4de95f3454f1383871b0
@wafiqhosain57135 ай бұрын
You've also entered into to the "Project making" arena. Cool, atleast some production like coding practice can be learnt.
@JH-bb8in5 ай бұрын
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
@daphenomenalz41005 ай бұрын
Also, you have to setup webhooks. I don't want to do that extra work lmao, just use next auth and make fast ui with Chadcn
@johnpaulpineda24765 ай бұрын
NextAuth > Kinde > Clerk
@naylord55 ай бұрын
@@johnpaulpineda2476Amen to that
@user-qq7yc1qp8z5 ай бұрын
@@johnpaulpineda2476I’ve been using firebase auth for all my personal projects for 5 years, so would recommend
@tastyapplesauce16175 ай бұрын
@@johnpaulpineda2476 lucia a good option too
@abdirahmann5 ай бұрын
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
@WebDevCody5 ай бұрын
cool add on suggestions for sure!
@raymondmichael49875 ай бұрын
Such cool add-on
@raymondmichael49875 ай бұрын
@@WebDevCody, hopeful you can cover it brother :)😉
@samincgs2 ай бұрын
Learning so much from you Cody thank you very much, please keep using convex! much love from Canada
@codinginflow5 ай бұрын
Thank you I will watch this tonight on the couch
@WebDevCody5 ай бұрын
feel free to give feedback
@eshw235 ай бұрын
Fire, fire, absolute fire!!!
@DenisEneotescu5 ай бұрын
one or two a month like this would be insane
@Steel00795 ай бұрын
FCC released serverless course, and you released this, now I gotta learn it all. Love you man for your generosity
@animeshbiswas29055 ай бұрын
FCC????
@Steel00795 ай бұрын
@@animeshbiswas2905 freecodecamp yt channel
@mrmadhan85575 ай бұрын
@@animeshbiswas2905 free code camp
@rog00795 ай бұрын
@@animeshbiswas2905 FreeCodeCamp i guess...
@maazmunir92135 ай бұрын
@@animeshbiswas2905 freecodecamp
@Offiziersmesser5 ай бұрын
More of this. More of the usual. More of web dev cody !!!!!
@abedaarabi3014Ай бұрын
Great job! 🎉 It would be great if you could take the tutorial to the next level by implementing vector storage, which Convex supports.
@insensibility5 ай бұрын
That's it! The GOAT with code along video! Keep up!
@NickHamilton885 ай бұрын
Next level content and code! Good work
@alpha85335 ай бұрын
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 😅
@martinfolk38655 ай бұрын
I like the way you are presenting. Thank youso much.
@kamertonaudiophileplayer8475 ай бұрын
It looks like a cool application. Thank you for sharing with us your effort.
@mahendranath25045 ай бұрын
Wow, Nice thank you so much for sharing the knowledge
@martapfahl9405 ай бұрын
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.
@itsyourboyt46835 ай бұрын
Nice Job Cody
@user-bj1rj4rv3kАй бұрын
I love your content! Thank you so much
@kevinz19915 ай бұрын
THANK YOU CODY AS ALWAYS 🎉👌
@SeibertSwirl5 ай бұрын
Good job babe!!!!
@XinyuYuan5 ай бұрын
pay attention to 58:14, the dynamic return data fixing caused me an half hour to figure out
@user-lx9xf2gc7p5 ай бұрын
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 🙂
@WebDevCody5 ай бұрын
I have a couple of convex tutorials on my channel
@Mirislomovmirjalol5 ай бұрын
I dont really wanna use Baas services such as supabase or convex. It would be very interesting for me, if you could make a video about full stack development without BAAS and less third party platforms
@kalilbarry37735 ай бұрын
why not Supabase, you can host it yourself anywhere you want
@IvanRandomDude5 ай бұрын
That's too hard. And also no sponsor money.
@WebDevCody5 ай бұрын
you can always use next.js, find a postgres database host, and use next-auth. the moment you need email logins, password reset, forgot password flow, you'll kind of wish you just used a third party auth service.
@patolorde5 ай бұрын
Awesome, great project
@Hex095 ай бұрын
Shadcn/UI is a wonderful storage that people come and take away the components they want. But there are stuff we can't, input mask, phone input, date picker (with allowing typing), multi select, ...
@bogdant.859915 күн бұрын
4:14:00 just making notes to know when to return for something really nice
@Andini-xq8smАй бұрын
Thanks! I learned a lot.
@CodeSnap015 ай бұрын
wonderfull project. thankyou for sharing
@MrTeferiZ11 күн бұрын
Cody, you should make another video cloning Google drive, file sharing, downloading with more capabilities if possible AI related
@Shamsshah15 ай бұрын
Brother, it's amazing and I am thankful to you for sharing such helpful videos. I have one wish: can you create a full-stack college website?
@Yahya_Umar5 ай бұрын
That's good thanks for sharing your experience with us can you please create a inventory management system using Next.js. Your tutorials are always top-notch.
@WebDevCody5 ай бұрын
What type of inventory? Like grocery store?
@Yahya_Umar5 ай бұрын
@@WebDevCody stock register for a university or and add a also adjustment of new items and grocery stores also same idea. Can you do that please sir.
@bnssoftware32924 ай бұрын
WOW subscribed
@vinialves123625 ай бұрын
0:35 you haven't clicked Dismiss, me too, I won't click that button
@zainwasem5 ай бұрын
Love it ❤ How you stay motivated for coding?
@PeriklesPeriklesoglu5 ай бұрын
thanks for all of this, i have a question: Do I need to pay money to DB or any other service for this project when i deployed?
@jlsonline3 ай бұрын
Trying to follow along using Clerk core 2 ... they have a new middleware using clerkMiddleware() instead of authMiddleware() ... so confusing now.
@WebDevCody3 ай бұрын
I have a new tutorial coming soon using core 2
@jlsonline3 ай бұрын
@@WebDevCody That would be awesome especially if you tie Clerk multitenancy with Convex because nobody else has anything useful
@thespiritualjourney3695 ай бұрын
love this type of videos.u didn't added dark mode?
@WebDevCody5 ай бұрын
nah, but it takes like 5 minutes to wrap your app in a dark mode provider
@hassaantahir38615 ай бұрын
Broooo plzzz create a Production grade e-commerce app(not like the current KZfaq ones :)) a single vendor app. You can make a landing page to showcase 3- models of the main stream items of the store. To make it more in quality and unique you can add a 3d Model of every product along with the normal images and the main challenge will be then optimizing it. With roles(user and admin which will be the store owner), full fledged admin panel having inventory, and other business functionalities, Beautiful UI, review system, tracking system, Product recommendations, full fledged search, COD and online payment gateways 2-3, product page with detailed product descriptions with images etc and similar products. An e-commerce app that the internet has never seen before. :))
@chrisalonzo12525 ай бұрын
Is there a way you can show us how to deploy this project? or if anyone in here has successfully deployed it in Vercel, because I'm having a difficult time deploying it and I keep getting an error on the webhook.
@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.
@Cyber-Bison5 ай бұрын
Really enjoyed this video thanks Cody. I have a question though as to why you stored the orgIds with both the orgId and role as an object on the users table? What if we wanted to query for users by an orgId with the role of admin, I'm not sure if Convex supports this type of nested filtering? But I would have thought to have a separate Orgs table alongside an userOrgRoles table, and remove the role from the users table and only storing the orgIds of which they belong to, or simply just the userOrg tables. Not sure if this makes any sense lol just a thought/issue Im facing myself
@WebDevCody5 ай бұрын
I think I was more of showing how convex support json like data structures. A separate table would also be fine, it would just require an additional query for all auth checks since we have to first get the user, then get the org table. Org table is probably more scalable
@Cyber-Bison5 ай бұрын
@@WebDevCody gotchya, i figured you were just prototyping quickly. Eitherway this video helped me a ton, your explanations simplified the process for me. Thanks again
@turunguse49085 ай бұрын
Uploading file is generating error
@nikako18895 ай бұрын
why should we chose traditional backend instead of Convex?
@viditshah88405 ай бұрын
Love your tutorilas would love to know how you create such beautiful thumbnails?
@raymondmichael49875 ай бұрын
Hi Cody, can you create even a simple tutorial to use Authjs (next-auth version 5) with convex, using different providers, like credentials, github, google, discord, etc. I saw your repo you used google exclusively. I find it hard to figure out how to configure different providers apart from auth0 and clerk, in auth.config. Thanks buddy
@raymondmichael49875 ай бұрын
Hello there, I spend the last four days binge watching your videos; consider in this video, how can we protect someone to access or view the uploaded files outside the application? I found out that if you put the file url in a browser it loads the file just fine, how to prevent that? Before I was using Edgestore, they broke file access outside the application, which is good to my opinions; But your video made me switch to convex, because it's easier to manage files. Thanks buddy :)
@WebDevCody5 ай бұрын
The id of the image is mathematically impossible to brute force, but yes I think the url is all public so you need to make sure to not accidentally leak image ids or anything like that.
@raymondmichael49875 ай бұрын
@@WebDevCody thanks buddy
@NiharGandhi4 ай бұрын
@WebDevCody, Amazing tutorial. Loved it. I have a doubt about how do I let the user upload a file type other then the once we specified.
@user-zw2ik5iw7fАй бұрын
Why do you look like Andrew Garfield ? btw very informative project , loved it
@WebDevCodyАй бұрын
He looks like me
@Applecitylightkiwi5 ай бұрын
Congrats
@MohammadRaiyanShaikh5 ай бұрын
Awesome video sir🤩, can you please also make RBAC with zitadel ?
@eleah26655 ай бұрын
Wow. Thanks.
@starlord75265 ай бұрын
Mate I couldn't understand a thing for the whole Clerk Webhooks part. Can I skip it and still go through rest of the video?
@WebDevCody5 ай бұрын
Yeah just copy the code from my repo and try to understand it later.
@thebar60955 ай бұрын
Can you make a tutorial for how to implement subscriptions in a web app like this that allows pay per user pricing for businesses?
@WebDevCody5 ай бұрын
I already have one; kzfaq.info/get/bejne/jNCkoZyhvKe-dH0.html
@anonymoussloth66875 ай бұрын
Could u do a full project like this but using aws stuff with next js? Preferably with sst
@regilearn21383 ай бұрын
Wow Awesome, I would like to request that if you can extend this video to Upload file to AWS S3 bucket using Lambda functions. like in real world app that would be great
@munawirulhadi28645 ай бұрын
Nice one, btw whats your vscode theme?? I ve been bored with my 2 years theme
@WebDevCody5 ай бұрын
Bearded theme stained blue
@ibrahimcious5 ай бұрын
I'm currently on minute 50:00 of this exciting project. However, I'm not sure if it's too complicated for me. I've been following along, but I don't think I fully understand what's going on.
@mateusleal12545 ай бұрын
Nice project. Thanks for sharing. I would like to learn more about PDF documents and electronic signatures to incorporate into your project. Any tips for me?
@WebDevCody5 ай бұрын
there are libraries such as pdfjs which you can use to overlay images onto the PDF and you'd have to build out a UI which allows user to place the image where they want. I don't have much more info on that though
@noomanraza78844 ай бұрын
can you make a video that how to host this web app
@swissaklo34105 ай бұрын
I cant seem to display my images or the pdfs as it is showing bad getaway and the URL is coming wrong.Cody is their any way to contact or share the code
@WebDevCody5 ай бұрын
My code repo is in the description
@23rbnHD4 ай бұрын
I'm not certain, but typing along this is where I have gotten stuck. It looks like that perhaps convex changed something and that /api/storage/{fileId} is no longer the correct path (verify by opening download in a new tab, you will see path does not match) and that they now require an additional storage.generate(fileId) step.
@23rbnHD4 ай бұрын
@@WebDevCody A workaround for the above. It works on screen with
@23rbnHD4 ай бұрын
Actually
@mikewashere4 ай бұрын
Hi there! To anyone who may be trying to follow along has anyone gotten the error “This convex site does not have http actions enabled”? This is when trying to create the user thru the webhook. I’m sure it’s something I did wrong. Thanks and great video so far!
@matthewsimon-ol4kb5 ай бұрын
Cody, what's the easiest/ simplest way to add Folders to the project?
@genarosalomone35945 ай бұрын
Hi Cody. In the part OrgId Auth, I have exac the same code as u before the commit, but, I think it is not working fine. Before that commit, I should see in the Home component the files of Personal Account + Files of organizations. Here I have the error, I am seeing only the files associateds to Personal Account. If i go to organization I see the files there, but I mean, In Personal Account I must see Personal Files + Orgs Files, is it right? What may be the error?
@WebDevCody5 ай бұрын
I’d say look through my repo code and compare to yours
@genarosalomone35945 ай бұрын
@@WebDevCody I think it is exactly the same. Is it supposed that in personal account u should see only personal files or personal with org files that user is in?
@WebDevCody5 ай бұрын
No in a personal account you only see your files, not every org files plus your personal ones
@genarosalomone35945 ай бұрын
@@WebDevCody Thanks for answering Cody! Are you going to add the part to deploy the app ?
@martinkalema5 ай бұрын
@WebDevCody What if i want to store files in folders?
@WebDevCody5 ай бұрын
You could probably just put a directory path attribute on the file table and then use that to change the perceived path
@CrawlingPanther5 ай бұрын
This was a great tutorial and I always like your videos. Me personally I don't like Next.js and prefer not to use it.
@northerncoder3 ай бұрын
Can you talk to the strategy in this app to make the file-browser component a client component vs building this app to be server rendered?
@ebenezernoble9513Ай бұрын
When i try to show the image in the cards componet like you did and perform a download action i get a bad request 404 error. i did console.log the getFileUrl(file.fileId) and the ID matches the file ID from the convex backend. But remember that when you hit dowloand and copy link address from the convex backend, the ID on the link is different from the fileId. Please help me
@nikako18895 ай бұрын
how to fix This Convex deployment does not have HTTP actions enabled. error? on webhook
@WebDevCody5 ай бұрын
I’ve never seen that error, join the convex discord to ask for help
@nikako18895 ай бұрын
@@WebDevCody thanks for answer
@kreideprinz4646Ай бұрын
Initially Even on Signout i can make changes to the database please look after it
@swissaklo34105 ай бұрын
Did convex change anything regarding their file upload or display ?? Cant seem to display images and it is always showing bad getaway
@WebDevCody5 ай бұрын
is this next? did you update your next config to allow displaying images from the convex url?
@swissaklo34105 ай бұрын
Yes sir , i did this but i cant view the images in my uploaded website and even the pdfs and such@@WebDevCody
@swissaklo34105 ай бұрын
yes i did and it was working fine until today when my other project also started showing the same error in displaying the image . It is leading me to a url with the storage id and not the actual address in the convex database download option@@WebDevCody
@shs42935 ай бұрын
div classname= grid grid-cols-4 hap-4 // is it shadcn or tailwind? Or just bootstrap??
@WebDevCody5 ай бұрын
Tailwind extension
@thespiritualjourney3695 ай бұрын
hey, are u using the following theme and its variant? : Bearded theme- stained blue.
@WebDevCody5 ай бұрын
Yes
@rudranshagg25804 ай бұрын
Please create a video to deploy it , I've been getting some errors
@junaiid01042 ай бұрын
excuse me sir due to this new next js I am not able to use public routes in the case of middle ware part and due to this I am not even able to get clerk auth!!! what can I do ???😞
@konstantinostzaferis53185 ай бұрын
What type of font and them are you using on your vs code setup?
@shs42935 ай бұрын
Also what are the extensions that you're using?? For the intellisense and ect
@WebDevCody5 ай бұрын
I was using copilot for a bit on this video, but also using typescript and a tailwind auto complete extension
@cartersherman925Ай бұрын
Is convex cost affective compared to a cloud run hosted express API?
@MohammadRaiyanShaikh5 ай бұрын
file popup not open when i click in input file field
@janelevensalvador56995 ай бұрын
Hi I'm trying to learn Nextjs, is this possible for me to do even if I only have free version of Clerk and Convex?
@WebDevCody5 ай бұрын
yes, both provide free tiers
@janelevensalvador56995 ай бұрын
@@WebDevCody thank you so much! I hope you can create more of this content where you dev from scratch. More love and support to you man!
@pathakvivek78655 ай бұрын
Hey Cody, why didn't you use clean code for this project? It would have been great if you had build this project using clean code similar to that you have used in pantry management app before.
@WebDevCody5 ай бұрын
Too much added complexity for a tutorial
@pathakvivek78655 ай бұрын
@@WebDevCody how much is it feasible in order to use convex and clerk to be implemented using clean code pattern? Are you planning to make videos on this anytime soon?
@user-yb8mx3yz6p4 ай бұрын
Can we make this project in a way in which we can add audio files .
@bayyes5 ай бұрын
What does „use node” directive in clerk.ts file? 45:53
@WebDevCody5 ай бұрын
allows the function to run using the normal node runtime instead of their v8 isolate runtime. When you run a mutation, action, and query, by default it uses a runtime with a faster boot time but it doesn't have access to many node_modules. If you need to bring in a third party library, sometimes you need 'use node' at the top of the file so convex knows how to package your dependencies and use them. In most cases, you won't need 'use node'
@gouthamchittineni65044 ай бұрын
bro How to deploy this application on vercel can u tell me the steps
@createteam6882 ай бұрын
everything you do always has a component whether it be database or file storage or backend . Its 5 lines of code to deploy any project to a personal vps but you still use the monstrority of company called vercel. Then database is free but why use paid. If you want to do some good, then do so properly.
@Msyo_Jaber5 ай бұрын
bro this video is so amazing it's helpful for me if you can add blueprint for the dotENV file that will be helpful for us
@awakenwithoutcoffee5 ай бұрын
can this be followed by beginners and if not what would you recommend instead ?
@WebDevCody5 ай бұрын
define beginners? it's probably geared towards people who somewhat already know next / react a bit.
@awakenwithoutcoffee5 ай бұрын
@@WebDevCody that makes sense. I am brushing up on my react and very much looking forward learning from your project . Thank you for making this available 🙏
@harishs270623 күн бұрын
are all the resources used in this video free of cost?
@awakenwithoutcoffee5 ай бұрын
any thoughts on Supabase vs Convex ?
@WebDevCody5 ай бұрын
I already made a video on that
@awakenwithoutcoffee5 ай бұрын
@@WebDevCody glad I found your channel. Cheers,
@adityaraj-zm7zk5 ай бұрын
sir i have a error in this
@WebDevCody5 ай бұрын
Ask in my discord if you need help
@adityaraj-zm7zk4 ай бұрын
@@WebDevCody sir i post the problem with screenshot my id is adityaraj3645 sir you taught in image alt not show image in card
@adityaraj-zm7zk4 ай бұрын
@@WebDevCody sir in when i tab on download error show wrong storage path issue please help me sir
@adityaraj-zm7zk4 ай бұрын
@@WebDevCody sir i have already asked but no any response
@adityaraj-zm7zk4 ай бұрын
sir when i click download button it shows 404 error
@user-pt3gh2xo4k4 ай бұрын
same Problem where you able to solve it....
@mr.zombie84253 ай бұрын
Im sorry, what have you done on 2:15:18
@rahulgp60634 ай бұрын
u think i need to have a better knowlege on convex before this tutorial i am understading the project but idk i am still confuesed abit and is learning convex can help we with mu resume
@WebDevCody4 ай бұрын
I have another video walkthrough another convex I’d recommend kzfaq.info/get/bejne/rMeBjbyDuM_NnX0.htmlsi=60AAfTtvgnHGwFBy
@rahulgp60633 ай бұрын
@@WebDevCody no i understood in this project itself thz, and i like the way u degub on spot excepting more vidz like this really differnt from other creators
@shivamjha89855 ай бұрын
can we deploy it ?
@oyesaurabh5 ай бұрын
is there any thing that will require money.
@WebDevCody5 ай бұрын
no they have free tiers
@samcosystem50255 ай бұрын
Which browser are you using?
@WebDevCody5 ай бұрын
chrome
@90-bhaveshsutar665 ай бұрын
Is this complete and free project
@WebDevCody5 ай бұрын
the demo at the start demos everything I build, so idk what you mean by complete. yes, it's free to follow along; both convex and clerk provide free tiers
@alrazy124 ай бұрын
i like your tutorials but i dont know why in this one I couldn't follow up and got lost after 1 hour
@WebDevCody4 ай бұрын
Sorry to hear that, what parts did you find confusing? I’ll try to improve for future ones