Build and deploy a full-stack e-commerce website with Next.js and the new app router. This was originally a Next.js 13 tutorial. But since there are no API changes in Next.js 14, it's still completely up-to-date. In this tutorial, you will learn: -How to use Next.js server actions and call them from both server components and client components -How to run database operations & transactions with Prisma and how to use Prisma client extensions to hook into your queries -How to build a fully functional e-commerce website similar to Amazon.com -How to add authentication with Next-Auth, the Prisma adapter, MongoDB, and Google login -How to implement anonymous shopping carts for unauthenticated users and store the identifier in a cookie -How to build an amazing UI using TailwindCSS and DaisyUI -How to deploy your project to Vercel and set up the metadata for each page (including generateMetadata) -How to deduplicate Prisma requests using the React cache function -How to set up tools like Prettier, Eslint, and the Prisma and TailwindCSS VS Code extensions to make your project easy to work with Links & files: Starting code: https://github.com/codinginflow/nextjs-ecommerce/tree/0-Starting-Point tailwind.config.js: https://github.com/codinginflow/nextjs-ecommerce/blob/0-Starting-Point/tailwind.config.js Favicon: https://github.com/codinginflow/nextjs-ecommerce/blob/0-Starting-Point/src/app/favicon.ico Opengraph-image: https://github.com/codinginflow/nextjs-ecommerce/blob/0-Starting-Point/src/app/opengraph-image.png Image assets: https://github.com/codinginflow/nextjs-ecommerce/tree/0-Starting-Point/src/assets MongoDB Atlas: https://www.mongodb.com/atlas/database Add to cart button with SVG icon: https://github.com/codinginflow/nextjs-ecommerce/blob/7-Add-to-Cart-Button/src/app/products/%5Bid%5D/AddToCartButton.tsx Footer: https://github.com/codinginflow/nextjs-ecommerce/blob/8-Navbar-Footer/src/app/Footer.tsx Google Cloud Console: https://console.cloud.google.com/ Prisma schema with user accounts: https://github.com/codinginflow/nextjs-ecommerce/blob/10-User-Authentication/prisma/schema.prisma UserMenuButton with SVG icon: https://github.com/codinginflow/nextjs-ecommerce/blob/10-User-Authentication/src/app/Navbar/UserMenuButton.tsx PaginationBar: https://github.com/codinginflow/nextjs-ecommerce/blob/12-Pagination/src/components/PaginationBar.tsx ⭐ Get my full-stack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs ✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbestpractices 💌 Join my newsletter for regular web dev tips: https://codinginflow.com/newsletter 💬 Join our developer community on Discord: https://codinginflow.com/discord 📣 Follow Coding in Flow on social media: Twitter: https://twitter.com/codinginflow Instagram: https://instagram.com/codinginflow TikTok: https://tiktok.com/@codinginflow Facebook: https://facebook.com/codinginflow Timestamps: 0:00 - Intro + prerequisites 08:04 - Project setup 27:34 - Prisma + MongoDB setup 44:58 - Add product page (Server action in server component) 1:30:23 - Products list page 1:59:27 - Product details page (generateMetadata + React cache) 2:16:30 - Add to cart button (Server action in client component) 3:00:17 - Navbar + footer 3:25:54 - Cart page 3:53:06 - User login (Next-Auth) 4:32:53 - Merging user cart with anonymous cart 5:00:42 - Pagination 5:25:12 - Search functionality 5:32:04 - Prisma extension 5:45:58 - Deployment + social preview