TechMart - Website Bán Điện Thoại
Website thương mại điện tử bán điện thoại xây dựng bằng React + TypeScript (Frontend) và Node.js + Express + TypeScript (Backend), áp dụng Clean Architecture.
Kiến Trúc
Backend - Clean Architecture
-
Domain: entities, repository interfaces
-
Application: use-cases, services, mappers
-
Infrastructure: database, repository implementations
-
Presentation: controllers, routes, middlewares
Frontend - Feature-Based Architecture
-
Shared components
-
Feature modules: products, cart, auth, orders, admin, payment, wallet
-
Pages, services, store (Zustand), types
Công Nghệ Sử Dụng
Backend
Frontend
Tính Năng Khách Hàng
Trang chủ
-
Banner slider động
-
Sản phẩm nổi bật, bán chạy, mới nhất, giảm giá
-
Hiển thị danh mục và thương hiệu nổi bật
Mua sắm
-
Tìm kiếm và lọc đa tiêu chí
-
Sắp xếp, phân trang
-
Chi tiết sản phẩm: gallery, thông số, giá giảm
-
Chọn biến thể màu/dung lượng, kiểm tra tồn kho
-
Thêm giỏ hàng / mua ngay
Giỏ hàng
Thanh toán
-
Quản lý địa chỉ giao hàng
-
Áp mã giảm giá
-
Hỗ trợ COD, Ví TechMart, VNPay
-
Trang kết quả thanh toán VNPay
Đơn hàng
Đánh giá & Hoàn trả
-
Tạo yêu cầu hoàn trả kèm ảnh
-
Theo dõi tiến trình hoàn trả
-
Đánh giá sản phẩm có ảnh và badge “đã mua hàng”
Tài khoản
-
Đăng ký/đăng nhập JWT
-
Quên mật khẩu bằng OTP
-
Cập nhật hồ sơ, avatar, banner
-
Quản lý sổ địa chỉ
-
Chọn địa chỉ qua API Việt Nam
-
Hiển thị hạng thành viên
Ví TechMart
-
Xem số dư
-
Nạp tiền qua VNPay
-
Lịch sử giao dịch
Trang nội dung
Tính Năng Quản Trị
Dashboard
-
KPI đơn hàng, doanh thu, người dùng
-
Biểu đồ thống kê
-
Theo dõi tồn kho, đơn gần đây, top sản phẩm
Quản lý sản phẩm
Danh mục & Thương hiệu
Đơn hàng & Hoàn trả
Marketing & Nội dung
-
Voucher/coupon
-
Banner quảng cáo
Quản lý người dùng & đánh giá
Quản lý ví
Luồng Nghiệp Vụ
Đơn hàng
pending → confirmed → shipping → delivered → completed
Ngoại lệ
-
Hủy trước khi giao
-
Hoàn trả trong 7 ngày
Tự động hóa
-
Scheduler cập nhật trạng thái đơn
-
Đơn VNPay/Ví xác nhận nhanh
-
Tự động completed sau thời gian quy định
-
Hoàn tiền về Ví TechMart
Phân Quyền
-
customer: mua hàng, quản lý tài khoản
-
admin: toàn quyền hệ thống
-
staff: quản lý nội dung, đánh giá, hoàn trả
-
warehouse: quản lý sản phẩm, tồn kho, trạng thái đơn
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
Hướng Dẫn Cài Đặt TechMart
1. Yêu Cầu Hệ Thống
2. Nhận Source Code
Sau khi thanh toán thành công, khách hàng sẽ được cung cấp:
3. Cài Đặt Nhanh Bằng Docker
Bước 1: Clone source code
git clone
Bước 2: Chạy toàn bộ services
docker compose up -d
Bước 3: Truy cập hệ thống
4. Cài Đặt Thủ Công (Không Docker)
Bước 1: Clone source code
git clone
cd techmart
Bước 2: Cài và chạy Backend
cd backendnpm install
cp .env.example .env
Cấu hình file backend/.env:
DB_HOST=
DB_NAME=
DB_USER=
DB_PASSWORD=
JWT_SECRET=
Tuỳ chọn:
VNPAY_*SMTP_*
Chạy backend:
npm run dev
Backend mặc định:
http://localhost:5001
Bước 3: Cài và chạy Frontend
Mở terminal mới:
cd frontendnpm install
cp .env.example .env
Kiểm tra file frontend/.env:
VITE_API_URL=http://localhost:5000/api
Chạy frontend:
npm run dev
Frontend mặc định:
http://localhost:5173
5. Tài Khoản Demo
Admin
Customer
Password dùng chung:
password
6. Lệnh Thường Dùng
Docker
docker compose up -ddocker compose downdocker compose logs -f backenddocker compose restart backenddocker compose up -d --build
Frontend
npm run devnpm run buildnpm run lint
Backend
npm run devnpm run build
7. Lỗi Thường Gặp
Đăng nhập luôn sai
Kiểm tra:
VITE_API_URL=http://localhost:5001/api
Frontend báo lỗi CORS
Thêm:
http://localhost:5173
vào biến CORS_ORIGIN trong backend/.env.
Backend container tự tắt
Thường do thiếu:
JWT_SECRET
Login xong bị trang trắng
Xóa localStorage trên trình duyệt rồi đăng nhập lại.
8. Hỗ Trợ
Nếu gặp lỗi trong quá trình cài đặt hoặc triển khai, vui lòng liên hệ để được hỗ trợ kỹ thuật.
Nguồn: Topcode.vn
