freeCodeCamp just published a video course that will teach you how to create a powerful photo management app using Next.js – similar to the popular Google Photos app.
Colby Fayock created this course. He’s an experienced teacher and works for Cloudinary, a Content Delivery Network and tool company that provided a grant to make this course possible.
The course starts with the basics, showing you how to set up a new Next.js application from a starter template. You’ll learn how to integrate Cloudinary’s Node.js Software Development Kit (SDK) to manage and store images effectively.
Here’s what else you can expect to master through this comprehensive course:
-
Efficient Image Handling: Learn how to upload, tag, and fetch images by tags, and dynamically manage images to optimize your app’s performance and responsiveness.
-
Advanced Features with Cloudinary and Tanstack Query: Implement Cloudinary’s features for image transformation and enhancement while managing data efficiently with Tanstack Query.
-
UI Enhancements: Add animated loading placeholders, customize images with various filters, and improve user interface interactions with dynamic cropping, resizing, and more.
-
AI Integrations: Utilize AI to enhance image quality, restore old photos, and remove backgrounds, taking your application to the next level.
-
Creative Image Manipulation: Create collages, generate Ken Burns effect animations, and apply unique color pop stylizations to images.
-
Optimizing Application Performance: Learn strategies for optimizing server-to-client resource management, creating responsive and efficient applications.
Here is a list of all the sections in this course:
-
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
This course offers practical, hands-on experience in building a sophisticated web application. You’ll not only gain skills in using Next.js and Cloudinary but also understand how to apply these technologies in real-world scenarios to create highly interactive and user-friendly web applications. By the end, you’ll have a fully functional web application and a deeper understanding of modern web development practices and tools. Whether you’re looking to improve your coding skills, handle photo assets more efficiently, or simply love creating cool stuff, this course is for you!
Watch now on the freeCodeCamp.org YouTube channel (4-hour watch).
