Next.js Ecommerce: Build a Shopping Platform from Scratch

Course details

Take your Next.js skills to the next level by learning how to build a fully functional ecommerce platform. Begin with project setup, environment configuration, and responsive UI design, before turning to essential components like headers, footers, and product cards, as well as how to manage themes and dynamic layouts. Explore back-end development with PostgreSQL and Prisma for robust database solutions. Learn how to implement secure authentication using NextAuth to create seamless user sign-in and sign-up workflows, and develop key features like shopping carts, shipping forms, and checkout processes. With Zod validation and serverless environments, you’ll find out how to ensure data integrity and scalability for your platform. Finally, learn how to integrate payment gateways using Stripe and PayPal for real-world transaction handling. This course is uniquely designed for intermediate JavaScript developers.

Learning objectives
Design scalable ecommerce platforms using Next.js best practices.
Develop responsive user interfaces with dynamic UI components.
Manage databases effectively using Prisma and PostgreSQL.
Integrate secure authentication with NextAuth for user management.
Implement payment solutions with Stripe and PayPal integrations.
Deploy polished, production-ready applications with seamless configurations.

Concepts

Introduction

Welcome to the course
The stack
The project
The environment
Premium docs

App Creation and Basic Layout

Section intro
Create Next app and assets
ShadCN UI setup
Root layout and constants
Header and footer components
Theme mode toggle
Loading and not found pages
Responsive sheet menu
Sample products and product list
Product card component
Product price component

Database, Prisma, and Product Display

Section intro
PostgreSQL and Prisma setup
Prisma models and migrations
Seed sample data
Load products from database
Zod validation and type inference
Serverless environment config
Product details page
Product images component
Initial deployment
A note on ESLint errors

Authentication with NextAuth

Section intro
Prisma user-related models
Seed user data
NextAuth setup
NextAuth catch all API route
Sign-in and sign-out server actions
Auth layout and sign-in page
Credentials sign-in form
Hook up sign-in form
Callback URL redirect
User button and sign-out
Signup Zod schema and action
Sign-up page and form
Sign-up error handling
Customize token with JWT callback

Add to Cart

Section intro
Cart Zod schema and Prisma model
Add to cart component
Session cart ID
Get item for cart
Price calc for cart
Handle quantity and multiple products
Remove cart action
Dynamic cart button
Smooth UI with useTransition

Cart and Shipping Pages

Section intro
Cart page
ShadCN UI table
Subtotal cart
Shipping address Zod schema and page
Shipping address form
Update user address
Checkout steps component
Persist session cart
Protecting paths

Payment Method and Order Pages

Section intro
Payment method and Zod schemas
Payment method page
Payment method form and update
Order and OrderItem Prisma models
Order Zod schemas and types
Place order page
Create order action
Place order form
Order page and action
Format utility functions
Order details table

PayPal Payments

Section intro
PayPal sandbox setup
Generate access token
Jest testing for access token
Create order and capture API requests
Jest testing for order and payment
Create PayPal order action
Approve and update order
Implement PayPal button

Order History and User Profile

Section intro
User layout and menu
Get my orders action
Orders page
Orders pagination
Update profile action
Update profile form
Profile form submission

Admin Overview and Orders

Section intro
Admin layout and menu
Get order summary
Admin overview data display
Monthly sales chart
Admin orders page and action
Delete orders
Update order actions (COD)
Update order buttons (COD)

Admin Products and Image Uploads

Section intro
Get products for admin page
Display products
Delete products
Create and update actions
Create product page and form
Form fields and slugify
Create product form submission
Uploadthing configuration
Add image upload
Product cleanup
Is featured banner
Product update form

Admin Users and Search

Section intro
Get and display users
Delete users
User edit page
Update user form
Update user action
Admin search form
Admin orders search
Admin users search

Search Filtering, Drawer, and Carousel

Section intro
Category drawer
Featured product carousel
Search component
Search page
Search filters
Get filter URL function
Category and price UI filters
Rating filter and filter display
Sorting products
Dynamic metadata

Ratings and Reviews

Section intro
Review Prisma model, Zod, and type
Review list component
Review form dialog
Create and update review action
Connect review form to action
Get reviews action
Display reviews
Update and reload reviews

Stripe Payments

Section intro
Stripe setup
Order form payment intent
Stripe payment component
Stripe payment success page
Webhook to mark order as paid

Email Purchase Receipts

Section intro
Resend API key and install
Resend main function
Purchase receipt email template
Preview email in browser
Sending emails

Homepage Components and Wrap-Up

Section intro
Icon boxes component
Deal countdown component
Wrap-up