# chiefmigz/ecommerce-website architecture

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

- Interactive diagram: https://gitdiagram.com/chiefmigz/ecommerce-website
- Repository: https://github.com/chiefmigz/ecommerce-website

## Overview

This MERN storefront presents Toronto Cupcake products and supports catalog browsing, product details, account login, and informational pages. The principal flow is a shopper browsing and filtering products, loading more results, and viewing a product; the backend exposes product and category APIs, with authenticated admin mutations. Authentication and product-image storage are documented capabilities. Some frontend-to-API and unsampled controller wiring is not shown, so those connections are omitted; the documented Cloudinary integration is shown as optional.

Main entry points: [`client/src/components/mainpages/Pages.js`](https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/Pages.js) (Page routing), [`server.js`](https://github.com/chiefmigz/ecommerce-website/blob/main/server.js) (Express server), [`routes/productRouter.js`](https://github.com/chiefmigz/ecommerce-website/blob/main/routes/productRouter.js) (Product routes), [`routes/categoryRouter.js`](https://github.com/chiefmigz/ecommerce-website/blob/main/routes/categoryRouter.js) (Category routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_app["App shell<br/>[App.js]"]
  node_pages["Page routing<br/>[Pages.js]"]
  node_home["Home page<br/>[Home.js]"]
  node_products["Product listing<br/>[Products.js]"]
  node_filters["Catalog filters<br/>[FilterComponent.js]"]
  node_loadmore["Load more<br/>[LoadMore.js]"]
  node_detail["Product detail<br/>[DetailProduct.js]"]
  node_login["Login page<br/>[login.js]"]
  node_postal["Delivery postal code<br/>[PostalCode.js]"]
  node_notification["Notifications"]
  node_about["About and mission<br/>[about.js]"]
  node_global["Shared state<br/>[GlobalState.js]"]
  node_productsapi["Products API client<br/>[ProductsAPI.js]"]
  node_userapi["User API client<br/>[UserAPI.js]"]
end

subgraph group_backend["API backend"]
  node_server["Express server<br/>[server.js]"]
  node_productroutes["Product routes<br/>[productRouter.js]"]
  node_categoryroutes["Category routes<br/>[categoryRouter.js]"]
  node_uploadroute["Image upload route<br/>[upload.js]"]
  node_productctrl["Product operations<br/>[productCtrl.js]"]
  node_categoryctrl["Category operations<br/>[categoryCtrl.js]"]
  node_userctrl["Account operations<br/>[userCtrl.js]"]
end

subgraph group_catalog["Catalog data"]
  node_productmodel["Product model<br/>[productModel.js]"]
  node_categorymodel["Category model<br/>[categoryModel.js]"]
end

subgraph group_identity["Identity and media"]
  node_auth["Token authentication<br/>[auth.js]"]
  node_adminauth["Admin authorization<br/>[authAdmin.js]"]
  node_usermodel["User model<br/>[userModel.js]"]
end

node_shopper(("Shopper"))
node_mongo[("MongoDB")]
node_cloudinary[("Cloudinary")]

node_shopper -->|"uses storefront"| node_app
node_app -->|"renders pages"| node_pages
node_app -->|"provides state"| node_global
node_pages -->|"routes to"| node_home
node_pages -->|"routes to"| node_products
node_pages -->|"routes to"| node_detail
node_pages -->|"routes to"| node_login
node_products -->|"offers filters"| node_filters
node_products -->|"offers paging"| node_loadmore
node_productsapi -->|"requests products"| node_server
node_server -->|"mounts routes"| node_productroutes
node_server -->|"mounts routes"| node_categoryroutes
node_server -->|"mounts routes"| node_uploadroute
node_productroutes -->|"protects mutations"| node_auth
node_productroutes -->|"guards mutations"| node_adminauth
node_productroutes -->|"dispatches requests"| node_productctrl
node_categoryroutes -->|"protects mutations"| node_auth
node_categoryroutes -->|"guards mutations"| node_adminauth
node_categoryroutes -->|"dispatches requests"| node_categoryctrl
node_auth -->|"passes identity"| node_adminauth
node_adminauth -->|"checks role"| node_usermodel
node_productctrl -->|"queries and updates"| node_productmodel
node_categoryctrl -->|"uses categories"| node_categorymodel
node_userctrl -->|"uses accounts"| node_usermodel
node_productmodel -->|"persists products"| node_mongo
node_categorymodel -->|"persists categories"| node_mongo
node_usermodel -->|"persists accounts"| node_mongo
node_uploadroute -.->|"stores images"| node_cloudinary

click node_app "https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/App.js"
click node_pages "https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/Pages.js"
click node_home "https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/home/Home.js"
click node_products "https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/products/Products.js"
click node_filters "https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/utils/filtercomponent/FilterComponent.js"
click node_loadmore "https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/products/LoadMore.js"
click node_detail "https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/detailproduct/DetailProduct.js"
click node_login "https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/auth/login.js"
click node_postal "https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/utils/modals/delivery/PostalCode.js"
click node_notification "https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/utils/modals/notification/NotificationModal.js"
click node_about "https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/about/about.js"
click node_global "https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/GlobalState.js"
click node_productsapi "https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/api/ProductsAPI.js"
click node_userapi "https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/api/UserAPI.js"
click node_server "https://github.com/chiefmigz/ecommerce-website/blob/main/server.js"
click node_productroutes "https://github.com/chiefmigz/ecommerce-website/blob/main/routes/productRouter.js"
click node_categoryroutes "https://github.com/chiefmigz/ecommerce-website/blob/main/routes/categoryRouter.js"
click node_uploadroute "https://github.com/chiefmigz/ecommerce-website/blob/main/routes/upload.js"
click node_productctrl "https://github.com/chiefmigz/ecommerce-website/blob/main/controllers/productCtrl.js"
click node_categoryctrl "https://github.com/chiefmigz/ecommerce-website/blob/main/controllers/categoryCtrl.js"
click node_userctrl "https://github.com/chiefmigz/ecommerce-website/blob/main/controllers/userCtrl.js"
click node_auth "https://github.com/chiefmigz/ecommerce-website/blob/main/middleware/auth.js"
click node_adminauth "https://github.com/chiefmigz/ecommerce-website/blob/main/middleware/authAdmin.js"
click node_productmodel "https://github.com/chiefmigz/ecommerce-website/blob/main/models/productModel.js"
click node_categorymodel "https://github.com/chiefmigz/ecommerce-website/blob/main/models/categoryModel.js"
click node_usermodel "https://github.com/chiefmigz/ecommerce-website/blob/main/models/userModel.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_pages,node_home,node_products,node_filters,node_loadmore,node_detail,node_login,node_postal,node_notification,node_about,node_global,node_productsapi,node_userapi toneBlue
class node_server,node_productroutes,node_categoryroutes,node_uploadroute,node_productctrl,node_categoryctrl,node_userctrl,node_mongo,node_cloudinary toneAmber
class node_productmodel,node_categorymodel toneMint
class node_auth,node_adminauth,node_usermodel toneRose
class node_shopper toneIndigo
```

## Components

### Storefront

- [App shell](https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/App.js): `client/src/App.js`
- [Page routing](https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/Pages.js): `client/src/components/mainpages/Pages.js`
- [Home page](https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/home/Home.js): `client/src/components/mainpages/home/Home.js`
- [Product listing](https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/products/Products.js): `client/src/components/mainpages/products/Products.js`
- [Catalog filters](https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/utils/filtercomponent/FilterComponent.js): `client/src/components/mainpages/utils/filtercomponent/FilterComponent.js`
- [Load more](https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/products/LoadMore.js): `client/src/components/mainpages/products/LoadMore.js`
- [Product detail](https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/detailproduct/DetailProduct.js): `client/src/components/mainpages/detailproduct/DetailProduct.js`
- [Login page](https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/auth/login.js): `client/src/components/mainpages/auth/login.js`
- [Delivery postal code](https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/utils/modals/delivery/PostalCode.js): `client/src/components/mainpages/utils/modals/delivery/PostalCode.js`
- [Notifications](https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/utils/modals/notification/NotificationModal.js): `client/src/components/mainpages/utils/modals/notification/NotificationModal.js`
- [About and mission](https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/components/mainpages/about/about.js): `client/src/components/mainpages/about/about.js`
- [Shared state](https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/GlobalState.js): `client/src/GlobalState.js`
- [Products API client](https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/api/ProductsAPI.js): `client/src/api/ProductsAPI.js`
- [User API client](https://github.com/chiefmigz/ecommerce-website/blob/main/client/src/api/UserAPI.js): `client/src/api/UserAPI.js`

### API backend

- [Express server](https://github.com/chiefmigz/ecommerce-website/blob/main/server.js): `server.js`
- [Product routes](https://github.com/chiefmigz/ecommerce-website/blob/main/routes/productRouter.js): `routes/productRouter.js`
- [Category routes](https://github.com/chiefmigz/ecommerce-website/blob/main/routes/categoryRouter.js): `routes/categoryRouter.js`
- [Image upload route](https://github.com/chiefmigz/ecommerce-website/blob/main/routes/upload.js): `routes/upload.js`
- [Product operations](https://github.com/chiefmigz/ecommerce-website/blob/main/controllers/productCtrl.js): `controllers/productCtrl.js`
- [Category operations](https://github.com/chiefmigz/ecommerce-website/blob/main/controllers/categoryCtrl.js): `controllers/categoryCtrl.js`
- [Account operations](https://github.com/chiefmigz/ecommerce-website/blob/main/controllers/userCtrl.js): `controllers/userCtrl.js`

### Catalog data

- [Product model](https://github.com/chiefmigz/ecommerce-website/blob/main/models/productModel.js): `models/productModel.js`
- [Category model](https://github.com/chiefmigz/ecommerce-website/blob/main/models/categoryModel.js): `models/categoryModel.js`

### Identity and media

- [Token authentication](https://github.com/chiefmigz/ecommerce-website/blob/main/middleware/auth.js): `middleware/auth.js`
- [Admin authorization](https://github.com/chiefmigz/ecommerce-website/blob/main/middleware/authAdmin.js): `middleware/authAdmin.js`
- [User model](https://github.com/chiefmigz/ecommerce-website/blob/main/models/userModel.js): `models/userModel.js`

### Other components

- **Shopper**
- **MongoDB**
- **Cloudinary**

## Connections

- Shopper → App shell: uses storefront
- App shell → Page routing: renders pages
- App shell → Shared state: provides state
- Page routing → Home page: routes to
- Page routing → Product listing: routes to
- Page routing → Product detail: routes to
- Page routing → Login page: routes to
- Product listing → Catalog filters: offers filters
- Product listing → Load more: offers paging
- Products API client → Express server: requests products
- Express server → Product routes: mounts routes
- Express server → Category routes: mounts routes
- Express server → Image upload route: mounts routes
- Product routes → Token authentication: protects mutations
- Product routes → Admin authorization: guards mutations
- Product routes → Product operations: dispatches requests
- Category routes → Token authentication: protects mutations
- Category routes → Admin authorization: guards mutations
- Category routes → Category operations: dispatches requests
- Token authentication → Admin authorization: passes identity
- Admin authorization → User model: checks role
- Product operations → Product model: queries and updates
- Category operations → Category model: uses categories
- Account operations → User model: uses accounts
- Product model → MongoDB: persists products
- Category model → MongoDB: persists categories
- User model → MongoDB: persists accounts
- Image upload route → Cloudinary: stores images