🧴 Dermify Client - Giao Diện Thương Mại Điện Tử Mỹ Phẩm

Dermify Client là hệ thống giao diện người dùng (Frontend) thuộc dự án Dermify - Nền tảng thương mại điện tử mỹ phẩm, được phát triển trong khuôn khổ Đồ án môn học Xây dựng phần mềm / Phát triển ứng dụng Web tại Trường Đại học Công nghệ Sài Gòn (STU).

Ứng dụng được xây dựng theo mô hình Single Page Application (SPA) với React và Vite, tập trung mang lại trải nghiệm mua sắm mỹ phẩm trực tuyến hiện đại cho khách hàng và hệ thống quản trị trực quan dành cho quản trị viên.

---

🚀 Công nghệ sử dụng

Frontend Core

• React 19
• Vite
• JavaScript ES6+

Routing

• React Router DOM v7

API Communication

• Axios
• Axios Interceptors

State Management

• React Context API

UI Framework

• Bootstrap 5
• React Bootstrap
• Sass (SCSS)

Icons

• Lucide React
• Bootstrap Icons

---

✨ Chức năng hệ thống

👤 Phân hệ khách hàng

Xác thực người dùng

• Đăng ký tài khoản
• Đăng nhập
• Đăng xuất
• Quên mật khẩu
• Đặt lại mật khẩu
• Refresh Token tự động

Quản lý tài khoản

• Cập nhật thông tin cá nhân
• Cập nhật ảnh đại diện
• Quản lý địa chỉ giao hàng

Quản lý sản phẩm

• Xem danh sách sản phẩm

• Xem chi tiết sản phẩm

• Tìm kiếm sản phẩm

• Lọc theo:

  • Danh mục
  • Thương hiệu
  • Khoảng giá
  • Đánh giá

Giỏ hàng

• Thêm sản phẩm vào giỏ
• Cập nhật số lượng
• Xóa sản phẩm
• Tính tổng tiền tự động

Đặt hàng

• Chọn địa chỉ giao hàng
• Chọn phương thức thanh toán
• Tạo đơn hàng

Đánh giá sản phẩm

• Thêm đánh giá
• Chỉnh sửa đánh giá
• Xóa đánh giá
• Xem lịch sử đánh giá

---

🛠️ Phân hệ quản trị

Dashboard

• Thống kê tổng quan hệ thống
• Theo dõi hoạt động kinh doanh

Quản lý sản phẩm

• Thêm sản phẩm
• Chỉnh sửa sản phẩm
• Ẩn/Hiện sản phẩm
• Xóa sản phẩm

Quản lý danh mục

• CRUD Category
• Quản lý cấu trúc phân cấp danh mục

Quản lý đơn hàng

• Tiếp nhận đơn hàng
• Cập nhật trạng thái đơn hàng
• Theo dõi lịch sử xử lý

Quản lý người dùng

• Danh sách người dùng
• Cập nhật trạng thái tài khoản

---

📐 Kiến trúc hệ thống

Mô hình Client - Server

┌─────────────────────┐
│   Dermify Client    │
│     React + Vite    │
└──────────┬──────────┘
           │
           │ REST API
           ▼
┌─────────────────────┐
│   Dermify Server    │
│  Node.js + Express  │
└──────────┬──────────┘
           │
           │ Mongoose
           ▼
┌─────────────────────┐
│      MongoDB        │
└─────────────────────┘

Luồng xử lý dữ liệu

User
 ↓
React Components
 ↓
Context API / Custom Hooks
 ↓
Axios Client
 ↓
REST API
 ↓
Backend Server
 ↓
MongoDB

---

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

dermify-client/
│
├── public/
│
├── src/
│   ├── api/
│   ├── assets/
│   ├── components/
│   ├── context/
│   ├── hooks/
│   ├── layouts/
│   ├── pages/
│   ├── routes/
│   ├── styles/
│   └── utils/
│
├── .env
├── package.json
└── vite.config.js

---

⚙️ Cài đặt dự án

Yêu cầu hệ thống

• Node.js >= 18
• npm >= 9
• Dermify Server đang hoạt động

---

Clone Repository

git clone https://github.com/quoctinh-dev/dermify-client.git

cd dermify-client

---

Cài đặt thư viện

npm install

---

Cấu hình môi trường

Tạo file .env

VITE_API_URL=http://localhost:5000/api

---

Chạy môi trường phát triển

npm run dev

---

Build Production

npm run build

---

🔐 Kết nối API

Frontend giao tiếp với Backend thông qua các RESTful API:

/api/auth
/api/users
/api/categories
/api/brands
/api/products
/api/cart
/api/orders
/api/reviews

---

🧪 Tài khoản kiểm thử

Dữ liệu đăng nhập được đồng bộ từ hệ thống Seed Database của Backend.

Vai trò	Tài khoản
Admin	Theo dữ liệu seed
Staff	Theo dữ liệu seed
Customer	Theo dữ liệu seed

---

🤝 Thành viên thực hiện

Vai trò	Thành viên	GitHub
Team Leader & Frontend Architect	Nguyễn Quốc Tịnh	@quoctinh-dev
Frontend Developer	Tuấn Kiệt	@TuanKiet1102
UI/UX & Frontend Developer	Trần Thị Minh Thư	@tranthiminhthu2004

---

🎓 Thông tin học phần

Trường: Đại học Công nghệ Sài Gòn (STU)

Môn học: Xây dựng phần mềm / Phát triển ứng dụng Web

Phiên bản: 1.0.0

Cập nhật: 29/05/2026

---

📄 Giấy phép

Dự án được phát triển phục vụ mục đích học tập và nghiên cứu trong khuôn khổ môn học tại STU.