# koradajnaneswara-tech/shopping-website architecture

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

- Interactive diagram: https://gitdiagram.com/koradajnaneswara-tech/shopping-website
- Repository: https://github.com/koradajnaneswara-tech/shopping-website

## Overview

UrbanCart is a static, browser-only storefront. Customers browse and filter products, inspect details, manage a cart or wishlist, and submit a simulated checkout; account and order-history features are separate branches. JavaScript modules share product data and browser storage rather than a backend. The tree contains both root-level files and a `shopping website/` copy; the graph shows the sampled root implementation and calls out the separately indexed product catalog. Unsampled page wiring is represented only where the README documents the capability.

Main entry points: [`js/cart.js`](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/cart.js) (Cart engine), [`js/auth.js`](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/auth.js) (Account logic), [`js/checkout.js`](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/checkout.js) (Checkout flow), [`shop.html`](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/shop.html) (Shop page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront & Discovery"]
  node_home["Home page<br/>[index.html]"]
  node_shop["Shop page<br/>[shop.html]"]
  node_catalog["Product catalog<br/>[products.js]"]
  node_product["Product details<br/>[product-details.js]"]
  node_site_ui["Site interactions<br/>[script.js]"]
  node_alt_catalog["Copy catalog<br/>[products.js]"]
end

subgraph group_shopping["Shopping &amp; Checkout"]
  node_cart_page["Cart page<br/>[cart.html]"]
  node_cart_engine["Cart engine<br/>[cart.js]"]
  node_wishlist_page["Wishlist page<br/>[wishlist.html]"]
  node_wishlist_engine["Wishlist engine<br/>[wishlist.js]"]
  node_checkout["Checkout flow<br/>[checkout.js]"]
  node_checkout_page["Checkout page<br/>[checkout.html]"]
end

subgraph group_identity["Accounts &amp; Orders"]
  node_register["Registration<br/>[register.html]"]
  node_login["Login<br/>[login.html]"]
  node_account["Account dashboard<br/>[account.html]"]
  node_orders["Order history<br/>[orders.html]"]
  node_auth["Account logic<br/>[auth.js]"]
end

subgraph group_shared["Shared Browser State"]
  node_storage[("Browser storage")]
end

node_customer(("Customer"))

node_customer -->|"browses"| node_home
node_customer -->|"searches"| node_shop
node_shop -->|"filters and sorts"| node_catalog
node_catalog -->|"adds items"| node_cart_engine
node_customer -->|"views details"| node_product
node_product -->|"adds quantity"| node_cart_engine
node_customer -->|"reviews cart"| node_cart_page
node_cart_page -->|"manages items"| node_cart_engine
node_customer -->|"saves products"| node_wishlist_page
node_wishlist_page -->|"manages wishlist"| node_wishlist_engine
node_customer -->|"checks out"| node_checkout_page
node_checkout_page -->|"validates order"| node_checkout
node_checkout -->|"reads and clears"| node_cart_engine
node_checkout -->|"confirms order"| node_orders
node_customer -->|"registers"| node_register
node_customer -->|"signs in"| node_login
node_register -->|"submits form"| node_auth
node_login -->|"submits form"| node_auth
node_account -->|"manages account"| node_auth
node_orders -->|"shows history"| node_auth
node_cart_engine -->|"persists cart"| node_storage
node_wishlist_engine -->|"persists wishlist"| node_storage
node_checkout -->|"persists orders"| node_storage
node_auth -->|"persists users and session"| node_storage
node_site_ui -->|"routes search"| node_shop

click node_home "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/index.html"
click node_shop "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/shop.html"
click node_catalog "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/products.js"
click node_product "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/product-details.js"
click node_site_ui "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/script.js"
click node_alt_catalog "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/shopping%20website/js/products.js"
click node_cart_page "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/cart.html"
click node_cart_engine "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/cart.js"
click node_wishlist_page "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/wishlist.html"
click node_wishlist_engine "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/wishlist.js"
click node_checkout "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/checkout.js"
click node_checkout_page "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/checkout.html"
click node_register "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/register.html"
click node_login "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/login.html"
click node_account "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/account.html"
click node_orders "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/orders.html"
click node_auth "https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/auth.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_site_ui,node_alt_catalog toneBlue
class node_cart_page,node_cart_engine,node_wishlist_page,node_wishlist_engine,node_checkout,node_checkout_page toneAmber
class node_register,node_login,node_account,node_orders,node_auth toneMint
class node_storage toneRose
class node_customer toneIndigo
```

## Components

### Storefront & Discovery

- [Home page](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/index.html): `index.html`
- [Shop page](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/shop.html): `shop.html`
- [Product catalog](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/products.js): `js/products.js`
- [Product details](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/product-details.js): `js/product-details.js`
- [Site interactions](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/script.js): `js/script.js`
- [Copy catalog](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/shopping%20website/js/products.js): `shopping website/js/products.js`

### Shopping & Checkout

- [Cart page](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/cart.html): `cart.html`
- [Cart engine](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/cart.js): `js/cart.js`
- [Wishlist page](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/wishlist.html): `wishlist.html`
- [Wishlist engine](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/wishlist.js): `js/wishlist.js`
- [Checkout flow](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/checkout.js): `js/checkout.js`
- [Checkout page](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/checkout.html): `checkout.html`

### Accounts & Orders

- [Registration](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/register.html): `register.html`
- [Login](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/login.html): `login.html`
- [Account dashboard](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/account.html): `account.html`
- [Order history](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/orders.html): `orders.html`
- [Account logic](https://github.com/koradajnaneswara-tech/shopping-website/blob/main/js/auth.js): `js/auth.js`

### Shared Browser State

- **Browser storage**

### Other components

- **Customer**

## Connections

- Customer → Home page: browses (evidence: `Readme.md`)
- Customer → Shop page: searches (evidence: `Readme.md`)
- Shop page → Product catalog: filters and sorts (evidence: `Readme.md`)
- Product catalog → Cart engine: adds items (evidence: `js/cart.js`)
- Customer → Product details: views details (evidence: `Readme.md`)
- Product details → Cart engine: adds quantity (evidence: `js/product-details.js`)
- Customer → Cart page: reviews cart (evidence: `Readme.md`)
- Cart page → Cart engine: manages items (evidence: `Readme.md`)
- Customer → Wishlist page: saves products (evidence: `Readme.md`)
- Wishlist page → Wishlist engine: manages wishlist (evidence: `Readme.md`)
- Customer → Checkout page: checks out (evidence: `Readme.md`)
- Checkout page → Checkout flow: validates order (evidence: `Readme.md`)
- Checkout flow → Cart engine: reads and clears (evidence: `js/checkout.js`)
- Checkout flow → Order history: confirms order (evidence: `js/checkout.js`)
- Customer → Registration: registers (evidence: `Readme.md`)
- Customer → Login: signs in (evidence: `Readme.md`)
- Registration → Account logic: submits form (evidence: `Readme.md`)
- Login → Account logic: submits form (evidence: `Readme.md`)
- Account dashboard → Account logic: manages account (evidence: `Readme.md`)
- Order history → Account logic: shows history (evidence: `Readme.md`)
- Cart engine → Browser storage: persists cart (evidence: `js/cart.js`)
- Wishlist engine → Browser storage: persists wishlist (evidence: `js/wishlist.js`)
- Checkout flow → Browser storage: persists orders (evidence: `js/checkout.js`)
- Account logic → Browser storage: persists users and session (evidence: `js/auth.js`)
- Site interactions → Shop page: routes search (evidence: `js/script.js`)