# dhetchaiyakrith24/okami24-web architecture

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

- Interactive diagram: https://gitdiagram.com/dhetchaiyakrith24/okami24-web
- Repository: https://github.com/dhetchaiyakrith24/okami24-web

## Overview

OKami24 is a multilingual Next.js storefront for browsing vape products and completing orders. The main customer journey runs from catalog and product pages through cart and checkout to order status; the tree also shows discovery tools, editorial/service content, and a separate ProductMaster publication bridge. Evidence is strongest for catalog projection, page composition, locale handling, and selected commerce calls; several runtime links are inferred only from the tree and are marked unverified.

Main entry points: [`src/app/products/[slug]/page.tsx`](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/products/%5Bslug%5D/page.tsx) (Product detail), [`src/data/shipnity-seed/storefront-preview-read-model.ts`](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/data/shipnity-seed/storefront-preview-read-model.ts) (Storefront read model), [`src/data/products/index.ts`](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/data/products/index.ts) (Legacy catalog), [`src/data/shipnity-seed/storefront-bridge.ts`](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/data/shipnity-seed/storefront-bridge.ts) (Publication bridge)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront and discovery"]
  node_home["Home page<br/>[page.tsx]"]
  node_catalog_pages["Catalog pages<br/>[page.tsx]"]
  node_brand_pages["Brand pages<br/>[page.tsx]"]
  node_product_page["Product detail<br/>[page.tsx]"]
  node_catalog_browser["Catalog browser<br/>[CatalogBrowser.tsx]"]
  node_discovery_tools["Search and tools"]
end

subgraph group_catalog["Catalog and publication"]
  node_legacy_products[("Legacy catalog<br/>[index.ts]")]
  node_catalog_taxonomy[("Catalog taxonomy<br/>[brands.ts]")]
  node_product_master["ProductMaster projection"]
  node_storefront_read["Storefront read model"]
  node_storefront_bridge["Publication bridge"]
end

subgraph group_commerce["Cart and commerce"]
  node_cart["Cart<br/>[actions.ts]"]
  node_checkout["Checkout<br/>[actions.ts]"]
  node_checkout_review["Review step view<br/>[ReviewStepView.tsx]"]
  node_commerce_services["Commerce services"]
  node_orders["Order status<br/>[page.tsx]"]
end

subgraph group_content["Editorial and service content"]
  node_content_pages["Guides and information<br/>[page.tsx]"]
  node_content_data[("Editorial data<br/>[guides.ts]")]
  node_review_video["Review video card"]
end

subgraph group_platform["Shared site services"]
  node_layout["Site layout<br/>[layout.tsx]"]
  node_locale["Locale provider<br/>[LocaleProvider.tsx]"]
  node_dictionaries[("Language dictionaries<br/>[index.ts]")]
  node_seo["SEO and metadata<br/>[seo.ts]"]
  node_sqlite[("SQLite client<br/>[client.ts]")]
end

node_customer(("Shopper"))

node_customer -.->|"opens"| node_home
node_customer -.->|"browses"| node_catalog_pages
node_customer -.->|"selects product"| node_product_page
node_home -->|"reads catalog"| node_legacy_products
node_home -->|"reads published items"| node_storefront_bridge
node_catalog_pages -->|"reads catalog"| node_legacy_products
node_catalog_pages -->|"reads published items"| node_storefront_bridge
node_brand_pages -->|"renders"| node_catalog_browser
node_brand_pages -->|"reads catalog"| node_storefront_bridge
node_product_page -->|"reads product"| node_legacy_products
node_product_page -->|"renders"| node_catalog_browser
node_catalog_browser -->|"reads preview model"| node_storefront_read
node_legacy_products -->|"resolves brand and category"| node_catalog_taxonomy
node_storefront_bridge -->|"builds catalog views"| node_storefront_read
node_storefront_read -->|"projects input"| node_product_master
node_storefront_read -->|"resolves taxonomy"| node_catalog_taxonomy
node_product_page -.->|"adds to cart"| node_cart
node_cart -.->|"starts checkout"| node_checkout
node_checkout_review -->|"submits checkout"| node_checkout
node_checkout_review -->|"reads cart and address"| node_commerce_services
node_checkout -.->|"creates order"| node_orders
node_orders -.->|"reads order status"| node_commerce_services
node_content_pages -.->|"reads guide content"| node_content_data
node_content_pages -.->|"renders video card"| node_review_video
node_layout -.->|"provides locale"| node_locale
node_locale -->|"loads translations"| node_dictionaries
node_product_page -.->|"uses metadata"| node_seo
node_commerce_services -.->|"uses database"| node_sqlite

