# sanjaybx1/shopping-website architecture

> Architecture diagram of the GitHub repository sanjaybx1/shopping-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/sanjaybx1/shopping-website
- Repository: https://github.com/sanjaybx1/shopping-website

## Overview

MAVZ is a small fashion-commerce site with a customer storefront, checkout, and password-protected administration. Customers browse and select products, maintain a local cart or wishlist, then submit an order; administrators manage the catalog and order statuses. The sampled code shows the Express API, JSON-backed product and order data, and browser clients. Some frontend and server sections are omitted, so links for unsampled behavior are limited to documented routes and visible calls.

Main entry points: [`mavz-store/public/js/main.js`](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/js/main.js) (Storefront logic), [`mavz-store/server.js`](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/server.js) (Admin API), [`mavz-store/public/js/admin.js`](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/js/admin.js) (Admin logic), [`mavz-store/public/index.html`](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/index.html) (Store pages)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Customer storefront"]
  node_storefront_pages["Store pages<br/>[index.html]"]
  node_product_page["Product page<br/>[product.html]"]
  node_customer_ui["Storefront logic<br/>[main.js]"]
  node_cart_wishlist["Cart and wishlist<br/>[main.js]"]
  node_browser_storage[("Browser storage<br/>[main.js]")]
end

subgraph group_commerce["Checkout and orders"]
  node_checkout_page["Checkout page<br/>[checkout.html]"]
  node_order_api["Order API<br/>[server.js]"]
end

subgraph group_admin["Store administration"]
  node_admin_page["Admin panel<br/>[admin.html]"]
  node_admin_ui["Admin logic<br/>[admin.js]"]
  node_admin_api["Admin API<br/>[server.js]"]
end

subgraph group_runtime["Server and data"]
  node_orders_data[("Order records<br/>[orders.json]")]
  node_product_api["Product API<br/>[server.js]"]
  node_products_data[("Product records<br/>[products.json]")]
  node_image_uploads["Image uploads<br/>[server.js]"]
  node_config["Store configuration<br/>[config.js]"]
  node_http_server["Express server<br/>[server.js]"]
end

node_customer(("Customer"))
node_admin(("Administrator"))

node_customer -->|"browses"| node_storefront_pages
node_customer -->|"selects products"| node_product_page
node_storefront_pages -->|"loads"| node_customer_ui
node_product_page -->|"loads"| node_customer_ui
node_customer_ui -->|"requests products"| node_product_api
node_product_api -->|"reads"| node_products_data
node_customer_ui -->|"manages selections"| node_cart_wishlist
node_cart_wishlist -->|"persists locally"| node_browser_storage
node_customer -->|"submits purchase"| node_checkout_page
node_checkout_page -->|"uses checkout logic"| node_customer_ui
node_customer_ui -->|"places order"| node_order_api
node_order_api -->|"validates items"| node_products_data
node_order_api -->|"writes order"| node_orders_data
node_admin -->|"manages store"| node_admin_page
node_admin_page -->|"loads"| node_admin_ui
node_admin_ui -->|"requests admin actions"| node_admin_api
node_admin_ui -->|"loads catalog"| node_product_api
node_admin_api -->|"updates catalog"| node_products_data
node_admin_api -->|"reads and updates"| node_orders_data
node_admin_api -->|"stores images"| node_image_uploads
node_http_server -->|"reads settings"| node_config
node_http_server -->|"serves static files"| node_storefront_pages
node_http_server -->|"serves static files"| node_admin_page

click node_storefront_pages "https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/index.html"
click node_product_page "https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/product.html"
click node_customer_ui "https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/js/main.js"
click node_cart_wishlist "https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/js/main.js"
click node_browser_storage "https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/js/main.js"
click node_checkout_page "https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/checkout.html"
click node_order_api "https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/server.js"
click node_orders_data "https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/data/orders.json"
click node_admin_page "https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/admin.html"
click node_admin_ui "https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/js/admin.js"
click node_admin_api "https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/server.js"
click node_product_api "https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/server.js"
click node_products_data "https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/data/products.json"
click node_image_uploads "https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/server.js"
click node_config "https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/config.js"
click node_http_server "https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/server.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_pages,node_product_page,node_customer_ui,node_cart_wishlist,node_browser_storage toneBlue
class node_checkout_page,node_order_api toneAmber
class node_admin_page,node_admin_ui,node_admin_api toneMint
class node_orders_data,node_product_api,node_products_data,node_image_uploads,node_config,node_http_server toneRose
class node_customer,node_admin toneIndigo
```

## Components

### Customer storefront

- [Store pages](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/index.html): `mavz-store/public/index.html`
- [Product page](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/product.html): `mavz-store/public/product.html`
- [Storefront logic](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/js/main.js): `mavz-store/public/js/main.js`
- [Cart and wishlist](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/js/main.js): `mavz-store/public/js/main.js`
- [Browser storage](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/js/main.js): `mavz-store/public/js/main.js`

### Checkout and orders

- [Checkout page](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/checkout.html): `mavz-store/public/checkout.html`
- [Order API](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/server.js): `mavz-store/server.js`

### Store administration

- [Admin panel](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/admin.html): `mavz-store/public/admin.html`
- [Admin logic](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/public/js/admin.js): `mavz-store/public/js/admin.js`
- [Admin API](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/server.js): `mavz-store/server.js`

### Server and data

- [Order records](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/data/orders.json): `mavz-store/data/orders.json`
- [Product API](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/server.js): `mavz-store/server.js`
- [Product records](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/data/products.json): `mavz-store/data/products.json`
- [Image uploads](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/server.js): `mavz-store/server.js`
- [Store configuration](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/config.js): `mavz-store/config.js`
- [Express server](https://github.com/sanjaybx1/shopping-website/blob/main/mavz-store/server.js): `mavz-store/server.js`

### Other components

- **Customer**
- **Administrator**

## Connections

- Customer → Store pages: browses
- Customer → Product page: selects products
- Store pages → Storefront logic: loads
- Product page → Storefront logic: loads
- Storefront logic → Product API: requests products
- Product API → Product records: reads
- Storefront logic → Cart and wishlist: manages selections
- Cart and wishlist → Browser storage: persists locally
- Customer → Checkout page: submits purchase
- Checkout page → Storefront logic: uses checkout logic
- Storefront logic → Order API: places order
- Order API → Product records: validates items
- Order API → Order records: writes order
- Administrator → Admin panel: manages store
- Admin panel → Admin logic: loads
- Admin logic → Admin API: requests admin actions
- Admin logic → Product API: loads catalog
- Admin API → Product records: updates catalog
- Admin API → Order records: reads and updates
- Admin API → Image uploads: stores images
- Express server → Store configuration: reads settings
- Express server → Store pages: serves static files
- Express server → Admin panel: serves static files