Build a Google Photos Clone with Next.js and Cloudinary – Tutorial
905Learn 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