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

Channel:
United States Web Dev Cody
Subscribers:
254,000
Published on ● Video Link: https://www.youtube.com/watch?v=MC6D4vylKTc


Category:
Tutorial
Duration: 2:58:04
20,045 views
789

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



Other Videos By Web Dev Cody


2023-08-25Here is another fun beginner React challenge (image slider)
2023-08-23This is the best library for building cli programs
2023-08-21Why abstractions are useful (storing openai conversations into a db)
2023-08-19Building a text adventure RPG using OpenAI and LangChain
2023-08-18Why a SEPARATE TABLE is more secure
2023-08-17This is an INDUSTRY STANDARD for protecting your data
2023-08-15Why prisma calls directly in Next is a MISTAKE
2023-08-14Build your products 10x faster with this low-code platform
2023-08-13From 2.5 million row reads to 1 (optimizing my database performance)
2023-08-11Is remix any good? Let's try it out!
2023-08-10Photo Album Next.js Tutorial (with Server Actions, Cloudinary, Shadcn)
2023-08-09Successfully Break into the Software Industry: College vs Bootcamps, Soft Skills, Resumes
2023-08-08No joke, I'm switching to remix after this bug
2023-08-08The fastest way to deploy serverless applications https://genez.io/ #shorts
2023-08-04The app router can be annoying
2023-08-03How do software projects achieve zero downtime database migrations?
2023-08-02This is why your YouTube channel isn’t growing
2023-08-01A subscriber was asked these interview questions for a junior front end role (React)
2023-07-27you need to write tests when this starts to happen
2023-07-26This is what 2 weeks of open source collaboration can produce
2023-07-24Working on our Community Project Code Racer (Next, Tailwind, ShadCN/ui, prisma)


Tags:
web development
programming
coding
code
learn to code
tutorial
software engineering
nextjs
next.js
cloudinary
web app