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

Learn how to use Next.js and Cloudinary to build a Google Photos Clone. Your app will be able to transform and enhance the images. ✏️ Colby Fayock created this course. https://colbyfayock.com/ 🔗 Starter Template: https://github.com/colbyfayock/demo-photo-library-starter 🔗 Bonus Credits & Background Removals: https://cld.media/freecodecamp 🔗 Next Cloudinary: https://next.cloudinary.dev/ 🔗 Photobox: https://www.photobox.dev/ Cloudinary provided a grant to make this course possible. ⭐️ Contents ⭐️ ⌨️ (0:00:00) Intro ⌨️ (0:03:07) Creating a new Next.js app from a starter template ⌨️ (0:05:32) Installing & Configuring the Cloudinary Node.js SDK ⌨️ (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:37:32) Setting up a Next.js loading UI for React Suspense streaming ⌨️ (2:42:13) Adding loading indicators to homepage gallery ⌨️ (2:43:08) Creating a collage from multiple images ⌨️ (3:06