# dieukiet5944/finalsproject-ecommerce architecture

> Architecture diagram of the GitHub repository dieukiet5944/finalsproject-ecommerce, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/dieukiet5944/finalsproject-ecommerce
- Repository: https://github.com/dieukiet5944/finalsproject-ecommerce

## Overview

1. **Overall shape**  
   This is a monorepo with two main runtime boundaries: a React client in `client/` and a Node/Express backend in `server/`. There is also a shared file-based data store under `data/db.json`, so the backend is not wired to an external database service in the repo.

2. **Frontend application**  
   The client is a Vite-based React SPA (`client/src/main.jsx`, `client/vite.config.js`). It serves the shopping experience and admin interface from the same frontend codebase.

3. **Frontend feature split**  
   The UI is organized into three areas:  
   - `pages/client`: storefront flow such as home, product list/detail, cart, checkout  
   - `pages/auth`: login and register  
   - `pages/admin`: admin home/dashboard  
   Supporting UI is split into `components/client`, `components/admin`, and shared layout components.

4. **Client-side state and shared behavior**  
   `AuthContext` and `CartContext` manage global session/cart state across the SPA. Shared layout pieces like `Header`, `Footer`, and `UserLayout` define the shell around page content, while small reusable components handle product cards, loading, and success feedback.

5. **Route protection and navigation boundaries**  
   The router layer separates public, authenticated user, and admin-only flows. `ProtectedRoute` and `AdminProtectedRoute` enforce access control on the client, and `menuRoute.js` likely centralizes route/menu definitions for the app’s navigation structure.

6. **Frontend-to-backend communication**  
   `services/productService.js` is the explicit API service layer on the client, acting as the main abstraction for backend data fetching. The rest of the UI likely consumes backend data through this service or direct fetch calls embedded in page/components.

7. **Backend runtime and API surface**  
   The server is an Express-style API (`server/index.js`) split into routers for `users`, `products`, `orders`, and `admin`. This makes the backend the single authority for authentication, product data, and order processing.

8. **Request processing pipeline**  
   Each route group follows a controller/middleware/model pattern: routers dispatch requests, middleware validates or authorizes them, controllers implement the business logic, and models encapsulate data access. This is the main backend execution path an architecture diagram should show.

9. **Domain modules**  
   The model layer is explicitly separated into `admin`, `users`, `products`, `order`, and `cart`, which suggests domain-specific handling rather than a single generic entity layer. Controllers mirror these concerns with dedicated files for admin, product, order, and user operations.

10. **Authentication and authorization**  
   JWT-based auth is implemented in `server/utils/jwt.js`, with middleware such as `checkLoginuser`, `checkLoginadmin`, `checkRegisterUser`, and update/delete guards. The architecture therefore has role-aware access control on both the client and server sides.

11. **Persistence and data flow**  
   Persistent state appears to live in `data/db.json`, so the backend likely reads/writes structured JSON rather than using a separate database server. The data flow is: browser → API route → middleware → controller → model → JSON storage → response.

12. **Operational/deployment concerns**  
   The repo includes GitHub Actions CI (`.github/workflows/ci.yml`) and a root `vercel.json`, indicating automated validation and deployment configuration are part of the system boundary. Those files matter for how the app is built and shipped, even though they do not define runtime business logic.

Main entry points: [`client/src/router`](https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/router) (Routing), [`server/index.js`](https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/server/index.js) (API entry), [`client/src/main.jsx`](https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/client/src/main.jsx) (Main app), [`server/controller`](https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/server/controller) (Controllers)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client SPA"]
  node_client_entry["Main app<br/>React/Vite entry<br/>[main.jsx]"]
  node_client_router["Routing<br/>SPA routes"]
  node_client_context["App state<br/>React context"]
  node_client_layout["Layout shell<br/>UI layout"]
  node_client_pages_store["Storefront pages<br/>React pages"]
  node_client_pages_auth["Auth pages<br/>React pages"]
  node_client_pages_admin["Admin pages<br/>React pages"]
  node_client_components_store["Store components<br/>UI components"]
  node_client_components_admin["Admin widgets<br/>UI components"]
  node_client_api["API service<br/>client service<br/>[productService.js]"]
end

