Demo: https://full-stack-kohl-eight.vercel.app/ (serve có thể bị delay 50s)
Là một hệ thống thương mại điện tử fullstack hoàn chỉnh, được thiết kế chuyên biệt cho việc kinh doanh các sản phẩm công nghệ Apple bao gồm iPhone, iPad, MacBook, Apple Watch, AirPods và phụ kiện.
Kiến trúc & Công nghệ
Hệ thống được xây dựng theo mô hình Monorepo 3-tier Architecture, bao gồm:
-
Frontend chính: Next.js 16 kết hợp React 19, hỗ trợ Server-Side Rendering (SSR) giúp tối ưu SEO và tốc độ tải trang. Quản lý state bằng Redux Toolkit & React Query, giao diện admin sử dụng Ant Design 6.
-
Backend API: Node.js + Express.js cung cấp RESTful API với xác thực JWT, validation bằng Joi, và hỗ trợ real-time qua Socket.IO.
-
Cơ sở dữ liệu: MongoDB (Mongoose) làm database chính, kết hợp Redis cho caching & quản lý session.
Tính năng nổi bật
-
Mua sắm thông minh: Sản phẩm hỗ trợ nhiều biến thể màu sắc với giá riêng, tìm kiếm realtime, đánh giá & xếp hạng, và gợi ý sản phẩm thông minh.
-
Thanh toán đa dạng: Hỗ trợ COD và thanh toán online qua VNPay, tích hợp mã giảm giá (promo codes) với nhiều loại: giảm theo %, giảm cố định, giới hạn số lượt sử dụng và thời hạn.
-
Chương trình khách hàng thân thiết (Loyalty): Hệ thống tích điểm khi mua hàng, phân hạng thành viên 4 cấp (Bronze → Silver → Gold → Platinum), đổi điểm lấy voucher/miễn phí ship, và chương trình giới thiệu bạn bè (referral) nhận thưởng.
-
Mini Games tương tác: Vòng quay may mắn (Spin Wheel) và thẻ cào (Scratch Card) giúp tăng tương tác người dùng, với xác suất và giới hạn lượt chơi cấu hình linh hoạt.
-
Thông báo real-time: Socket.IO đẩy thông báo tức thì khi có đơn hàng mới, liên hệ mới tới admin panel.
-
Đăng nhập đa phương thức: Hỗ trợ đăng ký/đăng nhập bằng email & Google OAuth.
Quản trị hệ thống
-
Dashboard thống kê: Biểu đồ doanh thu, đơn hàng, sản phẩm bán chạy với Chart.js & Recharts.
-
Phân quyền RBAC chi tiết: Hệ thống Role-Based Access Control với ma trận Permission cho từng resource & action, hỗ trợ gán nhiều role cho một user.
-
Quản lý toàn diện: CRUD sản phẩm, đơn hàng, danh mục, blog, sự kiện giảm giá, slider/banner, mã giảm giá, mini games, và liên hệ khách hàng.
-
Cài đặt hệ thống linh hoạt: Tuỳ chỉnh giao diện (5 layout header, theme màu sắc, font), cấu hình loyalty & mini games, SMTP email, và chế độ bảo trì.
Hiệu năng & Bảo mật
-
Redis caching, nén ảnh client-side trước upload, Next.js SSR, React Query dedup requests.
-
JWT Authentication, bcrypt hash password, CORS protection, Joi input validation, rate limiting.
-
Responsive Design hỗ trợ đa thiết bị với giao diện mobile-friendly.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
HƯỚNG DẪN SỬ DỤNG DỰ ÁN FULLSTACK (Hổ trợ cài đặt qua untraview + custom theo ý (có phí))
1. Tải dự án
cd FullStack
2. Cài đặt Backend
cd backend
npm install
Tạo file .env:
MONGO_URL=mongodb://localhost:27017/ecommerces
PORT=8000
NODE_ENV=DEVELOPER
CLIENT_URL=http://localhost:3000
JWT_SECRET_KEY=your_jwt_secret_key_here
JWT_EXPIRES=7d
Chạy seed:
npm run seed
Chạy backend:
npm run dev
3. Cài đặt Frontend
cd client-next
npm install
Tạo file .env.local:
NEXT_PUBLIC_API_URL=http://localhost:8000/api/v1
NEXT_PUBLIC_SOCKET_URL=http://localhost:8000
Chạy frontend:
npm run dev
4. Truy cập:
http://localhost:3000