# mabwh/kheirbaladna-e-commerce architecture

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

- Interactive diagram: https://gitdiagram.com/mabwh/kheirbaladna-e-commerce
- Repository: https://github.com/mabwh/kheirbaladna-e-commerce

## Overview

KheirBaladna is a browser-based storefront for local Upper Egyptian products. The visible workflow is account registration or login, product browsing with price/category filters and pagination, then product-detail navigation or adding items to a user’s cart. Account and cart state are kept in browser storage; the tree also includes account, cart, contact, and order-success pages. The README identifies the product but gives little implementation detail, and several page implementations were not sampled, so uncertain checkout and page-to-page wiring is omitted.

Main entry points: [`js/components.js`](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/components.js) (Navbar components), [`js/pagination.js`](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/pagination.js) (Catalog browser), [`shop.html`](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/shop.html) (Shop page), [`js/register&login.js`](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/register%26login.js) (Register and login)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_home["Home page<br/>[index.html]"]
  node_shop["Shop page<br/>[shop.html]"]
  node_catalog["Catalog browser<br/>[pagination.js]"]
  node_product["Product details<br/>[product.html]"]
  node_productdata["Product catalog<br/>[ShopDB.json]"]
  node_slider["Promotional slider<br/>[slider.js]"]
end

subgraph group_accounts["Accounts"]
  node_register["Registration page<br/>[register.html]"]
  node_accountflow["Register and login<br/>[register&amp;login.js]"]
  node_account["Account page<br/>[account.html]"]
  node_auth["Auth utilities<br/>[auth.js]"]
  node_storage[("Browser storage")]
end

subgraph group_commerce["Shopping"]
  node_cartpage["Cart page<br/>[cart.html]"]
  node_cartmodel["Cart model<br/>[classes.js]"]
  node_order["Order success<br/>[orderSuccess.html]"]
end

subgraph group_shared["Shared UI"]
  node_navbar["Navbar components<br/>[components.js]"]
  node_contact["Contact page<br/>[contactUs.html]"]
  node_footer["Footer components<br/>[components.js]"]
  node_backtotop["Back-to-top UI<br/>[components.js]"]
end

node_visitor(("Shopper"))

node_visitor -->|"opens"| node_home
node_visitor -->|"registers"| node_register
node_visitor -->|"browses"| node_shop
node_accountflow -->|"stores users"| node_storage
node_accountflow -->|"creates user"| node_cartmodel
node_accountflow -->|"redirects on login"| node_shop
node_catalog -->|"fetches"| node_productdata
node_catalog -->|"renders products"| node_shop
node_catalog -->|"stores cart and product"| node_storage
node_catalog -->|"navigates to"| node_product
node_cartmodel -.->|"persists with"| node_storage
node_navbar -->|"checks user"| node_auth
node_navbar -->|"reads cart"| node_storage
node_navbar -->|"links to"| node_shop
node_navbar -->|"links to"| node_contact
node_navbar -->|"links to"| node_cartpage
node_navbar -->|"links to"| node_account
node_auth -->|"reads and writes"| node_storage
node_home -.->|"uses"| node_slider
node_visitor -->|"opens"| node_cartpage
node_visitor -->|"opens"| node_order
node_visitor -->|"opens"| node_account
node_visitor -->|"opens"| node_contact
node_visitor -.->|"views"| node_footer
node_visitor -.->|"uses"| node_backtotop

click node_home "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/index.html"
click node_shop "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/shop.html"
click node_catalog "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/pagination.js"
click node_product "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/product.html"
click node_productdata "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/ShopDB.json"
click node_slider "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/slider.js"
click node_register "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/register.html"
click node_accountflow "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/register%26login.js"
click node_account "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/account.html"
click node_auth "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/auth.js"
click node_cartpage "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/cart.html"
click node_cartmodel "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/classes.js"
click node_order "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/orderSuccess.html"
click node_navbar "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/components.js"
click node_contact "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/contactUs.html"
click node_footer "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/components.js"
click node_backtotop "https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/components.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_home,node_shop,node_catalog,node_product,node_productdata,node_slider toneBlue
class node_register,node_accountflow,node_account,node_auth,node_storage toneAmber
class node_cartpage,node_cartmodel,node_order toneMint
class node_navbar,node_contact,node_footer,node_backtotop toneRose
class node_visitor toneIndigo
```

## Components

### Storefront

- [Home page](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/index.html): `index.html`
- [Shop page](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/shop.html): `shop.html`
- [Catalog browser](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/pagination.js): `js/pagination.js`
- [Product details](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/product.html): `product.html`
- [Product catalog](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/ShopDB.json): `js/ShopDB.json`
- [Promotional slider](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/slider.js): `js/slider.js`

### Accounts

- [Registration page](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/register.html): `register.html`
- [Register and login](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/register%26login.js): `js/register&login.js`
- [Account page](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/account.html): `account.html`
- [Auth utilities](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/auth.js): `js/auth.js`
- **Browser storage**

### Shopping

- [Cart page](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/cart.html): `cart.html`
- [Cart model](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/classes.js): `js/classes.js`
- [Order success](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/orderSuccess.html): `orderSuccess.html`

### Shared UI

- [Navbar components](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/components.js): `js/components.js`
- [Contact page](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/contactUs.html): `contactUs.html`
- [Footer components](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/components.js): `js/components.js`
- [Back-to-top UI](https://github.com/mabwh/kheirbaladna-e-commerce/blob/main/js/components.js): `js/components.js`

### Other components

- **Shopper**

## Connections

- Shopper → Home page: opens
- Shopper → Registration page: registers
- Shopper → Shop page: browses
- Register and login → Browser storage: stores users
- Register and login → Cart model: creates user
- Register and login → Shop page: redirects on login
- Catalog browser → Product catalog: fetches
- Catalog browser → Shop page: renders products
- Catalog browser → Browser storage: stores cart and product
- Catalog browser → Product details: navigates to
- Cart model → Browser storage: persists with
- Navbar components → Auth utilities: checks user
- Navbar components → Browser storage: reads cart
- Navbar components → Shop page: links to
- Navbar components → Contact page: links to
- Navbar components → Cart page: links to
- Navbar components → Account page: links to
- Auth utilities → Browser storage: reads and writes
- Home page → Promotional slider: uses
- Shopper → Cart page: opens
- Shopper → Order success: opens
- Shopper → Account page: opens
- Shopper → Contact page: opens
- Shopper → Footer components: views
- Shopper → Back-to-top UI: uses