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

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

freeCodeCamp.org via freeCodeCamp Direct link

⌨️ Deleting images

20 of 31

20 of 31

⌨️ Deleting images

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

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

Automatically move to the next video in the Classroom when playback concludes

  1. 1 ⌨️ Intro
  2. 2 ⌨️ Creating a new Next.js app from a starter template
  3. 3 ⌨️ Installing & Configuring the Cloudinary Node.js SDK
  4. 4 ⌨️ Listing photos from Cloudinary
  5. 5 ⌨️ Optimized & Responsive Images with Next Cloudinary
  6. 6 ⌨️ Uploading Images with the CldUploadButton
  7. 7 ⌨️ Passing Server Data to the Client with Tanstack Query
  8. 8 ⌨️ Creating a custom hook to manage resource requests
  9. 9 ⌨️ Optimisticly updating UI on Upload using Tanstack Query
  10. 10 ⌨️ Tagging Images & Fetching Images by Tag
  11. 11 ⌨️ Optimizing Server to Client resource and request management
  12. 12 ⌨️ Creating dynamic routes for viewing individual images
  13. 13 ⌨️ Using AI to Improve, Restore, and Remove Backgrounds from Images
  14. 14 ⌨️ Adding animated loading placeholders for images
  15. 15 ⌨️ Dynamically Cropping & Resizing images to different aspect ratios
  16. 16 ⌨️ Customizing images with filters and effects
  17. 17 ⌨️ Saving and updating an image with applied transformations and effects
  18. 18 ⌨️ Refreshing and updating UI state on save
  19. 19 ⌨️ Saving an image as a copy
  20. 20 ⌨️ Deleting images
  21. 21 ⌨️ Invalidating Tanstack Query tags on change
  22. 22 ⌨️ Adding image resource metadata to info panel
  23. 23 ⌨️ Setting up a Next.js loading UI for React Suspense streaming
  24. 24 ⌨️ Adding loading indicators to homepage gallery
  25. 25 ⌨️ Creating a collage from multiple images
  26. 26 ⌨️ Saving collage creations to library
  27. 27 ⌨️ Generating Ken Burns style zoom animations from images
  28. 28 ⌨️ Stylizing images with Color Pop
  29. 29 ⌨️ Optimizing Creation generation and UI
  30. 30 ⌨️ Creating new server route of only stylized Creations
  31. 31 ⌨️ Outro

Never Stop Learning.

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

Someone learning on their laptop while sitting on the floor.