Next.js 13 E-Commerce Tutorial (App Router, TypeScript, Deployment, TailwindCSS, Prisma, DaisyUI)

⭐️ Code & Resources ⭐️

✏️ Course created by @codinginflow

⭐️ Contents ⭐️
⌨️ (0:00:00) Intro + prerequisites
⌨️ (0:08:48) Project setup
⌨️ (0:28:18) Prisma + MongoDB setup
⌨️ (0:45:42) Add product page (Server action in server component)
⌨️ (1:31:07) Products list page
⌨️ (2:00:11) Product details page (generateMetadata + React cache)
⌨️ (2:17:14) Add to cart button (Server action in client component)
⌨️ (3:01:01) Navbar + footer
⌨️ (3:26:38) Cart page
⌨️ (3:53:50) User login (Next-Auth)
⌨️ (4:33:37) Merging user cart with anonymous cart
⌨️ (5:01:26) Pagination
⌨️ (5:25:56) Search functionality
⌨️ (5:32:48) Prisma extension
⌨️ (5:46:42) Deployment + social preview

🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama

--

[codinginflow]

Thank you for having me!
You did that introduction better than I ever could 😅

[hauwaali]

That's wonderful!

Who else wants to see payment gateway integration.❤

[phillipthiel]

Definitely a Stripe integration tutorial from this cart. That would be awesome!

[olusolaafikode]

This is an amazing project to properly understand nextjs. Could you please include a second video tutorial in your project that covers the integration of payment methods, such as Stripe, to enhance our understanding of Next.js? Thank you.

[MiDonGo]

Great tutorial. Would definitely like to see more, like stripe integration

[redbarn]

Awesome! Thank you! Yes. İ want to see a stripe implementation tutorial (even better if the tutorial is flexible enough to accomodate stripe or an alternative payment processor).

[ReaLity]

Amazing! Please do a tutorial for Stripe Integration as well!!🎉🎉🎉

[mikeagoya]

This has got to be some mind reading typa shi

[tomdoff]

This was brilliant! I've wanted to experiment with tailwind for a while now, and this was the perfect primer for that.

[araputrevor]

Honestly, when i see that face on the intro of any dev video i trust the video more. Thank you free code.

[iixcryx]

He had me at "hello muchachos".

[ayukalvieri]

After deployment you realize there's a bug on safari and i think on chrome too. We can't use <button> here because Safari has a bug that prevents the button from being focused. <div role="button" tabindex="0"> is a workaround for this bug.
It is accessible and works in all browsers.

[aakerdev]

Solo por decir "Hola muchachos!" Toma tu LIKE!!! 😁

[Elyabav]

This Channel is mindblowing and gold mine of infos, thank you so much for thé team, efforts and time put into this content and provided for free, god bless you

[jeancarlosinisterra]

and the payment gateway integration ?
All we need is to learn how to do it with NextJS

[arshah]

2:56:36 when i try to add existing product to cart it didn't increment the value instead it shows me error Unknown argument `quantity`. Available options are marked with ?. in my prisma quantity is Integer. How can i solve this issue

[cicerolima]

I joined this video because it is recent, there are videos on this topic that simply don't work because it is out of date. Please keep updated

[zhangshiyucao]

Fantastic tutorial with clear explanations!

[AnujaMerwade]

Thank you for this tutorial! Would love to know how Stripe can be integrated in the payments section!! Thanks!

[santiagobarrera]

De los mejores tutoriales que pueden haber.
Gracias desde Colombia.