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: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

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news