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

YouTube

Next.js E-Commerce App and Admin Panel UI Design Tutorial - Shopping App Design

Lama Dev via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn to build a complete e-commerce application and admin panel interface using Next.js 15, Tailwind CSS, and TypeScript in this comprehensive 4-hour tutorial. Master responsive web design principles by creating a modern shopping application from scratch, starting with fundamental layout structures and progressing to advanced interactive components. Build a responsive navbar and footer, design an engaging homepage with product listings, and implement dynamic category filtering systems. Explore Next.js URL search parameters for enhanced navigation and create interactive product cards with color-based image switching functionality. Develop a multi-step cart page with integrated payment forms using React Hook Form and Zod validation for robust data handling. Implement state management with Zustand for cart functionality, including local storage persistence and hydration problem solutions. Design detailed single product pages with SEO optimization techniques for both static and dynamic titles. Construct a comprehensive admin panel featuring dashboard analytics, user management interfaces, and data tables using React-Table for efficient content management. Create sophisticated form designs for product management and administrative tasks. Access starter and completed source code repositories, along with additional resources for ShadCN components and VSCode snippets to enhance your development workflow.

Syllabus

00:00 Introduction
02:24 Installation
05:18 Next.js Tailwind Responsive Layout
08:50 Responsive Navbar Design Tutorial
18:00 Responsive Footer Design
23:20 E-Commerce App Homepage Design
25:25 E-commerce Product List Design
31:47 Categories Component
35:37 Next.js URL Search Params Tutorial
42:56 E-commerce Interactive Product Card Design
54:30 How to Change Product Image by Product Color?
01:02:34 Product List Page Design
01:03:59 Next.js E-commerce Product Filter
01:08:52 E-commerce Cart Page Design with Steps
01:41:11 Next.js React-Hook-Form with Zod Validation Tutorial
01:55:00 E-commerce Payment Form Design with Validation
02:01:28 Next.js E-commerce App Cart State Management with Zustand
02:10:24 Zustand How to Persist Data on Local Storage?
02:12:35 Zustand E-Commerce Cart Actions
02:20:09 How to Fix Next.js Zustand Hydration Problem?
02:22:24 E-Commerce SIngle Product Page Design
02:48:50 Next.js SEO Tutorial Static and Dynamic Title
02:51:58 E-commerce App Admin Panel Design
02:54:38 Admin Dashboard Homepage Design Changes
03:03:38 Admin Dashboard Single User Page Design Changes
03:07:50 Admin Panel List Page Design with React-Table
03:24:47 Admin Panel Sidebar Design Changes
03:32:10 E-commerce Admin Panel Form Design
03:38:44 E-commerce Admin Add Product Form Design
03:58:40 Outro

Taught by

Lama Dev

Reviews

Start your review of Next.js E-Commerce App and Admin Panel UI Design Tutorial - Shopping App Design

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.