Photo Album Next.js Tutorial (with Server Actions, Cloudinary, Shadcn)
Web Dev Cody
@webdevcodyAbout
This channel is a collection of various programming videos, tutorials, projects, talks, or anything software engineering and programming related. If you are new to coding and want to learn how to program or get a job in the industry, be sure to subscribe to my channel. There is a lot of great content on this channel to help you out in your coding goals.
Latest Posts
Video Description
Be sure to checkout cloudinary: https://cld.media/wdcdevsphotoapp Documentation: http://next.cloudinary.dev Learn how to build a full stack app using cloudinary, next.js, and shadcn. This entire project was build without using a database; instead, we use all of the built in cloudinary functionality for uploading images, tagging our images, editing images, creating albums, etc. Link to code: https://github.com/webdevcody/cloudinary-photos-app Chapters: 00:00:00 - Intro 00:05:10 - Setup 00:07:03 - Cloudinary Next - Upload Component 00:13:02 - Image Component 00:17:35 - Cloudinary Transformations 00:19:46 - Shadcn/ui 00:24:47 - Side Navigation 00:29:48 - Gallery Page 00:35:39 - List Images 00:51:08 - Favorites 01:17:29 - Optimistic Updates 01:27:25 - Masonry Grid 01:37:56 - Albums 01:45:16 - Add to Album 01:59:13 - Albums Page 02:18:05 - Edit Images 02:31:15 - Fix Menu 02:32:58 - Search by Tags (Auto Tag) 02:44:49 - Sidenav Albums 02:49:15 - Generative Fill Prompts 02:54:02 - Finishing Touch 02:55:42 - Conclusion ๐ T3 Stack Tutorial: https://1017897100294.gumroad.com/l/jipjfm ๐ค SaaS I'm Building: https://www.icongeneratorai.com/ โ๏ธ Background Cutter: https://www.backgroundcutter.com/ ๐ฌ Discord: https://discord.gg/4kGbBaa ๐ Newsletter: https://newsletter.webdevcody.com/ ๐ GitHub: https://github.com/webdevcody ๐บ Twitch: https://www.twitch.tv/webdevcody ๐ค Website: https://webdevcody.com ๐ฆ Twitter: https://twitter.com/webdevcody
You May Also Like
Upgrade Your Gear Setup
AI-recommended products based on this video
ANXRE 71" Phone Tripod, NT79 Extendable Selfie Stick for Cell Phone๏ผCamera Photo Video Kits, Travel Tripod Stand with Remote for Video Recording, Phone Holder Tripod Compatible with Phone Camera Gopro
Kaiess 62" Tripod for iPhone, Selfie Stick Tripod & Phone Tripod Stand with Remote, Cell Phone Tripod for iPhone, Extendable Travel Tripod Compatible with iPhone 14/13/12 Pro Max/Android
EUCOS 62" Phone Tripod, Tripod for iPhone & Selfie Stick Tripod with Remote, Extendable Phone Tripod Stand & Travel Tripod, Solidest Cell Phone Tripod Compatible with iPhone/Android
Jhcztrk 17.3 Inch Portable Monitor HDMI Type-C Laptop Gaming Monitor, 1600X900 with Built-in Speakers and Tripod External Slim Travel Monitors Second Monitors for Mac Smartphone PS4/PS5/ Gaming
Anker USB C Charger Cable (6ft 100W, 2Pack), USB 2.0 Type C Fast Charging Cable for iPhone 15 / 15Pro / 15Plus / 15ProMax MacBook Pro 2020, iPad Pro 2020, iPad Air 4, Samsung Galaxy S23+/S23 Ultra ClimatePartner certified
![Anker USB C Cable, [2-Pack, 6 ft] Type C Charger Premium Nylon USB Cable, USB A to Type C Charging Cable Fast Charge for Samsung Galaxy S10 S10+ / Note 8, LG V20 and Other USB C Charger (Black)](https://m.media-amazon.com/images/I/71N7xhCJnoL._AC_UL960_FMwebp_QL65_.jpg)
Anker USB C Cable, [2-Pack, 6 ft] Type C Charger Premium Nylon USB Cable, USB A to Type C Charging Cable Fast Charge for Samsung Galaxy S10 S10+ / Note 8, LG V20 and Other USB C Charger (Black)
Anker Nano USB C Wall Charger,45W Fast Charging Smart Display Charger,with 180ยฐFoldable Plug,Smart Recognition,Built-in Care Mode,for iPhone17/16/15 (Non-Battery,One USB-C Port,No Cable Included) ClimatePartner certified
SanDisk 64GB Extreme PRO SDXC UHS-I Memory Card - C10, U3, V30, 4K UHD, SD Card - SDSDXXU-064G-GN4IN
