Build a Google Photos Clone with Next.js and Cloudinary - Tutorial
Offered By: freeCodeCamp
Course Description
Overview
Syllabus
⌨️ Intro
⌨️ Creating a new Next.js app from a starter template
⌨️ Installing & Configuring the Cloudinary Node.js SDK
⌨️ Listing photos from Cloudinary
⌨️ Optimized & Responsive Images with Next Cloudinary
⌨️ Uploading Images with the CldUploadButton
⌨️ Passing Server Data to the Client with Tanstack Query
⌨️ Creating a custom hook to manage resource requests
⌨️ Optimisticly updating UI on Upload using Tanstack Query
⌨️ Tagging Images & Fetching Images by Tag
⌨️ Optimizing Server to Client resource and request management
⌨️ Creating dynamic routes for viewing individual images
⌨️ Using AI to Improve, Restore, and Remove Backgrounds from Images
⌨️ Adding animated loading placeholders for images
⌨️ Dynamically Cropping & Resizing images to different aspect ratios
⌨️ Customizing images with filters and effects
⌨️ Saving and updating an image with applied transformations and effects
⌨️ Refreshing and updating UI state on save
⌨️ Saving an image as a copy
⌨️ Deleting images
⌨️ Invalidating Tanstack Query tags on change
⌨️ Adding image resource metadata to info panel
⌨️ Setting up a Next.js loading UI for React Suspense streaming
⌨️ Adding loading indicators to homepage gallery
⌨️ Creating a collage from multiple images
⌨️ Saving collage creations to library
⌨️ Generating Ken Burns style zoom animations from images
⌨️ Stylizing images with Color Pop
⌨️ Optimizing Creation generation and UI
⌨️ Creating new server route of only stylized Creations
⌨️ Outro
Taught by
freeCodeCamp.org
Related Courses
Introduction to Artificial IntelligenceStanford University via Udacity Computer Vision: The Fundamentals
University of California, Berkeley via Coursera Computational Photography
Georgia Institute of Technology via Coursera Digital Signal Processing
École Polytechnique Fédérale de Lausanne via Coursera Creative, Serious and Playful Science of Android Apps
University of Illinois at Urbana-Champaign via Coursera