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

E-commerce app & admin dashboard design with Next.js 15, Tailwind, TypeScript. Design a shopping app with React Next.js from scratch.

You are watching the first part (the design part).
Second part (the back-end part): [coming soon]

If it is valuable to you, you can support Lama Dev.
Join: https://www.youtube.com/channel/UCOxWrX5MIdXIeRNaXC3sqIg/join
Buy me a coffee: https://www.buymeacoffee.com/lamadev

Join Lama Dev groups

X / Twitter: https://x.com/lamawebdev
Facebook: https://www.facebook.com/groups/lamadev
Instagram: https://www.instagram.com/lamawebdev
Discord: https://discord.gg/yKremu4mPr

Source Code

Start Here: https://github.com/safak/e-commerce-ui/tree/starter
Completed: https://github.com/safak/e-commerce-ui/tree/completed

Other Sources:

ShadCN Tutorial: https://youtu.be/SjsQdfvxjL8
ShadCN Tutorial Source Code: https://github.com/safak/shadcn
My VSCode Snippets: https://github.com/safak/snippets

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