Build a Google Photos Clone with Next.js and Cloudinary – Tutorial

✏️ Colby Fayock created this course.

Cloudinary provided a grant to make this course possible.

⭐️ Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:10:00) Listing photos from Cloudinary
⌨️ (0:15:07) Optimized & Responsive Images with Next Cloudinary
⌨️ (0:23:29) Uploading Images with the CldUploadButton
⌨️ (0:32:24) Passing Server Data to the Client with Tanstack Query
⌨️ (0:39:58) Creating a custom hook to manage resource requests
⌨️ (0:43:53) Optimisticly updating UI on Upload using Tanstack Query
⌨️ (0:52:18) Tagging Images & Fetching Images by Tag
⌨️ (0:55:33) Optimizing Server to Client resource and request management
⌨️ (1:01:55) Creating dynamic routes for viewing individual images
⌨️ (1:11:01) Using AI to Improve, Restore, and Remove Backgrounds from Images
⌨️ (1:28:32) Adding animated loading placeholders for images
⌨️ (1:34:33) Dynamically Cropping & Resizing images to different aspect ratios
⌨️ (1:46:48) Customizing images with filters and effects
⌨️ (1:55:23) Saving and updating an image with applied transformations and effects
⌨️ (2:11:46) Refreshing and updating UI state on save
⌨️ (2:19:14) Saving an image as a copy
⌨️ (2:23:14) Deleting images
⌨️ (2:30:04) Invalidating Tanstack Query tags on change
⌨️ (2:33:01) Adding image resource metadata to info panel
⌨️ (2:42:13) Adding loading indicators to homepage gallery
⌨️ (2:43:08) Creating a collage from multiple images
⌨️ (3:06:44) Saving collage creations to library
⌨️ (3:13:30) Generating Ken Burns style zoom animations from images
⌨️ (3:17:50) Stylizing images with Color Pop
⌨️ (3:29:46) Optimizing Creation generation and UI
⌨️ (3:34:29) Creating new server route of only stylized Creations
⌨️ (3:39:05) Outro

🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama

--

[themesongasker]

Thanks a lot, helped me with cloudinary implementation

[vinaykumardevadiga]

Transformed image is not being uploaded on the main page, its visible in the cloudinary portal yet not working... can anyone help on this issue

[NNCars]

Only the search tab with filters are missing. Cool one

[mrjorgemonteiro]

Great video but i wonder why you did not include the Album, tag and the Dark option on it.

[derpythespy]

thought you could hide from us with the sneaky upload? think again!

Thank you

[RideTheTeacups]

WOW!!! I was using cloudinary for my project, but clearly not anywhere near its full potential. This was fantastic; thank you. Now I feel like I need to refactor and clean up my main personal project.

[marcelol]

A lot of Cloudinary and a little bit of Next.js

[vinaykumardevadiga]

Did anyone get this error TypeError: Cannot read properties of undefined (reading 'height') at 1:10:47

[roi]

Why does everyone use React instead of Vue?

[pradeeppanja]

28:04 Code shows an error how it is still able to upload ?

[pradeepCodes-wstt]

I am sorry but the face cam coming again and again is really annoying.