Next.js E-Commerce App Tutorial - Building a Full-Stack Shopping Application

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Embark on a comprehensive 6-hour tutorial to build a full-stack e-commerce application using React, Next.js, Tailwind CSS, and Wix Headless CMS. Learn to create a responsive navbar, implement a search functionality, design cart components, and develop a custom slider. Master product listing with filters, single product page design, and integration with Wix Headless E-Commerce SDK. Explore data fetching techniques using React Suspense, implement authentication, and create cart functionalities with Zustand for state management. Dive into checkout processes, order management, user profiles, and server-side form handling. Conclude by adding user reviews for products, gaining a thorough understanding of modern e-commerce development practices.

Syllabus

Introduction
Next.js Installation
Next.js App Router Creating Pages and Layout
Next.js Responsive Navbar Menu with Tailwind CSS
Next.js Search Input
Responsive Navbar Icons and Modals
Next.js E-commerce Cart Component Design
Next.js Slider Tutorial Create Your Own Slider
E-commerce App Product List Page Design
Sliding Category List Design
Next.js Footer Component Design
E-commerce App Product List Page with Filters UI Design
E-commerce App Single Page Design
Next.js Wix Headless E-Commerce App Tutorial
Wix E-Commerce Headless Javascript SDK Tutorial
Next.js E-commerce App Fetch Products
Next.js Fetch Data with React Suspense Loading Component
E-commerce App Fetch Categories
E-commerce App Fetch a Single Product
Next.js How to Filter Product Options in an E-Commerce App
Next.js Product Quantity and Add to Cart Button
Next.js E-commerce App Filter Products
Next.js Product Page Pagination
Next.js Authentication with Wix Headless
Next.js Wix E-commerce Cart Functionalities
Next.js Zustand Tutorial E-Commerce Cart State
Next.js Wix E-commerce Checkout Tutorial
Next.js Wix E-commerce Orders
Next.js Wix E-commerce User Profile Page
Next.js Form Handling with Server Actions
Next.js E-commerce App User Reviews for Products
Outro