# rhenerds/rhenerds-commerce architecture

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

- Interactive diagram: https://gitdiagram.com/rhenerds/rhenerds-commerce
- Repository: https://github.com/rhenerds/rhenerds-commerce

## Overview

This is a SvelteKit storefront for browsing merchandise, managing a stock-limited cart, and completing payment through DOKU. The principal workflow runs from the shared storefront shell and catalog pages through product selection, cart management, checkout, and payment-status summary. Product and inventory API routes support discovery and stock checks; checkout and transaction-status routes integrate with DOKU, while checkout also uses Upstash Redis. Several route implementations were not sampled, so undocumented links and behavior are omitted rather than inferred.

Main entry points: [`src/routes/api/productquery/+server.ts`](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/api/productquery/%2Bserver.ts) (Product query API), [`src/routes/api/stock`](https://github.com/rhenerds/rhenerds-commerce/tree/main/src/routes/api/stock) (Stock APIs), [`src/routes/cart/+page.server.ts`](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/cart/%2Bpage.server.ts) (Cart logic), [`src/routes/cart/[slug]/+page.server.ts`](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/cart/%5Bslug%5D/%2Bpage.server.ts) (Add to cart)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_layout["Site shell<br/>[+layout.svelte]"]
  node_home["Home<br/>[+page.svelte]"]
  node_home_load["Home loader<br/>[+page.server.ts]"]
  node_catalog["Catalog<br/>[+page.svelte]"]
  node_catalog_load["Catalog loader<br/>[+page.server.ts]"]
  node_product["Product detail<br/>[+page.svelte]"]
  node_product_view["Product view<br/>[ProductView.svelte]"]
  node_content["Informational pages"]
  node_legal["Legal pages"]
end

subgraph group_shopping["Shopping"]
  node_cart["Cart page<br/>[+page.svelte]"]
  node_cart_load["Cart logic<br/>[+page.server.ts]"]
  node_add_cart["Add to cart<br/>[+page.server.ts]"]
  node_cart_store["Cart store<br/>[cartStore.ts]"]
  node_cart_utils["Cart utilities<br/>[cart.ts]"]
end

subgraph group_commerce["Commerce APIs"]
  node_products_api["Product query API<br/>[+server.ts]"]
  node_stock_api["Stock APIs"]
end

subgraph group_payment["Payment"]
  node_checkout_page["Checkout page<br/>[+page.svelte]"]
  node_checkout_load["Checkout flow<br/>[+page.server.ts]"]
  node_summary["Order summary<br/>[+page.svelte]"]
  node_summary_load["Status loader<br/>[+page.server.ts]"]
  node_checkout_api["Checkout API<br/>[+server.ts]"]
  node_status_api["Transaction status<br/>[+server.ts]"]
end

node_visitor(("Shopper"))
node_redis[("Upstash Redis")]
node_doku["DOKU payment"]

node_visitor -->|"browses"| node_layout
node_visitor -.->|"visits"| node_home
node_visitor -->|"searches"| node_catalog
node_home_load -->|"fetches products"| node_products_api
node_home_load -->|"fetches stock"| node_stock_api
node_catalog_load -->|"fetches products"| node_products_api
node_catalog_load -->|"fetches stock"| node_stock_api
node_product -.->|"renders"| node_product_view
node_visitor -.->|"adds item"| node_add_cart
node_add_cart -->|"checks stock"| node_stock_api
node_add_cart -->|"validates product"| node_products_api
node_cart_load -->|"checks stock"| node_stock_api
node_cart_load -->|"fetches products"| node_products_api
node_cart_load -.->|"updates amount"| node_cart_store
node_visitor -.->|"starts checkout"| node_checkout_page
node_checkout_load -->|"fetches products"| node_products_api
node_checkout_load -.->|"submits order"| node_checkout_api
node_checkout_api -->|"updates stock"| node_redis
node_checkout_api -->|"creates payment"| node_doku
node_summary_load -->|"checks invoice"| node_status_api
node_summary_load -->|"fetches products"| node_products_api
node_status_api -->|"queries status"| node_doku
node_visitor -.->|"reads"| node_content
node_visitor -.->|"reads"| node_legal

click node_layout "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/%2Blayout.svelte"
click node_home "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/%2Bpage.svelte"
click node_home_load "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/%2Bpage.server.ts"
click node_catalog "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/catalog/%2Bpage.svelte"
click node_catalog_load "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/catalog/%2Bpage.server.ts"
click node_product "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/catalog/%5Bslug%5D/%2Bpage.svelte"
click node_product_view "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/lib/components/ProductView.svelte"
click node_cart "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/cart/%2Bpage.svelte"
click node_cart_load "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/cart/%2Bpage.server.ts"
click node_add_cart "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/cart/%5Bslug%5D/%2Bpage.server.ts"
click node_cart_store "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/lib/stores/cartStore.ts"
click node_cart_utils "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/lib/utils/cart.ts"
click node_checkout_page "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/cart/checkout/%2Bpage.svelte"
click node_checkout_load "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/cart/checkout/%2Bpage.server.ts"
click node_summary "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/summary/%2Bpage.svelte"
click node_summary_load "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/summary/%2Bpage.server.ts"
click node_products_api "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/api/productquery/%2Bserver.ts"
click node_stock_api "https://github.com/rhenerds/rhenerds-commerce/tree/main/src/routes/api/stock"
click node_checkout_api "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/api/checkout/%2Bserver.ts"
click node_status_api "https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/api/trstat/%2Bserver.ts"
click node_content "https://github.com/rhenerds/rhenerds-commerce/tree/main/src/routes/about"
click node_legal "https://github.com/rhenerds/rhenerds-commerce/tree/main/src/routes/legal"

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_layout,node_home,node_home_load,node_catalog,node_catalog_load,node_product,node_product_view,node_content,node_legal toneBlue
class node_cart,node_cart_load,node_add_cart,node_cart_store,node_cart_utils,node_redis toneAmber
class node_products_api,node_stock_api toneMint
class node_checkout_page,node_checkout_load,node_summary,node_summary_load,node_checkout_api,node_status_api toneRose
class node_visitor,node_doku toneIndigo
```

## Components

### Storefront

- [Site shell](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/%2Blayout.svelte): `src/routes/+layout.svelte`
- [Home](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/%2Bpage.svelte): `src/routes/+page.svelte`
- [Home loader](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/%2Bpage.server.ts): `src/routes/+page.server.ts`
- [Catalog](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/catalog/%2Bpage.svelte): `src/routes/catalog/+page.svelte`
- [Catalog loader](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/catalog/%2Bpage.server.ts): `src/routes/catalog/+page.server.ts`
- [Product detail](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/catalog/%5Bslug%5D/%2Bpage.svelte): `src/routes/catalog/[slug]/+page.svelte`
- [Product view](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/lib/components/ProductView.svelte): `src/lib/components/ProductView.svelte`
- [Informational pages](https://github.com/rhenerds/rhenerds-commerce/tree/main/src/routes/about): `src/routes/about`
- [Legal pages](https://github.com/rhenerds/rhenerds-commerce/tree/main/src/routes/legal): `src/routes/legal`

### Shopping

- [Cart page](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/cart/%2Bpage.svelte): `src/routes/cart/+page.svelte`
- [Cart logic](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/cart/%2Bpage.server.ts): `src/routes/cart/+page.server.ts`
- [Add to cart](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/cart/%5Bslug%5D/%2Bpage.server.ts): `src/routes/cart/[slug]/+page.server.ts`
- [Cart store](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/lib/stores/cartStore.ts): `src/lib/stores/cartStore.ts`
- [Cart utilities](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/lib/utils/cart.ts): `src/lib/utils/cart.ts`

### Commerce APIs

- [Product query API](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/api/productquery/%2Bserver.ts): `src/routes/api/productquery/+server.ts`
- [Stock APIs](https://github.com/rhenerds/rhenerds-commerce/tree/main/src/routes/api/stock): `src/routes/api/stock`

### Payment

- [Checkout page](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/cart/checkout/%2Bpage.svelte): `src/routes/cart/checkout/+page.svelte`
- [Checkout flow](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/cart/checkout/%2Bpage.server.ts): `src/routes/cart/checkout/+page.server.ts`
- [Order summary](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/summary/%2Bpage.svelte): `src/routes/summary/+page.svelte`
- [Status loader](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/summary/%2Bpage.server.ts): `src/routes/summary/+page.server.ts`
- [Checkout API](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/api/checkout/%2Bserver.ts): `src/routes/api/checkout/+server.ts`
- [Transaction status](https://github.com/rhenerds/rhenerds-commerce/blob/main/src/routes/api/trstat/%2Bserver.ts): `src/routes/api/trstat/+server.ts`

### Other components

- **Shopper**
- **Upstash Redis**
- **DOKU payment**

## Connections

- Shopper → Site shell: browses (evidence: `src/routes/+layout.svelte`)
- Shopper → Home: visits
- Shopper → Catalog: searches
- Home loader → Product query API: fetches products (evidence: `src/routes/+page.server.ts`)
- Home loader → Stock APIs: fetches stock (evidence: `src/routes/+page.server.ts`)
- Catalog loader → Product query API: fetches products (evidence: `src/routes/catalog/+page.server.ts`)
- Catalog loader → Stock APIs: fetches stock (evidence: `src/routes/catalog/+page.server.ts`)
- Product detail → Product view: renders
- Shopper → Add to cart: adds item
- Add to cart → Stock APIs: checks stock (evidence: `src/routes/cart/[slug]/+page.server.ts`)
- Add to cart → Product query API: validates product (evidence: `src/routes/cart/[slug]/+page.server.ts`)
- Cart logic → Stock APIs: checks stock (evidence: `src/routes/cart/+page.server.ts`)
- Cart logic → Product query API: fetches products (evidence: `src/routes/cart/+page.server.ts`)
- Cart logic → Cart store: updates amount
- Shopper → Checkout page: starts checkout
- Checkout flow → Product query API: fetches products (evidence: `src/routes/cart/checkout/+page.server.ts`)
- Checkout flow → Checkout API: submits order
- Checkout API → Upstash Redis: updates stock (evidence: `src/routes/api/checkout/+server.ts`)
- Checkout API → DOKU payment: creates payment (evidence: `src/routes/api/checkout/+server.ts`)
- Status loader → Transaction status: checks invoice (evidence: `src/routes/summary/+page.server.ts`)
- Status loader → Product query API: fetches products (evidence: `src/routes/summary/+page.server.ts`)
- Transaction status → DOKU payment: queries status (evidence: `src/routes/api/trstat/+server.ts`)
- Shopper → Informational pages: reads
- Shopper → Legal pages: reads