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/demop...
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
jediorsith
南宮千影
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