# xiaozhuangping-cpu/wavely-crossborder architecture

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

- Interactive diagram: https://gitdiagram.com/xiaozhuangping-cpu/wavely-crossborder
- Repository: https://github.com/xiaozhuangping-cpu/wavely-crossborder

## Overview

Wavely is a cross-border commerce demo spanning ERP operations, a multilingual storefront, warehouse workflows, 1688 product collection, AI assistants, and a programmatically rendered promo film. The main customer journey runs from product discovery through checkout and order tracking; the operational journey covers collecting and localizing products, catalog and inventory management, replenishment and purchasing, then warehouse receiving and shipping. The graph combines sampled frontend wiring with README-documented backend and mobile capabilities; unsampled implementation details are represented only at supported directory paths.

Main entry points: [`supabase`](https://github.com/xiaozhuangping-cpu/wavely-crossborder/tree/main/supabase) (Supabase Data & Workflows), [`erp/src/App.jsx`](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/erp/src/App.jsx) (ERP Application), [`shop/src/App.jsx`](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/shop/src/App.jsx) (Storefront App), [`shop/src/pages/Checkout.jsx`](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/shop/src/pages/Checkout.jsx) (Checkout & Tracking)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_commerce["Storefront"]
  node_shop["Storefront App<br/>[App.jsx]"]
  node_catalog["Catalog &amp; Product<br/>[Product.jsx]"]
  node_checkout["Checkout &amp; Tracking<br/>[Checkout.jsx]"]
  node_shopstate["Shop State<br/>[store.jsx]"]
  node_shopchat["AI Customer Service<br/>[ChatWidget.jsx]"]
end

subgraph group_operations["ERP Operations"]
  node_erp["ERP Application<br/>[App.jsx]"]
  node_orders["Order Operations<br/>[orders.jsx]"]
  node_catalogops["Products &amp; Inventory<br/>[products.jsx]"]
  node_purchasing["Replenishment &amp; Purchasing<br/>[purchasing.jsx]"]
  node_profit["Profit Calculator"]
  node_erpai["AI Operations Assistant<br/>[AssistantPanel.jsx]"]
  node_warehouse["Warehouse App"]
end

subgraph group_sourcing["Product Sourcing"]
  node_collect["Collection &amp; Import<br/>[BulkImport.jsx]"]
  node_extension["1688 Browser Extension<br/>[background.js]"]
end

subgraph group_platform["Shared Platform"]
  node_backend[("Supabase Data &amp; Workflows")]
  node_erpai_fn["ERP AI Function<br/>[index.ts]"]
  node_shopai_fn["Shop AI Function<br/>[index.ts]"]
  node_llm["Shared LLM Runtime<br/>[llm.ts]"]
end

subgraph group_media["Promo Film"]
  node_film["Promo Film Renderer<br/>[film.js]"]
end

node_customer(("Shopper"))
node_operator(("ERP Operator"))

node_customer -->|"browses"| node_shop
node_shop -->|"routes to"| node_catalog
node_shop -->|"routes to"| node_checkout
node_shop -->|"provides state"| node_shopstate
node_customer -.->|"places order"| node_checkout
node_checkout -.->|"submits order"| node_backend
node_backend -.->|"syncs orders"| node_orders
node_customer -.->|"asks"| node_shopchat
node_shopchat -.->|"requests assistance"| node_shopai_fn
node_shopai_fn -->|"uses runtime"| node_llm
node_operator -->|"manages"| node_erp
node_erp -->|"registers resource"| node_orders
node_erp -->|"registers resources"| node_catalogops
node_erp -->|"registers resources"| node_purchasing
node_erp -->|"routes to"| node_profit
node_erp -->|"registers collection"| node_collect
node_orders -.->|"reads and updates"| node_backend
node_catalogops -.->|"manages catalog"| node_backend
node_purchasing -->|"calls workflows"| node_backend
node_operator -.->|"collects offers"| node_extension
node_extension -.->|"sends collected data"| node_collect
node_collect -.->|"imports products"| node_backend
node_operator -.->|"receives and ships"| node_warehouse
node_warehouse -.->|"shares backend"| node_backend
node_operator -.->|"asks operations"| node_erpai
node_erpai -.->|"requests tools"| node_erpai_fn
node_erpai_fn -->|"uses runtime"| node_llm
node_llm -->|"authenticates and reads"| node_backend
node_customer -.->|"views promo"| node_film

click node_shop "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/shop/src/App.jsx"
click node_catalog "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/shop/src/pages/Product.jsx"
click node_checkout "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/shop/src/pages/Checkout.jsx"
click node_shopstate "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/shop/src/store.jsx"
click node_shopchat "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/shop/src/components/ChatWidget.jsx"
click node_erp "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/erp/src/App.jsx"
click node_orders "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/erp/src/resources/orders.jsx"
click node_catalogops "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/erp/src/resources/products.jsx"
click node_purchasing "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/erp/src/resources/purchasing.jsx"
click node_profit "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/erp/src/ProfitCalculator.jsx"
click node_erpai "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/erp/src/ai/AssistantPanel.jsx"
click node_collect "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/erp/src/collect/BulkImport.jsx"
click node_extension "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/extension/background.js"
click node_warehouse "https://github.com/xiaozhuangping-cpu/wavely-crossborder/tree/main/app"
click node_backend "https://github.com/xiaozhuangping-cpu/wavely-crossborder/tree/main/supabase"
click node_erpai_fn "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/supabase/functions/ai-assistant/index.ts"
click node_shopai_fn "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/supabase/functions/shop-assistant/index.ts"
click node_llm "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/supabase/functions/_shared/llm.ts"
click node_film "https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/wavely-promo/film.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_shop,node_catalog,node_checkout,node_shopstate,node_shopchat toneBlue
class node_erp,node_orders,node_catalogops,node_purchasing,node_profit,node_erpai,node_warehouse toneAmber
class node_collect,node_extension toneMint
class node_backend,node_erpai_fn,node_shopai_fn,node_llm toneRose
class node_film,node_customer,node_operator toneIndigo
```

## Components

### Storefront

- [Storefront App](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/shop/src/App.jsx): `shop/src/App.jsx`
- [Catalog & Product](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/shop/src/pages/Product.jsx): `shop/src/pages/Product.jsx`
- [Checkout & Tracking](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/shop/src/pages/Checkout.jsx): `shop/src/pages/Checkout.jsx`
- [Shop State](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/shop/src/store.jsx): `shop/src/store.jsx`
- [AI Customer Service](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/shop/src/components/ChatWidget.jsx): `shop/src/components/ChatWidget.jsx`

### ERP Operations

- [ERP Application](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/erp/src/App.jsx): `erp/src/App.jsx`
- [Order Operations](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/erp/src/resources/orders.jsx): `erp/src/resources/orders.jsx`
- [Products & Inventory](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/erp/src/resources/products.jsx): `erp/src/resources/products.jsx`
- [Replenishment & Purchasing](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/erp/src/resources/purchasing.jsx): `erp/src/resources/purchasing.jsx`
- [Profit Calculator](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/erp/src/ProfitCalculator.jsx): `erp/src/ProfitCalculator.jsx`
- [AI Operations Assistant](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/erp/src/ai/AssistantPanel.jsx): `erp/src/ai/AssistantPanel.jsx`
- [Warehouse App](https://github.com/xiaozhuangping-cpu/wavely-crossborder/tree/main/app): `app`

### Product Sourcing

- [Collection & Import](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/erp/src/collect/BulkImport.jsx): `erp/src/collect/BulkImport.jsx`
- [1688 Browser Extension](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/extension/background.js): `extension/background.js`

### Shared Platform

- [Supabase Data & Workflows](https://github.com/xiaozhuangping-cpu/wavely-crossborder/tree/main/supabase): `supabase`
- [ERP AI Function](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/supabase/functions/ai-assistant/index.ts): `supabase/functions/ai-assistant/index.ts`
- [Shop AI Function](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/supabase/functions/shop-assistant/index.ts): `supabase/functions/shop-assistant/index.ts`
- [Shared LLM Runtime](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/supabase/functions/_shared/llm.ts): `supabase/functions/_shared/llm.ts`

### Promo Film

- [Promo Film Renderer](https://github.com/xiaozhuangping-cpu/wavely-crossborder/blob/main/wavely-promo/film.js): `wavely-promo/film.js`

### Other components

- **Shopper**
- **ERP Operator**

## Connections

- Shopper → Storefront App: browses
- Storefront App → Catalog & Product: routes to (evidence: `shop/src/App.jsx`)
- Storefront App → Checkout & Tracking: routes to (evidence: `shop/src/App.jsx`)
- Storefront App → Shop State: provides state (evidence: `shop/src/App.jsx`)
- Shopper → Checkout & Tracking: places order
- Checkout & Tracking → Supabase Data & Workflows: submits order
- Supabase Data & Workflows → Order Operations: syncs orders
- Shopper → AI Customer Service: asks
- AI Customer Service → Shop AI Function: requests assistance
- Shop AI Function → Shared LLM Runtime: uses runtime (evidence: `supabase/functions/shop-assistant/index.ts`)
- ERP Operator → ERP Application: manages (evidence: `erp/src/App.jsx`)
- ERP Application → Order Operations: registers resource (evidence: `erp/src/App.jsx`)
- ERP Application → Products & Inventory: registers resources (evidence: `erp/src/App.jsx`)
- ERP Application → Replenishment & Purchasing: registers resources (evidence: `erp/src/App.jsx`)
- ERP Application → Profit Calculator: routes to (evidence: `erp/src/App.jsx`)
- ERP Application → Collection & Import: registers collection (evidence: `erp/src/App.jsx`)
- Order Operations → Supabase Data & Workflows: reads and updates
- Products & Inventory → Supabase Data & Workflows: manages catalog
- Replenishment & Purchasing → Supabase Data & Workflows: calls workflows (evidence: `erp/src/resources/purchasing.jsx`)
- ERP Operator → 1688 Browser Extension: collects offers
- 1688 Browser Extension → Collection & Import: sends collected data
- Collection & Import → Supabase Data & Workflows: imports products
- ERP Operator → Warehouse App: receives and ships
- Warehouse App → Supabase Data & Workflows: shares backend
- ERP Operator → AI Operations Assistant: asks operations
- AI Operations Assistant → ERP AI Function: requests tools
- ERP AI Function → Shared LLM Runtime: uses runtime (evidence: `supabase/functions/ai-assistant/index.ts`)
- Shared LLM Runtime → Supabase Data & Workflows: authenticates and reads (evidence: `supabase/functions/_shared/llm.ts`)
- Shopper → Promo Film Renderer: views promo