Photo Album Next.js Tutorial (with Server Actions, Cloudinary, Shadcn)

Web Dev Cody โ€ข August 10, 2023
Video Thumbnail
Web Dev Cody Logo

Web Dev Cody

@webdevcody

About

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.

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

Upgrade Your Gear Setup

AI-recommended products based on this video

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

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

(752)
$23.99
FREE delivery Tue, Aug 19 on your first order
2K+ bought in past month
Loading...
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
Best Seller

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

(5,298)
$28.98
FREE delivery Sat, Jun 14 on your first order
1K+ bought in past month
Loading...
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

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

(13,783)
$28.99
Prime
5K+ bought in past month
Loading...
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

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

(32)
$161.69$161.68
FREE delivery Aug 11 - 13
Loading...
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 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

(44,904)
$17.99
FREE delivery Wed, Aug 20 on your first order
6K+ bought in past month
Loading...
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 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)

(103,365)
$13.49
5K+ bought in past month
Loading...
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

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

(698)
$39.99
FREE delivery Wed, Mar 4
1K+ bought in past month
Loading...
SanDisk 64GB Extreme PRO SDXC UHS-I Memory Card - C10, U3, V30, 4K UHD, SD Card - SDSDXXU-064G-GN4IN

SanDisk 64GB Extreme PRO SDXC UHS-I Memory Card - C10, U3, V30, 4K UHD, SD Card - SDSDXXU-064G-GN4IN

(71,074)
$21.99$16.59
FREE delivery Sun, Aug 10 on your first order
500+ bought in past month
Loading...
SanDisk 128GB Extreme PRO SDXC UHS-I Memory Card - C10, U3, V30, 4K UHD, SD Card - SDSDXXD-128G-GN4IN
Best Seller

SanDisk 128GB Extreme PRO SDXC UHS-I Memory Card - C10, U3, V30, 4K UHD, SD Card - SDSDXXD-128G-GN4IN

(71,074)
$29.99$26.61
FREE delivery Sun, Aug 10 on your first order
4K+ bought in past month