# duyphan2501/mern-ecommerce-electronic-devices architecture

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

- Interactive diagram: https://gitdiagram.com/duyphan2501/mern-ecommerce-electronic-devices
- Repository: https://github.com/duyphan2501/mern-ecommerce-electronic-devices

## Overview

This is a MERN ecommerce system with a customer storefront, an admin dashboard, and an Express API. The main customer journey is browsing products, building a guest or signed-in cart, checking out, paying, and tracking the resulting order; Redis supports cart and stock reservations while MongoDB persists application data. The admin dashboard covers catalog, orders, inventory, and site content. The graph combines documented capabilities with sampled routing and service code; unsampled subsystem wiring is shown only at the documented or directory level.

Main entry points: [`client/src/App.jsx`](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/client/src/App.jsx) (Storefront routes), [`server/controller`](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/tree/main/server/controller) (Request controllers), [`server/service`](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/tree/main/server/service) (Domain services), [`admin/src/App.jsx`](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/admin/src/App.jsx) (Dashboard routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Customer storefront"]
  node_storefront_app["Storefront routes<br/>[App.jsx]"]
  node_catalog_pages["Product browsing<br/>[ProductPage.jsx]"]
  node_cart_checkout["Cart and checkout<br/>[Checkout.jsx]"]
  node_account_orders["Account and tracking<br/>[OrderTracking.jsx]"]
  node_client_stores["Client state"]
end

subgraph group_admin["Admin operations"]
  node_admin_app["Dashboard routes<br/>[App.jsx]"]
  node_admin_ops["Catalog and operations"]
  node_admin_content["Site content editing<br/>[ServiceForm.jsx]"]
  node_admin_stores["Admin state"]
end

subgraph group_backend["API and domain"]
  node_api_entry["REST API entry<br/>[index.js]"]
  node_api_routes["API routes"]
  node_controllers["Request controllers"]
  node_domain_services["Domain services"]
  node_auth_tokens["JWT and sessions<br/>[jwt_service.js]"]
  node_inventory_worker["Reservation reclaim"]
end

subgraph group_state["Persistence and integrations"]
  node_mongo[("MongoDB")]
  node_redis[("Redis<br/>[init.redis.js]")]
  node_payos{{"PayOS"}}
  node_cloudinary{{"Cloudinary"}}
  node_email["Email service<br/>[emails.js]"]
end

node_customer(("Customer"))
node_admin_user(("Admin user"))

node_customer -->|"uses"| node_storefront_app
node_storefront_app -->|"routes to"| node_catalog_pages
node_storefront_app -->|"routes to"| node_cart_checkout
node_storefront_app -->|"routes to"| node_account_orders
node_storefront_app -->|"loads state"| node_client_stores
node_catalog_pages -->|"reads catalog"| node_client_stores
node_cart_checkout -->|"updates cart"| node_client_stores
node_account_orders -->|"reads account"| node_client_stores
node_admin_user -->|"uses"| node_admin_app
node_admin_app -->|"routes to"| node_admin_ops
node_admin_app -->|"routes to"| node_admin_content
node_admin_ops -->|"uses state"| node_admin_stores
node_admin_content -->|"saves content"| node_admin_stores
node_storefront_app -->|"calls REST API"| node_api_entry
node_admin_app -->|"calls REST API"| node_api_entry
node_api_entry -->|"dispatches"| node_api_routes
node_api_routes -->|"dispatches"| node_controllers
node_controllers -->|"invokes"| node_domain_services
node_controllers -->|"reads and writes"| node_mongo
node_domain_services -->|"reads and writes"| node_mongo
node_domain_services -->|"reserves stock"| node_redis
node_domain_services -->|"creates payment link"| node_payos
node_payos -->|"sends webhook"| node_api_entry
node_controllers -->|"issues tokens"| node_auth_tokens
node_domain_services -->|"publishes order email"| node_email
node_controllers -->|"uploads media"| node_cloudinary
node_inventory_worker -->|"reclaims expired holds"| node_redis
node_inventory_worker -->|"updates inventory"| node_mongo

click node_storefront_app "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/client/src/App.jsx"
click node_catalog_pages "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/client/src/pages/ProductPage.jsx"
click node_cart_checkout "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/client/src/pages/Checkout.jsx"
click node_account_orders "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/client/src/pages/OrderTracking.jsx"
click node_client_stores "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/tree/main/client/src/store"
click node_admin_app "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/admin/src/App.jsx"
click node_admin_ops "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/tree/main/admin/src/Pages"
click node_admin_content "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/admin/src/Pages/Services/ServiceForm.jsx"
click node_admin_stores "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/tree/main/admin/src/store"
click node_api_entry "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/server/index.js"
click node_api_routes "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/tree/main/server/routes"
click node_controllers "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/tree/main/server/controller"
click node_domain_services "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/tree/main/server/service"
click node_auth_tokens "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/server/helper/jwt_service.js"
click node_mongo "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/tree/main/server/model"
click node_redis "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/server/config/init.redis.js"
click node_inventory_worker "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/server/workers/inventory.worker.js"
click node_email "https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/server/mail/emails.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_storefront_app,node_catalog_pages,node_cart_checkout,node_account_orders,node_client_stores,node_admin_user toneBlue
class node_admin_app,node_admin_ops,node_admin_content,node_admin_stores toneAmber
class node_api_entry,node_api_routes,node_controllers,node_domain_services,node_auth_tokens,node_inventory_worker toneMint
class node_mongo,node_redis,node_payos,node_cloudinary,node_email toneRose
class node_customer toneIndigo
```

## Components

### Customer storefront

- [Storefront routes](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Product browsing](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/client/src/pages/ProductPage.jsx): `client/src/pages/ProductPage.jsx`
- [Cart and checkout](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/client/src/pages/Checkout.jsx): `client/src/pages/Checkout.jsx`
- [Account and tracking](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/client/src/pages/OrderTracking.jsx): `client/src/pages/OrderTracking.jsx`
- [Client state](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/tree/main/client/src/store): `client/src/store`

### Admin operations

- [Dashboard routes](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/admin/src/App.jsx): `admin/src/App.jsx`
- [Catalog and operations](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/tree/main/admin/src/Pages): `admin/src/Pages`
- [Site content editing](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/admin/src/Pages/Services/ServiceForm.jsx): `admin/src/Pages/Services/ServiceForm.jsx`
- [Admin state](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/tree/main/admin/src/store): `admin/src/store`

### API and domain

- [REST API entry](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/server/index.js): `server/index.js`
- [API routes](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/tree/main/server/routes): `server/routes`
- [Request controllers](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/tree/main/server/controller): `server/controller`
- [Domain services](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/tree/main/server/service): `server/service`
- [JWT and sessions](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/server/helper/jwt_service.js): `server/helper/jwt_service.js`
- [Reservation reclaim](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/server/workers/inventory.worker.js): `server/workers/inventory.worker.js`

### Persistence and integrations

- [MongoDB](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/tree/main/server/model): `server/model`
- [Redis](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/server/config/init.redis.js): `server/config/init.redis.js`
- **PayOS**
- **Cloudinary**
- [Email service](https://github.com/duyphan2501/mern-ecommerce-electronic-devices/blob/main/server/mail/emails.js): `server/mail/emails.js`

### Other components

- **Customer**
- **Admin user**

## Connections

- Customer → Storefront routes: uses
- Storefront routes → Product browsing: routes to
- Storefront routes → Cart and checkout: routes to
- Storefront routes → Account and tracking: routes to
- Storefront routes → Client state: loads state
- Product browsing → Client state: reads catalog
- Cart and checkout → Client state: updates cart
- Account and tracking → Client state: reads account
- Admin user → Dashboard routes: uses
- Dashboard routes → Catalog and operations: routes to
- Dashboard routes → Site content editing: routes to
- Catalog and operations → Admin state: uses state
- Site content editing → Admin state: saves content
- Storefront routes → REST API entry: calls REST API
- Dashboard routes → REST API entry: calls REST API
- REST API entry → API routes: dispatches
- API routes → Request controllers: dispatches
- Request controllers → Domain services: invokes
- Request controllers → MongoDB: reads and writes
- Domain services → MongoDB: reads and writes
- Domain services → Redis: reserves stock
- Domain services → PayOS: creates payment link
- PayOS → REST API entry: sends webhook
- Request controllers → JWT and sessions: issues tokens
- Domain services → Email service: publishes order email
- Request controllers → Cloudinary: uploads media
- Reservation reclaim → Redis: reclaims expired holds
- Reservation reclaim → MongoDB: updates inventory