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

Build and deploy a full-stack e-commerce website with Next.js 13.4 and the new app router. This tutorial will walk you through harnessing Next.js server actions, managing databases with Prisma, constructing a dynamic website akin to Amazon, and ensuring user security with Next-Auth, MongoDB, and Google login. Enhance user experience with anonymous carts and a stellar UI via TailwindCSS and DaisyUI. Seamlessly deploy on Vercel, optimize page metadata, streamline Prisma requests with React cache, and set up essential developer tools for a smooth coding journey.

⭐️ Code & Resources ⭐️
Starting code: https://github.com/codinginflow/nextj...
tailwind.config.js: https://github.com/codinginflow/nextj...
Favicon: https://github.com/codinginflow/nextj...
Opengraph-image: https://github.com/codinginflow/nextj...
Image assets: https://github.com/codinginflow/nextj...
MongoDB Atlas: https://www.mongodb.com/atlas/database
Add to cart button with SVG icon: https://github.com/codinginflow/nextj...
Footer: https://github.com/codinginflow/nextj...
Google Cloud Console: https://console.cloud.google.com/
Prisma schema with user accounts: https://github.com/codinginflow/nextj...
UserMenuButton with SVG icon: https://github.com/codinginflow/nextj...
PaginationBar: https://github.com/codinginflow/nextj...

✏️ Course created by ‪@codinginflow‬
𝑿:   / codinginflow  
⭐ Get his full-stack NextJS with Express & TypeScript course: https://codinginflow.com/nextjs
💌 Join his newsletter for regular web dev tips: https://codinginflow.com/newsletter

⭐️ 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

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news