Next.js Ecommerce 2025 - Shopping Platform From Scratch

Create route groups with a root layout in next.js, embed a shared header and footer, and manage global constants and metadata via a lib/constants file and env variables.

Create header and footer components for a Next.js ecommerce app within a shared header folder. Integrate Lucid React icons, next/image, and next/link with the app name in layout.

Learn to implement a theme mode toggle in a Next.js ecommerce app using next-themes and shadow UI, with a dropdown for system, light, and dark themes.

Implement a responsive sheet menu in a Next.js ecommerce project by adding a sheet component with a trigger and a mobile-only panel that reveals mode toggle, cart, and sign-in options.

Build a reusable product card component in a Next.js ecommerce app using the shadow CDN card UI, displaying product image, brand, name, rating, price, and stock status.

Set up a cloud Postgres database on Neon via Vercel, configure Prisma models for products and sessions, migrate and seed data, and build the product details page with images.

Set up a Neon cloud Postgres database via Vercel and initialize Prisma. Define models with schema.prisma and prepare migrations for a product-focused ecommerce platform.

Create a seed script to populate the database with sample products via the prisma client, deleting existing records first. Switch from file-based data to database fetching.

Learn how to use Zod for type-safe schema validation and runtime checks, infer TypeScript types from schemas, and implement product insertion validation and price formatting in a Next.js ecommerce course.

Create a product images component for a Next.js ecommerce page with a large main image and clickable thumbnails; map through images, track current with useState, and apply conditional borders.

Learn to add Prisma user-related models for authentication, including user, account, session, and verification token, configure UUID keys, relationships, and migrations, and seed initial data.

Set up next auth with a catch-all api route in the app directory to manage sign in, sign out, and sessions behind the scenes, supporting multiple providers.

Create a dedicated auth layout and a sign in page inside a non-route auth group. Center a narrow sign-in card with a logo linking to the home page.

Implement a callback URL redirect in the sign-in flow by persisting the callback URL with a hidden input and reading search params.

Learn how to implement a user button and sign out in a Next.js ecommerce project, configure next-auth in env variables for production, and integrate a dropdown user menu with initials.

Improve sign up error handling by showing precise messages for existing emails and validation failures. Use a formatError utility to surface Zod and Prisma errors on the sign up page.

Build a cart system with Prisma models and a database table, link guest sessions via NextAuth, and implement add, remove, dynamic quantity with a spinner using the use transition hook.

Implement a Next.js middleware that runs on every request to generate a session cart ID cookie using crypto.randomUUID and attach it to the response, linking the cart regardless of login.

Fetch a product from the database and attach it to the session cart, using the session cart cookie and user id to support guest and signed-in shopping flows.

Learn to remove an item from the cart by implementing a remove item from cart function, validate the product with prisma, update the cart, and revalidate the product page.

Pass the cart into the add to cart component using get my cart. Toggle between add and remove from cart based on item existence, showing quantity with minus and plus.

Build the flow by creating a cart page with a table of items, a currency utility function, and a shipping address page with pre-filled forms and a checkout steps component.

Create a cart subtotal card in a Next.js ecommerce page, formatting currency with Intl.NumberFormat, computing item totals, and enabling a proceed-to-checkout button that routes to shipping address.

Define a shipping address zod schema with required fields and min lengths, infer a TypeScript ShippingAddress type, and scaffold the /shipping-address page with session, cart checks, and user lookup.

Develop a payment method page and form in Next.js, leveraging react-hook-form, session-based user data, a zod schema, and a two-step checkout with highlighted step two.

Create a payment method form with React Hook Form and shadow components, unify checkout steps on the payment page, and render PayPal, Stripe, and cash on delivery with validation.

Create a server action to submit an order and order items, validating the user session, cart, address, and payment method, then perform a transactional insert and redirect.

Develop format utility functions for the Next.js ecommerce 2025 order details page, including id shortening and date time formatting, and ensure cart and order prices render as strings.

this lecture implements a get my orders action that fetches the logged-in user's orders with pagination using a configurable page size from env, calculating skip and total pages.

Build an update profile form in Next.js with a disabled email and editable name, using next-auth session provider, React Hook Form with Zod resolver, in a client component.

Build the admin area to manage products, orders, and customers, with a Richards monthly sales bar chart and overview; enable deleting orders and updating cash-on-delivery orders to paid and delivered.

Build an admin overview with total revenue, counts for orders, products, and users, plus a monthly sales chart and latest six sales via a get order summary action.

Build an admin orders page in a Next.js ecommerce app, implement get all orders with pagination using Prisma, display order data with user names, and enforce admin authentication.

Add admin controls to update cash on delivery orders by marking as paid or delivered, with a server-side admin check, the is admin prop, a transition hook, and toast feedback.