subgraph group_server["API Server"]
  node_server_entry["API entry<br/>Express app<br/>[index.js]"]
  node_server_routes_users["Users route<br/>router<br/>[usersRouter.js]"]
  node_server_routes_products["Products route<br/>router<br/>[productsRouter.js]"]
  node_server_routes_orders["Orders route<br/>router<br/>[ordersRouter.js]"]
  node_server_routes_admin["Admin route<br/>router<br/>[adminRouter.js]"]
  node_server_mw["Guards<br/>middleware"]
  node_server_ctrl["Controllers<br/>business logic"]
  node_server_model["Models<br/>data access"]
  node_server_jwt["JWT utils<br/>auth utility<br/>[jwt.js]"]
end

subgraph group_data["Data Store"]
  node_data_db[("JSON store<br/>file datastore<br/>[db.json]")]
end

subgraph group_ops["Ops"]
  node_ci["CI workflow<br/>github actions<br/>[ci.yml]"]
  node_vercel["Deploy config<br/>hosting config<br/>[vercel.json]"]
end

node_client_entry -->|"uses"| node_client_router
node_client_entry -->|"wraps"| node_client_context
node_client_entry -->|"renders"| node_client_layout
node_client_router -->|"routes"| node_client_pages_store
node_client_router -->|"routes"| node_client_pages_auth
node_client_router -->|"routes"| node_client_pages_admin
node_client_router -.->|"guards"| node_client_router
node_client_pages_store -->|"uses"| node_client_components_store
node_client_pages_admin -->|"uses"| node_client_components_admin
node_client_pages_store -->|"fetches"| node_client_api
node_client_pages_auth -->|"auth"| node_server_routes_users
node_client_pages_admin -->|"admin"| node_server_routes_admin
node_client_components_store -->|"reads state"| node_client_context
node_server_entry -->|"mounts"| node_server_routes_users
node_server_entry -->|"mounts"| node_server_routes_products
node_server_entry -->|"mounts"| node_server_routes_orders
node_server_entry -->|"mounts"| node_server_routes_admin
node_server_routes_users -->|"validates"| node_server_mw
node_server_routes_products -->|"dispatches"| node_server_ctrl
node_server_routes_orders -->|"dispatches"| node_server_ctrl
node_server_routes_admin -->|"dispatches"| node_server_ctrl
node_server_ctrl -->|"uses"| node_server_model
node_server_ctrl -->|"auth"| node_server_jwt
node_server_model -->|"persists"| node_data_db
node_server_mw -->|"verifies"| node_server_jwt
node_ci -.->|"tests"| node_server_entry
node_ci -.->|"tests"| node_client_entry
node_vercel -.->|"deploys"| node_client_entry
node_vercel -.->|"routes"| node_server_entry

