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

[@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 🙏

[@timmyvegas]

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]

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

[@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!

[@LeighBriody]

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

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

[@ProgramWithErik]

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

[@WebDevCody]

Thank you!

[@rumonintokyo]

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

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

[@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!

[@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!

[@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!

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

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

[@itxtaj_101]

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

[@thespiritualjourney369]

really love this type of videos. Please create more.

[@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 👍

[@mma-dost]

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

[@s12141209ify]

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

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

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

[@Sky-yy]

Top notch content ,cody.

[@raymondmichael4987]

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

[@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 😂

[@SeibertSwirl]

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

[@WebDevCody]

you're pretty cool 😘!

[@oliver.javier]

Awesome project, thanks for sharing!

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

[@Papahaha]

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

[@codekungfu1]

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

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

[@Cloudinary]

Great project, nice work! 🚀

[@rizvi6467]

Great work buddy keep it up

[@randomotaku6684]

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

[@tenzintest331]

super good tuto NEXT JS

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

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

[@Jankee187]

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

[@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!

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

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

[@spacecoder0526]

You are the best mentor

[@mrshygaming383]

Onupload isnt available what should i do

[@mrshygaming383]

Oh i figured it use onsucces instead

[@spacemonkeyvibes]

My image isn't moving into the folderr, only it's created the folder.

[@rgbmadyt46]

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

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

[@yousafwazir3167]

Nice tutorial

[@hamxzaa9868]

Which theme are you using in VS code?

[@WebDevCody]

Bearded theme stained blue

[@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!

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

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

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

[@Dlntck]

2:09:14 The satisfaction smile 😊

[@spacerrrrr]

You are amazing guy!

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

[@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?

[@fredjuma]

is there any user auth in the video?

[@WebDevCody]

I don’t think so

[@brancode404]

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

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

[@Omar-vi1vu]

thanks. quality content!

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

[@programmer_007]

SUPERB BOSS

[@diogenespasqualoto]

Tem como usar para projeto de verdade?

[@teflonhav]

Thank You!

[@linela]

Thank you!

[@abdulrahmanalsabagh3334]

R.I.P S3

[@masabbinzia6523]

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

[@skillswitharif]

great one 😊😅

[@aymenbachiri-yh2hd]

THank you so much

[@toiageddes1710]

thanks!!!

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

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

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

[@magnuserikkeenrobot1117]

where is your glasses? :D

[@prashlovessamosa]

Noicee

[@diogenespasqualoto]

Finish

[@caresbruh]

sorry but the css part was badly organized

[@WebDevCody]

I was using tailwind

[@gamerbenja695]

can't find a way to add cropping functionality for next-cloudinary uploadwidget and button