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

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

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