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

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