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

From the creator

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) Savi

Published 2024-04-23 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.