# dau-trankhanhdong/trankhanhdong_24ct1_cnpm architecture > Architecture diagram of the GitHub repository dau-trankhanhdong/trankhanhdong_24ct1_cnpm, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-11). It is an AI-made overview: check details against the source. - Interactive diagram: https://gitdiagram.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm - Repository: https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm ## Overview 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: [`src/routes/AppRoutes.jsx`](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/routes/AppRoutes.jsx) (Role Routes), [`src/context/ProductContext.jsx`](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/context/ProductContext.jsx) (Catalog & Stock), [`src/context/OrderContext.jsx`](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/context/OrderContext.jsx) (Orders & Payment), [`src/App.jsx`](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/App.jsx) (React App) ## Diagram (Mermaid) ```mermaid flowchart TD subgraph group_experience["Customer Experience"] node_app["React App
[App.jsx]"] node_routes["Role Routes
[AppRoutes.jsx]"] node_browse["Product Discovery"] node_cartpage["Cart
[TrangGioHang.jsx]"] node_checkout["Checkout
[TrangThanhToan.jsx]"] node_orderhistory["Order History"] node_qr["VietQR Panel"] node_shared["Shared UI"] node_authpages["Sign-in & Signup"] end subgraph group_state["Commerce State"] node_auth["Account & Roles
[AuthContext.jsx]"] node_products["Catalog & Stock
[ProductContext.jsx]"] node_cart["Cart & Vouchers
[CartContext.jsx]"] node_orders["Orders & Payment
[OrderContext.jsx]"] node_seed["Initial Data
[mockData.js]"] end subgraph group_roles["Seller & Admin"] node_seller["Seller Workspace"] node_admin["Admin Workspace"] end subgraph group_api["API & Persistence"] node_apiapp["Express Server
[app.js]"] node_authroutes["Auth API Routes
[authRoutes.js]"] node_authcontroller["Auth Controller
[authController.js]"] node_productroutes["Product API Routes
[productRoutes.js]"] node_productcontroller["Product Controller"] node_healthroutes["Health API Routes
[healthRoutes.js]"] node_healthcontroller["Health Controller"] node_dbpool["MySQL Pool
[db.js]"] node_mysql[("MySQL")] end node_customer(("Customer")) node_customer -->|"uses"| node_routes node_app -->|"renders"| node_routes node_app -->|"provides state"| node_auth node_app -->|"provides state"| node_products node_app -->|"provides state"| node_cart node_app -->|"provides state"| node_orders node_routes -->|"routes to"| node_browse node_routes -->|"routes to"| node_cartpage node_routes -->|"routes to"| node_checkout node_routes -->|"routes to"| node_orderhistory node_routes -->|"routes to"| node_seller node_routes -->|"routes to"| node_admin node_routes -->|"routes to"| node_authpages node_routes -->|"renders"| node_shared node_browse -->|"reads catalog"| node_products node_cartpage -->|"reads cart"| node_cart node_checkout -->|"reads cart"| node_cart node_checkout -->|"creates order"| node_orders node_orderhistory -->|"reads orders"| node_orders node_qr -->|"confirms payment"| node_orders node_seller -->|"manages stock"| node_products node_seller -->|"manages orders"| node_orders node_admin -->|"manages catalog"| node_products node_admin -->|"views orders"| node_orders node_admin -->|"reads accounts"| node_auth node_admin -->|"manages promotions"| node_products node_auth -->|"loads defaults"| node_seed node_products -->|"loads defaults"| node_seed node_cart -->|"reads promotions"| node_products node_orders -->|"deducts stock"| node_products node_authpages -->|"authenticates"| node_auth node_auth -->|"HTTP requests"| node_authroutes node_apiapp -->|"mounts routes"| node_authroutes node_apiapp -->|"mounts routes"| node_productroutes node_apiapp -->|"mounts routes"| node_healthroutes node_authroutes -->|"dispatches"| node_authcontroller node_productroutes -->|"dispatches"| node_productcontroller node_healthroutes -->|"dispatches"| node_healthcontroller node_authcontroller -->|"queries"| node_dbpool node_productcontroller -->|"queries"| node_dbpool node_apiapp -->|"connects on startup"| node_dbpool node_dbpool -->|"connection pool"| node_mysql click node_app "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/App.jsx" click node_routes "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/routes/AppRoutes.jsx" click node_browse "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/tree/main/src/pages/khach-hang" click node_cartpage "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/pages/khach-hang/TrangGioHang.jsx" click node_checkout "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/pages/khach-hang/TrangThanhToan.jsx" click node_orderhistory "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/pages/khach-hang/TrangLichSuDonHang.jsx" click node_qr "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/components/khach-hang/KhungThanhToanVietQR.jsx" click node_shared "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/tree/main/src/components/dung-chung" click node_auth "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/context/AuthContext.jsx" click node_products "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/context/ProductContext.jsx" click node_cart "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/context/CartContext.jsx" click node_orders "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/context/OrderContext.jsx" click node_seed "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/data/mockData.js" click node_seller "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/tree/main/src/pages/nguoi-ban" click node_admin "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/tree/main/src/pages/quan-tri" click node_authpages "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/tree/main/src/pages/xac-thuc" click node_apiapp "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/server/src/app.js" click node_authroutes "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/server/src/routes/authRoutes.js" click node_authcontroller "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/server/src/controllers/authController.js" click node_productroutes "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/server/src/routes/productRoutes.js" click node_productcontroller "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/server/src/controllers/productController.js" click node_healthroutes "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/server/src/routes/healthRoutes.js" click node_healthcontroller "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/server/src/controllers/healthController.js" click node_dbpool "https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/server/src/config/db.js" classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554 classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337 classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81 classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a class node_app,node_routes,node_browse,node_cartpage,node_checkout,node_orderhistory,node_qr,node_shared,node_authpages toneBlue class node_auth,node_products,node_cart,node_orders,node_seed toneAmber class node_seller,node_admin toneMint class node_apiapp,node_authroutes,node_authcontroller,node_productroutes,node_productcontroller,node_healthroutes,node_healthcontroller,node_dbpool,node_mysql toneRose class node_customer toneIndigo ``` ## Components ### Customer Experience - [React App](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/App.jsx): `src/App.jsx` - [Role Routes](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/routes/AppRoutes.jsx): `src/routes/AppRoutes.jsx` - [Product Discovery](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/tree/main/src/pages/khach-hang): `src/pages/khach-hang` - [Cart](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/pages/khach-hang/TrangGioHang.jsx): `src/pages/khach-hang/TrangGioHang.jsx` - [Checkout](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/pages/khach-hang/TrangThanhToan.jsx): `src/pages/khach-hang/TrangThanhToan.jsx` - [Order History](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/pages/khach-hang/TrangLichSuDonHang.jsx): `src/pages/khach-hang/TrangLichSuDonHang.jsx` - [VietQR Panel](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/components/khach-hang/KhungThanhToanVietQR.jsx): `src/components/khach-hang/KhungThanhToanVietQR.jsx` - [Shared UI](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/tree/main/src/components/dung-chung): `src/components/dung-chung` - [Sign-in & Signup](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/tree/main/src/pages/xac-thuc): `src/pages/xac-thuc` ### Commerce State - [Account & Roles](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx` - [Catalog & Stock](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/context/ProductContext.jsx): `src/context/ProductContext.jsx` - [Cart & Vouchers](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/context/CartContext.jsx): `src/context/CartContext.jsx` - [Orders & Payment](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/context/OrderContext.jsx): `src/context/OrderContext.jsx` - [Initial Data](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/src/data/mockData.js): `src/data/mockData.js` ### Seller & Admin - [Seller Workspace](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/tree/main/src/pages/nguoi-ban): `src/pages/nguoi-ban` - [Admin Workspace](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/tree/main/src/pages/quan-tri): `src/pages/quan-tri` ### API & Persistence - [Express Server](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/server/src/app.js): `server/src/app.js` - [Auth API Routes](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/server/src/routes/authRoutes.js): `server/src/routes/authRoutes.js` - [Auth Controller](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/server/src/controllers/authController.js): `server/src/controllers/authController.js` - [Product API Routes](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/server/src/routes/productRoutes.js): `server/src/routes/productRoutes.js` - [Product Controller](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/server/src/controllers/productController.js): `server/src/controllers/productController.js` - [Health API Routes](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/server/src/routes/healthRoutes.js): `server/src/routes/healthRoutes.js` - [Health Controller](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/server/src/controllers/healthController.js): `server/src/controllers/healthController.js` - [MySQL Pool](https://github.com/dau-trankhanhdong/trankhanhdong_24ct1_cnpm/blob/main/server/src/config/db.js): `server/src/config/db.js` - **MySQL** ### Other components - **Customer** ## Connections - Customer → Role Routes: uses (evidence: `src/routes/AppRoutes.jsx`) - React App → Role Routes: renders (evidence: `src/App.jsx`) - React App → Account & Roles: provides state (evidence: `src/App.jsx`) - React App → Catalog & Stock: provides state (evidence: `src/App.jsx`) - React App → Cart & Vouchers: provides state (evidence: `src/App.jsx`) - React App → Orders & Payment: provides state (evidence: `src/App.jsx`) - Role Routes → Product Discovery: routes to (evidence: `src/routes/AppRoutes.jsx`) - Role Routes → Cart: routes to (evidence: `src/routes/AppRoutes.jsx`) - Role Routes → Checkout: routes to (evidence: `src/routes/AppRoutes.jsx`) - Role Routes → Order History: routes to (evidence: `src/routes/AppRoutes.jsx`) - Role Routes → Seller Workspace: routes to (evidence: `src/routes/AppRoutes.jsx`) - Role Routes → Admin Workspace: routes to (evidence: `src/routes/AppRoutes.jsx`) - Role Routes → Sign-in & Signup: routes to (evidence: `src/routes/AppRoutes.jsx`) - Role Routes → Shared UI: renders (evidence: `src/routes/AppRoutes.jsx`) - Product Discovery → Catalog & Stock: reads catalog (evidence: `src/pages/khach-hang/TrangChu.jsx`) - Cart → Cart & Vouchers: reads cart (evidence: `src/pages/khach-hang/TrangGioHang.jsx`) - Checkout → Cart & Vouchers: reads cart (evidence: `src/pages/khach-hang/TrangThanhToan.jsx`) - Checkout → Orders & Payment: creates order (evidence: `src/pages/khach-hang/TrangThanhToan.jsx`) - Order History → Orders & Payment: reads orders (evidence: `src/pages/khach-hang/TrangLichSuDonHang.jsx`) - VietQR Panel → Orders & Payment: confirms payment (evidence: `src/components/khach-hang/KhungThanhToanVietQR.jsx`) - Seller Workspace → Catalog & Stock: manages stock (evidence: `src/pages/nguoi-ban/SanPhamNguoiBan.jsx`) - Seller Workspace → Orders & Payment: manages orders (evidence: `src/pages/nguoi-ban/DonHangNguoiBan.jsx`) - Admin Workspace → Catalog & Stock: manages catalog (evidence: `src/pages/quan-tri/QuanLySanPham.jsx`) - Admin Workspace → Orders & Payment: views orders (evidence: `src/pages/quan-tri/TongQuanQuanTri.jsx`) - Admin Workspace → Account & Roles: reads accounts (evidence: `src/pages/quan-tri/TongQuanQuanTri.jsx`) - Admin Workspace → Catalog & Stock: manages promotions (evidence: `src/pages/quan-tri/QuanLyKhuyenMai.jsx`) - Account & Roles → Initial Data: loads defaults (evidence: `src/context/AuthContext.jsx`) - Catalog & Stock → Initial Data: loads defaults (evidence: `src/context/ProductContext.jsx`) - Cart & Vouchers → Catalog & Stock: reads promotions (evidence: `src/context/CartContext.jsx`) - Orders & Payment → Catalog & Stock: deducts stock (evidence: `src/context/OrderContext.jsx`) - Sign-in & Signup → Account & Roles: authenticates (evidence: `src/pages/xac-thuc/TrangDangNhap.jsx`) - Account & Roles → Auth API Routes: HTTP requests (evidence: `src/context/AuthContext.jsx`) - Express Server → Auth API Routes: mounts routes (evidence: `server/src/app.js`) - Express Server → Product API Routes: mounts routes (evidence: `server/src/app.js`) - Express Server → Health API Routes: mounts routes (evidence: `server/src/app.js`) - Auth API Routes → Auth Controller: dispatches (evidence: `server/src/routes/authRoutes.js`) - Product API Routes → Product Controller: dispatches (evidence: `server/src/routes/productRoutes.js`) - Health API Routes → Health Controller: dispatches (evidence: `server/src/routes/healthRoutes.js`) - Auth Controller → MySQL Pool: queries (evidence: `server/src/controllers/authController.js`) - Product Controller → MySQL Pool: queries (evidence: `server/src/controllers/productController.js`) - Express Server → MySQL Pool: connects on startup (evidence: `server/src/app.js`) - MySQL Pool → MySQL: connection pool (evidence: `README.md`)