Next.js 14 E-Commerce Website (Server Actions, TypeScript, Deployment, TailwindCSS, Prisma, DaisyUI)

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
-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:
Image assets:
MongoDB Atlas:
Add to cart button with SVG icon:
Google Cloud Console:
Prisma schema with user accounts:
UserMenuButton with SVG icon:

⭐ Get my full-stack Next.js with Express & TypeScript course:
✅ Get my free React Best Practices course:
💌 Join my newsletter for regular web dev tips:
💬 Join our developer community on Discord:

📣 Follow Coding in Flow on social media:

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