click node_home "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/page.tsx"
click node_catalog_pages "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/products/page.tsx"
click node_brand_pages "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/brands/%5Bbrand%5D/page.tsx"
click node_product_page "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/products/%5Bslug%5D/page.tsx"
click node_catalog_browser "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/components/catalog/CatalogBrowser.tsx"
click node_discovery_tools "https://github.com/dhetchaiyakrith24/okami24-web/tree/main/src/components/tools"
click node_legacy_products "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/data/products/index.ts"
click node_catalog_taxonomy "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/data/brands.ts"
click node_product_master "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/data/shipnity-seed/active-catalog-to-product-master.ts"
click node_storefront_read "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/data/shipnity-seed/storefront-preview-read-model.ts"
click node_storefront_bridge "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/data/shipnity-seed/storefront-bridge.ts"
click node_cart "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/cart/actions.ts"
click node_checkout "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/checkout/actions.ts"
click node_checkout_review "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/components/commerce/ReviewStepView.tsx"
click node_commerce_services "https://github.com/dhetchaiyakrith24/okami24-web/tree/main/src/lib/commerce"
click node_orders "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/orders/%5BorderNumber%5D/page.tsx"
click node_content_pages "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/guides/%5Bslug%5D/page.tsx"
click node_content_data "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/data/guides.ts"
click node_review_video "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/components/product/ProductReviewVideo.tsx"
click node_layout "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/layout.tsx"
click node_locale "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/components/i18n/LocaleProvider.tsx"
click node_dictionaries "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/i18n/dictionaries/index.ts"
click node_seo "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/lib/seo.ts"
click node_sqlite "https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/lib/db/client.ts"

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_catalog_pages,node_brand_pages,node_product_page,node_catalog_browser,node_discovery_tools toneBlue
class node_legacy_products,node_catalog_taxonomy,node_product_master,node_storefront_read,node_storefront_bridge toneAmber
class node_cart,node_checkout,node_checkout_review,node_commerce_services,node_orders toneMint
class node_content_pages,node_content_data,node_review_video toneRose
class node_layout,node_locale,node_dictionaries,node_seo,node_sqlite,node_customer toneIndigo
```

## Components

### Storefront and discovery

- [Home page](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Catalog pages](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/products/page.tsx): `src/app/products/page.tsx`
- [Brand pages](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/brands/%5Bbrand%5D/page.tsx): `src/app/brands/[brand]/page.tsx`
- [Product detail](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/products/%5Bslug%5D/page.tsx): `src/app/products/[slug]/page.tsx`
- [Catalog browser](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/components/catalog/CatalogBrowser.tsx): `src/components/catalog/CatalogBrowser.tsx`
- [Search and tools](https://github.com/dhetchaiyakrith24/okami24-web/tree/main/src/components/tools): `src/components/tools`

### Catalog and publication

- [Legacy catalog](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/data/products/index.ts): `src/data/products/index.ts`
- [Catalog taxonomy](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/data/brands.ts): `src/data/brands.ts`
- [ProductMaster projection](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/data/shipnity-seed/active-catalog-to-product-master.ts): `src/data/shipnity-seed/active-catalog-to-product-master.ts`
- [Storefront read model](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/data/shipnity-seed/storefront-preview-read-model.ts): `src/data/shipnity-seed/storefront-preview-read-model.ts`
- [Publication bridge](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/data/shipnity-seed/storefront-bridge.ts): `src/data/shipnity-seed/storefront-bridge.ts`

### Cart and commerce

- [Cart](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/cart/actions.ts): `src/app/cart/actions.ts`
- [Checkout](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/checkout/actions.ts): `src/app/checkout/actions.ts`
- [Review step view](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/components/commerce/ReviewStepView.tsx): `src/components/commerce/ReviewStepView.tsx`
- [Commerce services](https://github.com/dhetchaiyakrith24/okami24-web/tree/main/src/lib/commerce): `src/lib/commerce`
- [Order status](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/orders/%5BorderNumber%5D/page.tsx): `src/app/orders/[orderNumber]/page.tsx`

### Editorial and service content

- [Guides and information](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/guides/%5Bslug%5D/page.tsx): `src/app/guides/[slug]/page.tsx`
- [Editorial data](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/data/guides.ts): `src/data/guides.ts`
- [Review video card](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/components/product/ProductReviewVideo.tsx): `src/components/product/ProductReviewVideo.tsx`

### Shared site services

- [Site layout](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/app/layout.tsx): `src/app/layout.tsx`
- [Locale provider](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/components/i18n/LocaleProvider.tsx): `src/components/i18n/LocaleProvider.tsx`
- [Language dictionaries](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/i18n/dictionaries/index.ts): `src/i18n/dictionaries/index.ts`
- [SEO and metadata](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/lib/seo.ts): `src/lib/seo.ts`
- [SQLite client](https://github.com/dhetchaiyakrith24/okami24-web/blob/main/src/lib/db/client.ts): `src/lib/db/client.ts`

### Other components

- **Shopper**

## Connections

- Shopper → Home page: opens
- Shopper → Catalog pages: browses
- Shopper → Product detail: selects product
- Home page → Legacy catalog: reads catalog (evidence: `src/app/page.tsx`)
- Home page → Publication bridge: reads published items (evidence: `src/app/page.tsx`)
- Catalog pages → Legacy catalog: reads catalog (evidence: `src/app/products/page.tsx`)
- Catalog pages → Publication bridge: reads published items (evidence: `src/app/products/page.tsx`)
- Brand pages → Catalog browser: renders (evidence: `src/app/brands/[brand]/page.tsx`)
- Brand pages → Publication bridge: reads catalog (evidence: `src/app/brands/[brand]/page.tsx`)
- Product detail → Legacy catalog: reads product (evidence: `src/app/products/[slug]/page.tsx`)
- Product detail → Catalog browser: renders (evidence: `src/app/products/[slug]/page.tsx`)
- Catalog browser → Storefront read model: reads preview model (evidence: `src/components/catalog/CatalogBrowser.tsx`)
- Legacy catalog → Catalog taxonomy: resolves brand and category (evidence: `src/data/products/index.ts`)
- Publication bridge → Storefront read model: builds catalog views (evidence: `src/data/shipnity-seed/storefront-bridge.ts`)
- Storefront read model → ProductMaster projection: projects input (evidence: `src/data/shipnity-seed/storefront-preview-read-model.ts`)
- Storefront read model → Catalog taxonomy: resolves taxonomy (evidence: `src/data/shipnity-seed/storefront-preview-read-model.ts`)
- Product detail → Cart: adds to cart
- Cart → Checkout: starts checkout
- Review step view → Checkout: submits checkout (evidence: `src/components/commerce/ReviewStepView.tsx`)
- Review step view → Commerce services: reads cart and address (evidence: `src/components/commerce/ReviewStepView.tsx`)
- Checkout → Order status: creates order
- Order status → Commerce services: reads order status
- Guides and information → Editorial data: reads guide content
- Guides and information → Review video card: renders video card
- Site layout → Locale provider: provides locale
- Locale provider → Language dictionaries: loads translations (evidence: `src/components/i18n/LocaleProvider.tsx`)
- Product detail → SEO and metadata: uses metadata (evidence: `src/app/products/[slug]/page.tsx`)
- Commerce services → SQLite client: uses database (evidence: `src/lib/commerce/auth.ts`)