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