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).