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/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 Course created by @codinginflow ?: https://twitter.com/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