# montassar2001/commerce architecture

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

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

## Overview

K is a streetwear commerce application combining a multilingual storefront, product pages, a 3D fitting lab, a stylist assistant, and an independent admin studio. The shopper workflow runs from storefront/catalog and product detail to fitting or stylist guidance and commerce actions; the admin workflow manages catalog, orders, media, promotions, and Graph RAG. Supabase backs persisted commerce and retrieval data, while Graph RAG also uses local ranking and semantic-vector logic. Some major components are documented but unsampled, so their internal connections are omitted unless supported by the README or source index.

Main entry points: [`src/lib/kronosGraphRag.js`](https://github.com/montassar2001/commerce/blob/main/src/lib/kronosGraphRag.js) (Hybrid Graph RAG), [`src/pages/AdminDashboard.jsx`](https://github.com/montassar2001/commerce/blob/main/src/pages/AdminDashboard.jsx) (Admin Dashboard), [`src/lib/kronosDataService.js`](https://github.com/montassar2001/commerce/blob/main/src/lib/kronosDataService.js) (Commerce Data Service), [`src/App.jsx`](https://github.com/montassar2001/commerce/blob/main/src/App.jsx) (App Shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_store["Storefront"]
  node_app["App Shell<br/>[App.jsx]"]
  node_catalog["Storefront Engine"]
  node_product["Product Detail"]
  node_fitting["3D Fitting Lab"]
  node_renderer["3D Renderer"]
  node_localization["Localization<br/>[i18nEngine.js]"]
end

subgraph group_assistant["Stylist &amp; Retrieval"]
  node_stylist["Personal Stylist"]
  node_chatrender["Chat Message View"]
  node_rag["Hybrid Graph RAG<br/>[kronosGraphRag.js]"]
  node_vectors["Semantic Vectors"]
  node_graphengine["Graph Analytics"]
end

subgraph group_admin["Admin Studio"]
  node_adminstudio["Admin Dashboard<br/>[AdminDashboard.jsx]"]
  node_catalogadmin["Catalog &amp; Orders"]
  node_mediaadmin["Media Storefront"]
  node_promoadmin["Promos &amp; Supabase"]
  node_ragadmin["Graph RAG Studio"]
  node_canvas["Graph Explorer"]
end

subgraph group_platform["Data &amp; Services"]
  node_data["Commerce Data Service"]
  node_defaults["Default Store Data"]
  node_client["Supabase Client<br/>[supabaseClient.js]"]
  node_database[("Supabase")]
  node_groq{{"Groq Inference"}}
end

node_shopper(("Shopper"))
node_adminuser(("Admin"))

node_shopper -->|"browses"| node_app
node_app -->|"renders"| node_catalog
node_shopper -->|"opens product"| node_product
node_product -->|"launches try-on"| node_fitting
node_fitting -->|"uses renderer"| node_renderer
node_shopper -->|"asks advice"| node_stylist
node_stylist -->|"queries"| node_rag
node_stylist -->|"renders messages"| node_chatrender
node_rag -->|"embeds queries"| node_vectors
node_rag -->|"ranks graph"| node_graphengine
node_rag -->|"retrieves from"| node_database
node_rag -->|"requests inference"| node_groq
node_app -->|"loads and syncs"| node_data
node_app -->|"loads fallback"| node_defaults
node_data -->|"uses client"| node_client
node_client -->|"connects"| node_database
node_adminuser -->|"manages store"| node_adminstudio
node_adminstudio -->|"opens catalog"| node_catalogadmin
node_adminstudio -->|"opens media"| node_mediaadmin
node_adminstudio -->|"opens promos"| node_promoadmin
node_adminstudio -->|"opens RAG studio"| node_ragadmin
node_ragadmin -->|"runs diagnostics"| node_rag
node_ragadmin -->|"shows graph"| node_canvas
node_catalogadmin -->|"uses data service"| node_data
node_mediaadmin -->|"uses data service"| node_data
node_promoadmin -->|"uses data service"| node_data
node_product -->|"localizes UI"| node_localization

click node_app "https://github.com/montassar2001/commerce/blob/main/src/App.jsx"
click node_catalog "https://github.com/montassar2001/commerce/blob/main/src/components/RawlineMasterEngine.jsx"
click node_product "https://github.com/montassar2001/commerce/blob/main/src/components/ZaraProductDetailPage.jsx"
click node_fitting "https://github.com/montassar2001/commerce/blob/main/src/components/Rawline3DFittingLab.jsx"
click node_renderer "https://github.com/montassar2001/commerce/blob/main/src/lib/software3dRenderer.js"
click node_localization "https://github.com/montassar2001/commerce/blob/main/src/lib/i18nEngine.js"
click node_stylist "https://github.com/montassar2001/commerce/blob/main/src/components/RawlineAIChatbot.jsx"
click node_chatrender "https://github.com/montassar2001/commerce/blob/main/src/components/RichChatbotMessage.jsx"
click node_rag "https://github.com/montassar2001/commerce/blob/main/src/lib/kronosGraphRag.js"
click node_vectors "https://github.com/montassar2001/commerce/blob/main/src/lib/semanticVectorEngine.js"
click node_graphengine "https://github.com/montassar2001/commerce/blob/main/src/lib/enterpriseGraphEngine.js"
click node_adminstudio "https://github.com/montassar2001/commerce/blob/main/src/pages/AdminDashboard.jsx"
click node_catalogadmin "https://github.com/montassar2001/commerce/blob/main/src/components/admin/AdminCatalogOrders.jsx"
click node_mediaadmin "https://github.com/montassar2001/commerce/blob/main/src/components/admin/AdminMediaStorefront.jsx"
click node_promoadmin "https://github.com/montassar2001/commerce/blob/main/src/components/admin/AdminPromosSupabase.jsx"
click node_ragadmin "https://github.com/montassar2001/commerce/blob/main/src/components/admin/AdminGraphRagStudio.jsx"
click node_canvas "https://github.com/montassar2001/commerce/blob/main/src/components/admin/EnterpriseGraphCanvas.jsx"
click node_data "https://github.com/montassar2001/commerce/blob/main/src/lib/kronosDataService.js"
click node_defaults "https://github.com/montassar2001/commerce/blob/main/src/data/defaultRawlineData.js"
click node_client "https://github.com/montassar2001/commerce/blob/main/src/lib/supabaseClient.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_app,node_catalog,node_product,node_fitting,node_renderer,node_localization toneBlue
class node_stylist,node_chatrender,node_rag,node_vectors,node_graphengine toneAmber
class node_adminstudio,node_catalogadmin,node_mediaadmin,node_promoadmin,node_ragadmin,node_canvas toneMint
class node_data,node_defaults,node_client,node_database,node_groq toneRose
class node_shopper,node_adminuser toneIndigo
```

## Components

### Storefront

- [App Shell](https://github.com/montassar2001/commerce/blob/main/src/App.jsx): `src/App.jsx`
- [Storefront Engine](https://github.com/montassar2001/commerce/blob/main/src/components/RawlineMasterEngine.jsx): `src/components/RawlineMasterEngine.jsx`
- [Product Detail](https://github.com/montassar2001/commerce/blob/main/src/components/ZaraProductDetailPage.jsx): `src/components/ZaraProductDetailPage.jsx`
- [3D Fitting Lab](https://github.com/montassar2001/commerce/blob/main/src/components/Rawline3DFittingLab.jsx): `src/components/Rawline3DFittingLab.jsx`
- [3D Renderer](https://github.com/montassar2001/commerce/blob/main/src/lib/software3dRenderer.js): `src/lib/software3dRenderer.js`
- [Localization](https://github.com/montassar2001/commerce/blob/main/src/lib/i18nEngine.js): `src/lib/i18nEngine.js`

### Stylist & Retrieval

- [Personal Stylist](https://github.com/montassar2001/commerce/blob/main/src/components/RawlineAIChatbot.jsx): `src/components/RawlineAIChatbot.jsx`
- [Chat Message View](https://github.com/montassar2001/commerce/blob/main/src/components/RichChatbotMessage.jsx): `src/components/RichChatbotMessage.jsx`
- [Hybrid Graph RAG](https://github.com/montassar2001/commerce/blob/main/src/lib/kronosGraphRag.js): `src/lib/kronosGraphRag.js`
- [Semantic Vectors](https://github.com/montassar2001/commerce/blob/main/src/lib/semanticVectorEngine.js): `src/lib/semanticVectorEngine.js`
- [Graph Analytics](https://github.com/montassar2001/commerce/blob/main/src/lib/enterpriseGraphEngine.js): `src/lib/enterpriseGraphEngine.js`

### Admin Studio

- [Admin Dashboard](https://github.com/montassar2001/commerce/blob/main/src/pages/AdminDashboard.jsx): `src/pages/AdminDashboard.jsx`
- [Catalog & Orders](https://github.com/montassar2001/commerce/blob/main/src/components/admin/AdminCatalogOrders.jsx): `src/components/admin/AdminCatalogOrders.jsx`
- [Media Storefront](https://github.com/montassar2001/commerce/blob/main/src/components/admin/AdminMediaStorefront.jsx): `src/components/admin/AdminMediaStorefront.jsx`
- [Promos & Supabase](https://github.com/montassar2001/commerce/blob/main/src/components/admin/AdminPromosSupabase.jsx): `src/components/admin/AdminPromosSupabase.jsx`
- [Graph RAG Studio](https://github.com/montassar2001/commerce/blob/main/src/components/admin/AdminGraphRagStudio.jsx): `src/components/admin/AdminGraphRagStudio.jsx`
- [Graph Explorer](https://github.com/montassar2001/commerce/blob/main/src/components/admin/EnterpriseGraphCanvas.jsx): `src/components/admin/EnterpriseGraphCanvas.jsx`

### Data & Services

- [Commerce Data Service](https://github.com/montassar2001/commerce/blob/main/src/lib/kronosDataService.js): `src/lib/kronosDataService.js`
- [Default Store Data](https://github.com/montassar2001/commerce/blob/main/src/data/defaultRawlineData.js): `src/data/defaultRawlineData.js`
- [Supabase Client](https://github.com/montassar2001/commerce/blob/main/src/lib/supabaseClient.js): `src/lib/supabaseClient.js`
- **Supabase**
- **Groq Inference**

### Other components

- **Shopper**
- **Admin**

## Connections

- Shopper → App Shell: browses (evidence: `README.md`)
- App Shell → Storefront Engine: renders (evidence: `src/App.jsx`)
- Shopper → Product Detail: opens product (evidence: `README.md`)
- Product Detail → 3D Fitting Lab: launches try-on (evidence: `README.md`)
- 3D Fitting Lab → 3D Renderer: uses renderer (evidence: `src/components/Rawline3DFittingLab.jsx`)
- Shopper → Personal Stylist: asks advice (evidence: `README.md`)
- Personal Stylist → Hybrid Graph RAG: queries (evidence: `src/components/RawlineAIChatbot.jsx`)
- Personal Stylist → Chat Message View: renders messages (evidence: `src/components/RawlineAIChatbot.jsx`)
- Hybrid Graph RAG → Semantic Vectors: embeds queries (evidence: `src/lib/kronosGraphRag.js`)
- Hybrid Graph RAG → Graph Analytics: ranks graph (evidence: `src/lib/kronosGraphRag.js`)
- Hybrid Graph RAG → Supabase: retrieves from (evidence: `README.md`)
- Hybrid Graph RAG → Groq Inference: requests inference (evidence: `README.md`)
- App Shell → Commerce Data Service: loads and syncs (evidence: `src/App.jsx`)
- App Shell → Default Store Data: loads fallback (evidence: `src/App.jsx`)
- Commerce Data Service → Supabase Client: uses client (evidence: `src/lib/kronosDataService.js`)
- Supabase Client → Supabase: connects (evidence: `src/lib/supabaseClient.js`)
- Admin → Admin Dashboard: manages store (evidence: `README.md`)
- Admin Dashboard → Catalog & Orders: opens catalog (evidence: `src/pages/AdminDashboard.jsx`)
- Admin Dashboard → Media Storefront: opens media (evidence: `src/pages/AdminDashboard.jsx`)
- Admin Dashboard → Promos & Supabase: opens promos (evidence: `src/pages/AdminDashboard.jsx`)
- Admin Dashboard → Graph RAG Studio: opens RAG studio (evidence: `src/pages/AdminDashboard.jsx`)
- Graph RAG Studio → Hybrid Graph RAG: runs diagnostics (evidence: `src/components/admin/AdminGraphRagStudio.jsx`)
- Graph RAG Studio → Graph Explorer: shows graph (evidence: `src/components/admin/AdminGraphRagStudio.jsx`)
- Catalog & Orders → Commerce Data Service: uses data service (evidence: `src/components/admin/AdminCatalogOrders.jsx`)
- Media Storefront → Commerce Data Service: uses data service (evidence: `src/components/admin/AdminMediaStorefront.jsx`)
- Promos & Supabase → Commerce Data Service: uses data service (evidence: `src/components/admin/AdminPromosSupabase.jsx`)
- Product Detail → Localization: localizes UI (evidence: `src/components/ZaraProductDetailPage.jsx`)