Dermify Client

Dermify Client là hệ thống giao diện người dùng (frontend) cho 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ổ 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 này được xây dựng dưới dạng Single Page Application (SPA) sử dụng React và Vite, nhằm mục đích cung cấp 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 cho quản trị viên.

Các Tính Năng

Module 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
  • Tự động làm mới token

• 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ỏ hàng
  • Cập nhật số lượng
  • Xóa sản phẩm
  • Tự động tính tổng tiền

• Đặ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á

Module Quản Trị Viên

• 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 Danh mục
  • Quản lý cấu trúc danh mục phân cấp

• 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

Công Nghệ Sử Dụng

Frontend Core

• React 18+
• Vite
• JavaScript ES6+

Định tuyến (Routing)

• React Router DOM v6

Giao tiếp API

• Axios
• Axios Interceptors

Quản lý trạng thái (State Management)

• React Context API

Framework UI

• Bootstrap 5
• React Bootstrap
• Sass (SCSS)

Kiến Trúc Hệ Thống

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

Luồng Dữ Liệu

Người dùng
 ↓
React Components
 ↓
Context API / Custom Hooks
 ↓
Axios Client
 ↓
REST API
 ↓
Backend Server
 ↓
MongoDB

Cấu Trúc Dự Án

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

Hướng Dẫn Cài Đặt

Yêu Cầu Hệ Thống

• Node.js >= 18
• npm >= 9
• Dermify Server phải đang chạy

Clone Repository

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

Cài đặt các Dependencies

npm install

Cấu Hình Môi Trường

Tạo tệp .env trong thư mục gốc của dự án:

VITE_API_URL=http://localhost:5000/api

Chạy Máy Chủ Phát Triển

npm run dev

Build cho Môi Trường Sản Xuất

npm run build

Các API Endpoints

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

/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ừ Seed Database của Backend.

Vai trò	Tài khoản
Quản trị viên	Từ dữ liệu seed
Nhân viên	Từ dữ liệu seed
Khách hàng	Từ dữ liệu seed

Thành Viên Nhóm

Vai trò	Thành viên	Hồ sơ GitHub
Trưởng nhóm & Kiến trúc Frontend	Nguyễn Quốc Tịnh	@quoctinh-dev
Lập trình viên Frontend	Tuấn Kiệt	@TuanKiet1102
UI/UX & Lập trình viên Frontend	Trần Thị Minh Thư	@tranthiminhthu2004

Thông Tin Khóa Học

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 lần cuối: 2026-05-29

Giấy phép

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