3000+ Courses from California Community Colleges

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

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

via freeCodeCamp

Start learning Write review

Overview

Develop a Google Photos clone using Next.js and Cloudinary in this comprehensive 3-hour 39-minute tutorial. Learn to create a robust photo management application with features like image transformation, enhancement, and AI-powered improvements. Master techniques for optimized image handling, responsive design, and server-side rendering. Implement functionalities such as photo uploads, tagging, dynamic routing, and custom hooks for efficient resource management. Explore advanced features including AI-driven background removal, animated loading placeholders, and dynamic image cropping. Create engaging photo collages, generate Ken Burns-style animations, and apply stylish effects like Color Pop. By the end of this tutorial, gain the skills to build a feature-rich photo library application with modern web technologies.

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

Reviews

Start your review of Build a Google Photos Clone with Next.js and Cloudinary - Tutorial

Start learning

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.