Photo Album Next.js Tutorial (with Server Actions, Cloudinary, Shadcn)
Vložit
- čas přidán 27. 07. 2024
- Be sure to checkout cloudinary: cld.media/wdcdevsphotoapp
Documentation: next.cloudinary.dev
Learn how to build a full stack app using cloudinary, next.js, and shadcn. This entire project was build without using a database; instead, we use all of the built in cloudinary functionality for uploading images, tagging our images, editing images, creating albums, etc.
Link to code: github.com/webdevcody/cloudin...
Chapters:
00:00:00 - Intro
00:05:10 - Setup
00:07:03 - Cloudinary Next - Upload Component
00:13:02 - Image Component
00:17:35 - Cloudinary Transformations
00:19:46 - Shadcn/ui
00:24:47 - Side Navigation
00:29:48 - Gallery Page
00:35:39 - List Images
00:51:08 - Favorites
01:17:29 - Optimistic Updates
01:27:25 - Masonry Grid
01:37:56 - Albums
01:45:16 - Add to Album
01:59:13 - Albums Page
02:18:05 - Edit Images
02:31:15 - Fix Menu
02:32:58 - Search by Tags (Auto Tag)
02:44:49 - Sidenav Albums
02:49:15 - Generative Fill Prompts
02:54:02 - Finishing Touch
02:55:42 - Conclusion
📘 T3 Stack Tutorial: 1017897100294.gumroad.com/l/j...
🤖 SaaS I'm Building: www.icongeneratorai.com/
✂️ Background Cutter: www.backgroundcutter.com/
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody
Awesome work man! These long form videos take a lot of effort, much respect for putting that in. One of the best alternatives to s3 for image uploading
thanks Josh! I took your advice to demo at the start 🙏
josh is my dad
You guys both are my favorite youtubers on the planet. thanks so much @WebDevCody your vids are always an opener for me
@@WebDevCody😊 oooh you guys helping out is giving me a goosebumps 😊
@@timmyvegas oooh so you’re my brother from another mother 😅
two and a half hours of free top quality content , kudos ! Keep it up , looking forward to diving into this one
Its unreal you are making something like on the spot without any priot thought... and under three hours... major respect sir!
Last week, I finished a similar app using Cloudinary, Next.js, Auth.js, etc. It's really impressive to see how you did it 10x better.
woah, I didn't know about masonry grid. All I've done until now was to manipulate the image itself with grid row spans. This is great to know!
I always thought web dev cody was a web-dev advise type of guy. I never knew you do tutorials 😅😅😅😅😅😅
This is amazing, love it.
Im already using clodinary for a feature in my current project, will definately follow this to utilize more of its features I didnt know!
Looks great! Just chatted with Colby about this! Very impressed :)
Thank you!
My nigga... you read my mind... I was asking myself: "what should I use? CldImage or Next Image??? damn, I wish somebody have done an explanation of pros and cons..." then right there you started explaining it at 17:35... AWESOME. This is very good because it left the viewer without doubts in his mind... very good. Thank you.
Sure thing!
really love this type of videos. Please create more.
This goes straight to my watch list.
Thanks 🙏🏾 😊
Thanks I am learning next js and this will help me to apply all those different concepts and make a good project.
1:35:39 I believe you might have added "use client" at the top, which could be causing the error. However, I want to express my appreciation for your fantastic work. I've learned a lot from it and truly enjoyed the experience. Thank you!
You content is amazing bro
i like how did you explain how to deal with cloudinary before start implementing the the things
you deserve a huge like 👍
Top notch content ,cody.
Awesome project, thanks for sharing!
Great work buddy keep it up
Nice tutorial
super good tuto NEXT JS
Great project, nice work! 🚀
thanks. quality content!
You are the best mentor
Good job babe!!!! Cloudinary is Pretty cool!!!!
you're pretty cool 😘!
You are amazing guy!
Exactly what I needed for my new app, thank you. Just wondering if the free plan on cloudinary will be enough for my small application at the beginning.
Thank you!
Nice bro. Would be great if you add Modal with Navigation ❤
sir one question on the favorite page why you have not use the router.refresh() to refresh the page when you remove an image from favorites ? and why you filter the data instead
Thank You!
Hey Cody. Great video. Have you considered doing a desk tour/equipment tour? I'd be interested to know what you've got going on. Thanks.
You’d be disappointed but I could try that out one day to change up the content 😂
I was wondering are you gonna make video in a new topic like this cause when you pointed a issue on server actions i saw this
SUPERB BOSS
great one 😊😅
Thought you were going to use the remix after watching a video mentioned 😁
I have a video ready for Friday related to remix, this was already edited before I made that 'switching to remix' video
Awesome!@@WebDevCody
Hey cody, will this project still work .. i mean is there any changes in cloudinary that wont allow me use it for free ?
Awesome project btw 🎉 Recently found your channel and its really a gem.
looks cool... any chance getting any other project with react native and nodejs?
THank you so much
thanks!!!
You are so fast that it took me whole day to pick just half an hour.
Could you explain what you mean? Are you saying this tutorial was too fast?
@@WebDevCody Yes, for an absolute beginner.
@@WebDevCody make it in small parts with Normal mouse movements.
@@WebDevCody It is an easy project but because of fast movements (here and there) takes a lot of time.
You explained it very well overall..!
Hi for some reason in production the router.fresh part does not fetch the new images :(
Latest version of next-cloudinary added a more specific type definition to the CldUploadButton onUpload callback, "CldUploadEventCallbackNoOptions". the results parameter is a union type that can be undefined, string, or object. UploadResult gives a type error with it. I'm not so good with typescript, can't figure out how to fix it.
same here
Same
Use : result:UploadResult | Any. Any type will allow you to counter the error for the meanwhile.
Excuse me, can this project be deployed as an online web application, meaning not as a static site? Because when I deploy it, I can upload images, but the gallery does not update or show the new images
love your videos and how you teach people
Thanks Dan!
This look like a good alternative for those who don’t like to touch awe s3
can't find a way to add cropping functionality for next-cloudinary uploadwidget and button
Haven't gone through it yet of course, but do you speak about any recommendations regarding Server Actions in production? I think you mentioned a few months ago that you weren't moving from T3 and tRPC until Server Actions were stable.
I'd still not use it in production, but they are a concept worth learning on side projects or low risk projects IMO. I do think the provide an easier way to write full stack applications, and when they are out of alpha and next fixes it's various caching issues, I think the solution will be solid. It's obvious it's the direction next.js is going, so you'll probably want to learn it at some point.
I want to know how is the getColumns function working properly?
not working anymore
Unhandled Runtime Error
Error: Error: [object Object]
would love to see tutorial about icongenerator
I have a course on building out some of it
@@WebDevCody where can i find course?
Love to learn this type of projects, keep it up Man @webdevcody
hello ! Can u share 14:04 the way of search unknow properties?
2:09:14 The satisfaction smile 😊
The image is not showing inside the favorite page what should i do ?
Hey Cody,
This is an amazing tutorial. I'm truly impressed by all the capabilities that Cloudinary offers. I have a vision to create an image gallery app that incorporates automatic face tagging for my college farewell function. Since I'm graduating this semester, I want to develop an app similar to Facebook's facial tagging feature. This would allow users to tag faces with names, and these names would then appear on every photo where the tagged face is present. Unfortunately, I'm short on time to develop the entire system on my own. Does Cloudinary provide a solution for implementing such functionality?
Thank you!
I'm not sure, I can try to ask someone for you
here is a tutorial which uses something for tagging by face I think
aws.amazon.com/blogs/apn/how-to-use-amazon-rekognition-on-cloudinary-to-auto-tag-faces-with-names/
@@WebDevCody thanks a lot man i really appreciate it
Can you make a full project using Nextjs app route, react query, firebase auth, firebase cloud database….
Noicee
Do we need to purchase the paid service cloudinary to follow the tutorial? with free cloudinary account, we able to follow tutorial??
I used the free account
R.I.P S3
You did but ! We need to update delete on frontend everybody show how to upload it. Anyone don't show how we can update and upload folder wish.
Is cloudinary good in terms of cost of storage? For example an app for photographers, where image hosting will be the primary concern
I'd go check out their pricing page, the free tier allows 25gb of storage which may or may not be enough in your case.
@@WebDevCody might be enough to start then scale.. not sure but I'll give it a look. Thanks!
Can i use the code for my own gallery? And how can i deploy that on my own domain?
Sure, I’d just host of vercel if I was you and hook up a domain
Does anyone know, is that the speed you are expected to work at when you have full-time web-dev job? This is beyond overwhelming.
No, this was a 5 hour video edited down to 3 hours. A lot of that time was spent fixing bugs and reading the docs. With that being said, everything you see here was done in a total of 5 hours, but I also have 10+ years of experience.
@@WebDevCody superb, thanks!
i noticed one thing that you put the gallery components inside app/gallery file which nextjs will transform these components into routes, move them outside app file or make a file started with _ so nextjs will igonore these files as routes
The app router only converts page.tsx to routes
@@WebDevCody oh sorry, you're correct
hi, that is a great work of art but i am little confuse about the use Cases of cloudinary, can any guide me?
It’s a service for storing all media assets (images, videos) and provides a lot of features for easily searching through that content and doing transformations on it. So imagine you have a need for users to upload public images on your web application, you could just have them upload to cloudinary and use their service for everyone to see and browser users public omages
@@WebDevCody thanks Alot. actually i am following your tutorial day by day keenly, em half way through and i have some notes so bear with me.
i got to learn soooo much new stuff thanks for that. specially loveeed the optimistic updating. it is an ingenious concept.
but a little bit trouble, i get you are awesome and likes to do live coding and do mistakes but to the noobs like us, we lose track of the flow of the code. we erase what we written and then again write from different mindset, i guess that's the point of teaching but some places it got so hectic and confusing so you might do something about that like make a schema of whole app and then go from there.
also in 1:34:45 you faced an issue where favorite page wasn't deleting and you tried two fixes, first "use client" and then you erase the hard coded cloudimage component which was the main problem and then forget to erase "use client " which made you make another server component of grid-gallery.
also could we have just made a new folder and use the folder name as a tag and insert it in the image and then publish albumns and folders according the folder tag?
lastly i have another request, i am learning nextjs from multiple sources taking on campus classes and also online tutorials, more i do, more i love it, i just have one recommendation, that no one is doing online, a whole app tutorial is based on many different concepts, methods, some are new even to people who are familiar with web development and we have to stop the video learn that concept and that start again. why not do a short preliminary video of the app tutorial, like it has all the concepts like transitions react types, etc so a student before taking a tutoriel become familiar with the concepts and different method its going to utilize.
Thanks again. please forgive me, i mean only respect and gratitude.
Tem como usar para projeto de verdade?
Which theme are you using in VS code?
Bearded theme stained blue
where is your glasses? :D
is there any user auth in the video?
I don’t think so
How can we add download functionality in this image project.
stackoverflow has good examples of how to download an image on clicking a button. chatgpt can also help you
@@WebDevCody thank you for the suggestion.
AMAZING, THANK YOU FOR SUCHA A NICE VIDEO, ARE YOU ON LINKEDIN, I WANT TO MAKE THIS KIND OF APP, AND TAG YOU THERE......THANK YOU ONCE AGAGIN.
I’m not
what about the home page ?
I don’t find that too important compared to adding features. Anyone can find a landing page template and modify the text
I noted that you add the commit message without convencional commit. You only add feat when the feature is done?
I don’t really follow that commit convention, I probably should
@@WebDevCody Your real time projects are great to learn about real world problems. I think add convencional commit will be a great opportunity to see how to use it and when to use it. Sometimes it get a bit confusing when to use it and when not, like when we are progressing a feature.
Finish
sorry but the css part was badly organized
I was using tailwind
hey buddy, I have been following you since many days, I have a question that before nextJs 13 i saw that everyone named their files in PascalCase but when nextJs 13 come I notice that there are lots of people use kebab-case for file naming, why kebab-case and why not PascalCase for file naming?
Idk I just decided to standardize all files to kebab. After being on my current project at work, we have random file naming conventions and it isn’t helpful. I think kebab helps you realize that you can have multiple react components exports from a single file