Photo Album Next.js Tutorial (with Server Actions, Cloudinary, Shadcn)

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

[@joshtriedcoding]

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

[@WebDevCody]

thanks Josh! I took your advice to demo at the start 🙏

[@tiimmyvegas4974]

josh is my dad

[@anasazkoul4899]

You guys both are my favorite youtubers on the planet. thanks so much @WebDevCody your vids are always an opener for me

[@raymondmichael4987]

@@WebDevCody😊 oooh you guys helping out is giving me a goosebumps 😊

[@raymondmichael4987]

@@tiimmyvegas4974 oooh so you’re my brother from another mother 😅

[@LeighBriody]

two and a half hours of free top quality content , kudos ! Keep it up , looking forward to diving into this one

[@rumonintokyo]

Its unreal you are making something like on the spot without any priot thought... and under three hours... major respect sir!

[@lucascp021]

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.

[@thespiritualjourney369]

really love this type of videos. Please create more.

[@ProgramWithErik]

Looks great! Just chatted with Colby about this! Very impressed :)

[@WebDevCody]

Thank you!

[@raymondmichael4987]

This goes straight to my watch list. Thanks 🙏🏾 😊

[@mma-dost]

Thanks I am learning next js and this will help me to apply all those different concepts and make a good project.

[@ThugLifeModafocah]

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.

[@WebDevCody]

Sure thing!

[@programmers_sanctuary]

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!

[@amershboul9107]

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 👍

[@eshw23]

Im already using clodinary for a feature in my current project, will definately follow this to utilize more of its features I didnt know!

[@Sky-yy]

Top notch content ,cody.

[@8bitWatermelon]

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.

[@oliver.javier]

Awesome project, thanks for sharing!

[@abdulsami7429]

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!

[@rizvi6467]

Great work buddy keep it up

[@tenzintest331]

super good tuto NEXT JS

[@yousafwazir3167]

Nice tutorial

[@excalibur2417]

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.

[@Cloudinary]

Great project, nice work! 🚀

[@Omar-vi1vu]

thanks. quality content!

[@SeibertSwirl]

Good job babe!!!! Cloudinary is Pretty cool!!!!

[@WebDevCody]

you're pretty cool 😘!

[@spacecoder0526]

You are the best mentor

[@spacerrrrr]

You are amazing guy!

[@johnsanchez8429]

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.

[@WebDevCody]

You’d be disappointed but I could try that out one day to change up the content 😂

[@brancode404]

Nice bro. Would be great if you add Modal with Navigation ❤

[@linela]

Thank you!

[@teflonhav]

Thank You!

[@NunoCostapt]

Thought you were going to use the remix after watching a video mentioned 😁

[@WebDevCody]

I have a video ready for Friday related to remix, this was already edited before I made that 'switching to remix' video

[@NunoCostapt]

Awesome!@@WebDevCody

[@Khan_kpk007]

SUPERB BOSS

[@nirjoyhasanantor3149]

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

[@sh3r1ff50]

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.

[@skillswitharif]

great one 😊😅

[@Dlntck]

2:09:14 The satisfaction smile 😊

[@user-gt4ru7tw5m]

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

[@alazar7685]

looks cool... any chance getting any other project with react native and nodejs?

[@MirGlobalAcademy]

You are so fast that it took me whole day to pick just half an hour.

[@WebDevCody]

Could you explain what you mean? Are you saying this tutorial was too fast?

[@MirGlobalAcademy]

@@WebDevCody Yes, for an absolute beginner.

[@MirGlobalAcademy]

@@WebDevCody make it in small parts with Normal mouse movements.

[@MirGlobalAcademy]

@@WebDevCody It is an easy project but because of fast movements (here and there) takes a lot of time.

[@MirGlobalAcademy]

You explained it very well overall..!

[@toiageddes1710]

thanks!!!

[@nikako1889]

would love to see tutorial about icongenerator

[@WebDevCody]

I have a course on building out some of it

[@nikako1889]

