Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

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

via freeCodeCamp

Overview

Embark on a comprehensive 6-hour tutorial to build and deploy a full-stack e-commerce website using Next.js 13.4 and the new app router. Learn to leverage Next.js server actions, manage databases with Prisma, and create a dynamic Amazon-like website. Implement user security features with Next-Auth, MongoDB, and Google login. Enhance user experience through anonymous carts and create a polished UI using TailwindCSS and DaisyUI. Master deployment on Vercel, optimize page metadata, streamline Prisma requests with React cache, and set up essential developer tools for efficient coding. Gain hands-on experience with server and client-side components, user authentication, cart management, pagination, search functionality, and social preview optimization.

Syllabus

⌨️ Intro + prerequisites
⌨️ Project setup
⌨️ Prisma + MongoDB setup
⌨️ Add product page Server action in server component
⌨️ Products list page
⌨️ Product details page generateMetadata + React cache
⌨️ Add to cart button Server action in client component
⌨️ Navbar + footer
⌨️ Cart page
⌨️ User login Next-Auth
⌨️ Merging user cart with anonymous cart
⌨️ Pagination
⌨️ Search functionality
⌨️ Prisma extension
⌨️ Deployment + social preview

Taught by

freeCodeCamp.org

Reviews

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

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.