How dau-trankhanhdong/trankhanhdong_24ct1_cnpm works
GiaDụngSmart is a multi-role smart-home-goods ecommerce site: customers browse products, manage a cart, check out and follow orders, while sellers and administrators manage catalog, inventory, orders, users and promotions. React contexts hold the frontend’s account, product, cart and order state; checkout can confirm VietQR payment. An Express/MySQL backend also provides authentication and product APIs. The README documents broader capabilities, but not every frontend-to-backend connection; unshown connections are omitted rather than inferred.
Main entry points: AppRoutes.jsx Role Routes · ProductContext.jsx Catalog & Stock · OrderContext.jsx Orders & Payment · App.jsx React App
Components 26
Customer Experience
- React App
src/App.jsx - Role Routes
src/routes/AppRoutes.jsx - Product Discovery
src/pages/khach-hang - Cart
src/pages/khach-hang/TrangGioHang.jsx - Checkout
src/pages/khach-hang/TrangThanhToan.jsx - Order History
src/pages/khach-hang/TrangLichSuDonHang.jsx - VietQR Panel
src/components/khach-hang/KhungThanhToanVietQR.jsx - Shared UI
src/components/dung-chung - Sign-in & Signup
src/pages/xac-thuc
Commerce State
- Account & Roles
src/context/AuthContext.jsx - Catalog & Stock
src/context/ProductContext.jsx - Cart & Vouchers
src/context/CartContext.jsx - Orders & Payment
src/context/OrderContext.jsx - Initial Data
src/data/mockData.js
Seller & Admin
- Seller Workspace
src/pages/nguoi-ban - Admin Workspace
src/pages/quan-tri
API & Persistence
- Express Server
server/src/app.js - Auth API Routes
server/src/routes/authRoutes.js - Auth Controller
server/src/controllers/authController.js - Product API Routes
server/src/routes/productRoutes.js - Product Controller
server/src/controllers/productController.js - Health API Routes
server/src/routes/healthRoutes.js - Health Controller
server/src/controllers/healthController.js - MySQL Pool
server/src/config/db.js - MySQL
Other components
- Customer
Connections 42
- Customer → Role Routes: uses
src/routes/AppRoutes.jsx - React App → Role Routes: renders
src/App.jsx - React App → Account & Roles: provides state
src/App.jsx - React App → Catalog & Stock: provides state
src/App.jsx - React App → Cart & Vouchers: provides state
src/App.jsx - React App → Orders & Payment: provides state
src/App.jsx - Role Routes → Product Discovery: routes to
src/routes/AppRoutes.jsx - Role Routes → Cart: routes to
src/routes/AppRoutes.jsx - Role Routes → Checkout: routes to
src/routes/AppRoutes.jsx - Role Routes → Order History: routes to
src/routes/AppRoutes.jsx - Role Routes → Seller Workspace: routes to
src/routes/AppRoutes.jsx - Role Routes → Admin Workspace: routes to
src/routes/AppRoutes.jsx - Role Routes → Sign-in & Signup: routes to
src/routes/AppRoutes.jsx - Role Routes → Shared UI: renders
src/routes/AppRoutes.jsx - Product Discovery → Catalog & Stock: reads catalog
src/pages/khach-hang/TrangChu.jsx - Cart → Cart & Vouchers: reads cart
src/pages/khach-hang/TrangGioHang.jsx - Checkout → Cart & Vouchers: reads cart
src/pages/khach-hang/TrangThanhToan.jsx - Checkout → Orders & Payment: creates order
src/pages/khach-hang/TrangThanhToan.jsx - Order History → Orders & Payment: reads orders
src/pages/khach-hang/TrangLichSuDonHang.jsx - VietQR Panel → Orders & Payment: confirms payment
src/components/khach-hang/KhungThanhToanVietQR.jsx - Seller Workspace → Catalog & Stock: manages stock
src/pages/nguoi-ban/SanPhamNguoiBan.jsx - Seller Workspace → Orders & Payment: manages orders
src/pages/nguoi-ban/DonHangNguoiBan.jsx - Admin Workspace → Catalog & Stock: manages catalog
src/pages/quan-tri/QuanLySanPham.jsx - Admin Workspace → Orders & Payment: views orders
src/pages/quan-tri/TongQuanQuanTri.jsx - Admin Workspace → Account & Roles: reads accounts
src/pages/quan-tri/TongQuanQuanTri.jsx - Admin Workspace → Catalog & Stock: manages promotions
src/pages/quan-tri/QuanLyKhuyenMai.jsx - Account & Roles → Initial Data: loads defaults
src/context/AuthContext.jsx - Catalog & Stock → Initial Data: loads defaults
src/context/ProductContext.jsx - Cart & Vouchers → Catalog & Stock: reads promotions
src/context/CartContext.jsx - Orders & Payment → Catalog & Stock: deducts stock
src/context/OrderContext.jsx - Sign-in & Signup → Account & Roles: authenticates
src/pages/xac-thuc/TrangDangNhap.jsx - Account & Roles → Auth API Routes: HTTP requests
src/context/AuthContext.jsx - Express Server → Auth API Routes: mounts routes
server/src/app.js - Express Server → Product API Routes: mounts routes
server/src/app.js - Express Server → Health API Routes: mounts routes
server/src/app.js - Auth API Routes → Auth Controller: dispatches
server/src/routes/authRoutes.js - Product API Routes → Product Controller: dispatches
server/src/routes/productRoutes.js - Health API Routes → Health Controller: dispatches
server/src/routes/healthRoutes.js - Auth Controller → MySQL Pool: queries
server/src/controllers/authController.js - Product Controller → MySQL Pool: queries
server/src/controllers/productController.js - Express Server → MySQL Pool: connects on startup
server/src/app.js - MySQL Pool → MySQL: connection pool
README.md