Back to Projects

clothy-store

TypeScript
Source Code

Clothy Store 👕

Dự án e-commerce demo gồm 2 ứng dụng Next.js hoàn chỉnh:

  • client — Cửa hàng bán đồ thời trang (cho khách hàng): trang chủ, danh mục sản phẩm, chi tiết sản phẩm, giỏ hàng & thanh toán.
  • admin — Dashboard quản trị (cho chủ shop): Admin Dashboard, quản lý Products, Users, Payments.

Lưu ý: Dữ liệu hiện tại là tạm thời (mock data) — chưa kết nối backend/database.

📸 Screenshot

| Trang chủ | Chi tiết sản phẩm | Giỏ hàng | | --- | --- | --- | | <img src="demo/home.png" alt="Home" width="240" /> | <img src="demo/detail.png" alt="Detail" width="240" /> | <img src="demo/cart.png" alt="Cart" width="240" /> |

| Dashboard | Quản lý sản phẩm | Quản lý người dùng | | --- | --- | --- | | <img src="demo/dashboard.png" alt="Dashboard" width="240" /> | <img src="demo/products.png" alt="Products" width="240" /> | <img src="demo/users.png" alt="Users" width="240" /> |

✨ Tính năng chính

Frontend — client

  • Trang chủ + danh mục sản phẩm, lọc theo category (?category=)
  • Trang chi tiết sản phẩm theo id, hiệu ứng kính lúp (zoom) khi hover ảnh
  • Chọn size/color, thêm vào giỏ, cập nhật số lượng
  • Giỏ hàng lưu localStorage (Zustand persist) + toast thông báo
  • Form thanh toán / vận chuyển với validate (React Hook Form + Zod)
  • Tích hợp hình ảnh thanh toán: Stripe, VISA, MoMo, ZaloPay

Admin — admin

  • Dashboard thống kê với biểu đồ (Recharts)
  • Products / Users / Payments — bảng dữ liệu với search, sort, chọn hàng loạt (TanStack Table)
  • Avatar, dropdown actions, UI components (shadcn/ui + Radix UI)
  • Hỗ trợ chế độ dark mode (next-themes)

🛠 Tech Stack

Cả hai app

| Công nghệ | Phiên bản | | --------- | --------- | | Next.js (App Router) | client 15.4.5 · admin 15.3.2 | | React | 19 | | TypeScript | 5 | | Tailwind CSS | v4 | | shadcn/ui + Radix UI | ✓ | | pnpm | workspace pnpm-lock.yaml |

client đặc trưng

  • Zustand + persist — quản lý giỏ hàng
  • react-hook-form + Zod v4 — validate form
  • react-toastify — thông báo
  • recharts, lucide-react

admin đặc trưng

  • @tanstack/react-table — bảng dữ liệu
  • recharts + react-activity-calendar + react-day-picker
  • react-hook-form + Zod
  • next-themes — dark mode
  • lodash

🚀 Hướng dẫn chạy

# 1. Khởi chạy Client (frontend)
cd client
pnpm install   # hoặc npm install
pnpm dev       # mở http://localhost:3000

# 2. Khởi chạy Admin (dashboard, ở terminal riêng)
cd admin
pnpm install
pnpm dev       # mở http://localhost:3001 (hoặc cổng khác)

📂 Cấu trúc thư mục

├── admin/        # Dashboard quản trị (Next.js + shadcn/ui + TanStack Table)
├── client/       # Store frontend (Next.js + Zustand + Tailwind)
├── demo/         # Screenshot các trang trong README
└── README.md

0%

Loading...