@@WebDevCody where can i find course?

[@danyacoding]

love your videos and how you teach people

[@WebDevCody]

Thanks Dan!

[@emmanuelezeagwula7436]

This look like a good alternative for those who don’t like to touch awe s3

[@im.webdev]

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.

[@Jankee187]

not working anymore Unhandled Runtime Error Error: Error: [object Object]

[@Santon-Motho]

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.

[@WebDevCody]

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.

[@halgrind]

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.

[@georgegeorgio70]

same here

[@lookingforbino]

Same

[@muhammadhilal5807]

Use : result:UploadResult | Any. Any type will allow you to counter the error for the meanwhile.

[@masabbinzia6523]

Love to learn this type of projects, keep it up Man @webdevcody

[@codekungfu1]

I want to know how is the getColumns function working properly?

[@abdulrahmanalsabagh3334]

R.I.P S3

[@Papahaha]

Hi for some reason in production the router.fresh part does not fetch the new images :(

[@pranshusati5115]

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!

[@WebDevCody]

I'm not sure, I can try to ask someone for you

[@WebDevCody]

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/

[@pranshusati5115]

@@WebDevCody thanks a lot man i really appreciate it

[@s12141209ify]

hello ! Can u share 14:04 the way of search unknow properties?

[@PicyPoe]

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.

[@WebDevCody]

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.

[@PicyPoe]

@@WebDevCody superb, thanks!

[@rgbmadyt46]

Can you make a full project using Nextjs app route, react query, firebase auth, firebase cloud database….

[@amershboul9107]

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

[@WebDevCody]

The app router only converts page.tsx to routes

[@amershboul9107]

@@WebDevCody oh sorry, you're correct

[@Ridwanpens]

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

[@randomotaku6684]

The image is not showing inside the favorite page what should i do ?

[@prashlovessamosa]

Noicee

[@null_spacex]

Is cloudinary good in terms of cost of storage? For example an app for photographers, where image hosting will be the primary concern

[@WebDevCody]

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.

[@null_spacex]

@@WebDevCody might be enough to start then scale.. not sure but I'll give it a look. Thanks!

[@abdulrehmanbaber2104]

hi, that is a great work of art but i am little confuse about the use Cases of cloudinary, can any guide me?

[@WebDevCody]

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

[@abdulrehmanbaber2104]

​@@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.

[@diogenespasqualoto1675]

Tem como usar para projeto de verdade?

[@ultrAbdu]

Can i use the code for my own gallery? And how can i deploy that on my own domain?

[@WebDevCody]

Sure, I’d just host of vercel if I was you and hook up a domain

[@developermaster4199]

Do we need to purchase the paid service cloudinary to follow the tutorial? with free cloudinary account, we able to follow tutorial??

[@WebDevCody]

I used the free account

[@partabparmar5537]

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.

[@WebDevCody]

I’m not

[@magnuserikkeenrobot1117]

where is your glasses? :D

[@hamxzaa9868]

Which theme are you using in VS code?

[@WebDevCody]

Bearded theme stained blue

[@muhammadtahir-qc8ep]

How can we add download functionality in this image project.

[@WebDevCody]

stackoverflow has good examples of how to download an image on clicking a button. chatgpt can also help you

[@muhammadtahir-qc8ep]

@@WebDevCody thank you for the suggestion.

[@fredjuma]

is there any user auth in the video?

[@WebDevCody]

I don’t think so

[@SYEDRAZAALII06]

what about the home page ?

[@WebDevCody]

I don’t find that too important compared to adding features. Anyone can find a landing page template and modify the text

[@diogenespasqualoto1675]

Finish

[@amandioreal2293]

I noted that you add the commit message without convencional commit. You only add feat when the feature is done?

[@WebDevCody]

I don’t really follow that commit convention, I probably should

[@amandioreal2293]

@@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.

[@caresbruh]

sorry but the css part was badly organized

[@WebDevCody]

I was using tailwind

[@computertechnology217]

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?

[@WebDevCody]

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