click node_client_entry "https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/client/src/main.jsx"
click node_client_router "https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/router"
click node_client_context "https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/context"
click node_client_layout "https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/components/layout"
click node_client_pages_store "https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/pages/client"
click node_client_pages_auth "https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/pages/auth"
click node_client_pages_admin "https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/pages/admin"
click node_client_components_store "https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/components/client"
click node_client_components_admin "https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/components/admin"
click node_client_api "https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/client/src/services/productService.js"
click node_server_entry "https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/server/index.js"
click node_server_routes_users "https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/server/routers/usersRouter.js"
click node_server_routes_products "https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/server/routers/productsRouter.js"
click node_server_routes_orders "https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/server/routers/ordersRouter.js"
click node_server_routes_admin "https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/server/routers/adminRouter.js"
click node_server_mw "https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/server/middleware"
click node_server_ctrl "https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/server/controller"
click node_server_model "https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/server/model"
click node_server_jwt "https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/server/utils/jwt.js"
click node_data_db "https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/data/db.json"
click node_ci "https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/.github/workflows/ci.yml"
click node_vercel "https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/vercel.json"

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_client_entry,node_client_router,node_client_context,node_client_layout,node_client_pages_store,node_client_pages_auth,node_client_pages_admin,node_client_components_store,node_client_components_admin,node_client_api toneBlue
class node_server_entry,node_server_routes_users,node_server_routes_products,node_server_routes_orders,node_server_routes_admin,node_server_mw,node_server_ctrl,node_server_model,node_server_jwt toneAmber
class node_data_db toneMint
class node_ci,node_vercel toneRose
```

## Components

### Client SPA

React/Vite frontend for shopping, auth, and admin screens.

- [Main app](https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/client/src/main.jsx): React/Vite entry · Client bootstrap and top-level application shell. · `client/src/main.jsx`
- [Routing](https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/router): SPA routes · Route boundaries for public, protected, and admin flows. · `client/src/router`
- [App state](https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/context): React context · Global auth and cart state shared across the SPA. · `client/src/context`
- [Layout shell](https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/components/layout): UI layout · Shared header, footer, and authenticated user layout. · `client/src/components/layout`
- [Storefront pages](https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/pages/client): React pages · Home, product listing/detail, cart, and checkout screens. · `client/src/pages/client`
- [Auth pages](https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/pages/auth): React pages · Login and registration flows. · `client/src/pages/auth`
- [Admin pages](https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/pages/admin): React pages · Admin home and dashboard surfaces. · `client/src/pages/admin`
- [Store components](https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/components/client): UI components · Reusable storefront components such as product cards and cart items. · `client/src/components/client`
- [Admin widgets](https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/client/src/components/admin): UI components · Admin dashboard and management widgets. · `client/src/components/admin`
- [API service](https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/client/src/services/productService.js): client service · Frontend abstraction for backend product/data requests. · `client/src/services/productService.js`

### API Server

Express backend with routers, middleware, controllers, and file-backed models.

- [API entry](https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/server/index.js): Express app · Backend server bootstrap and top-level app wiring. · `server/index.js`
- [Users route](https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/server/routers/usersRouter.js): router · User auth and account endpoints. · `server/routers/usersRouter.js`
- [Products route](https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/server/routers/productsRouter.js): router · Product catalog endpoints. · `server/routers/productsRouter.js`
- [Orders route](https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/server/routers/ordersRouter.js): router · Order creation and order workflow endpoints. · `server/routers/ordersRouter.js`
- [Admin route](https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/server/routers/adminRouter.js): router · Admin-specific endpoints. · `server/routers/adminRouter.js`
- [Guards](https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/server/middleware): middleware · Login, role, and request validation middleware. · `server/middleware`
- [Controllers](https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/server/controller): business logic · Request handlers for users, products, orders, and admin actions. · `server/controller`
- [Models](https://github.com/dieukiet5944/finalsproject-ecommerce/tree/main/server/model): data access · Domain models for users, products, cart, order, and admin data. · `server/model`
- [JWT utils](https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/server/utils/jwt.js): auth utility · Token creation and verification helpers. · `server/utils/jwt.js`

### Data Store

Persistent JSON storage used by the backend.

- [JSON store](https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/data/db.json): file datastore · File-based persistent application data. · `data/db.json`

### Ops

Repository-level build, CI, and deployment configuration.

- [CI workflow](https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/.github/workflows/ci.yml): github actions · Automated validation pipeline. · `.github/workflows/ci.yml`
- [Deploy config](https://github.com/dieukiet5944/finalsproject-ecommerce/blob/main/vercel.json): hosting config · Deployment/runtime configuration for the repository. · `vercel.json`

## Connections

- Main app → Routing: uses · Bootstraps the route structure.
- Main app → App state: wraps · Provides app-wide auth and cart state.
- Main app → Layout shell: renders · Uses shared shell components.
- Routing → Storefront pages: routes · Dispatches to storefront pages.
- Routing → Auth pages: routes · Dispatches to authentication pages.
- Routing → Admin pages: routes · Dispatches to admin pages.
- Routing → Routing: guards · Separates public, user, and admin paths.
- Storefront pages → Store components: uses · Composes storefront UI widgets.
- Admin pages → Admin widgets: uses · Composes admin widgets.
- Storefront pages → API service: fetches · Loads backend product data.
- Auth pages → Users route: auth · Sends login and registration requests.
- Admin pages → Admin route: admin · Uses admin-backed operations.
- Store components → App state: reads state · Consumes cart and auth context.
- API entry → Users route: mounts · Registers user routes.
- API entry → Products route: mounts · Registers product routes.
- API entry → Orders route: mounts · Registers order routes.
- API entry → Admin route: mounts · Registers admin routes.
- Users route → Guards: validates · Applies auth and request guards.
- Products route → Controllers: dispatches · Hands off to product controller logic.
- Orders route → Controllers: dispatches · Hands off to order controller logic.
- Admin route → Controllers: dispatches · Hands off to admin controller logic.
- Controllers → Models: uses · Reads and writes domain data through models.
- Controllers → JWT utils: auth · Creates and verifies access tokens.
- Models → JSON store: persists · Stores application state in JSON.
- Guards → JWT utils: verifies · Checks login and role claims.
- CI workflow → API entry: tests · Validates the repository build and API code.
- CI workflow → Main app: tests · Validates the frontend build and linting.
- Deploy config → Main app: deploys · Hosts the frontend application.
- Deploy config → API entry: routes · Supports backend deployment wiring.