# icraftds/ic-market-fe architecture

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

- Interactive diagram: https://gitdiagram.com/icraftds/ic-market-fe
- Repository: https://github.com/icraftds/ic-market-fe

## Overview

This repository is an ICMarket Nuxt application: its tree indicates a storefront, checkout and order handling, seller tools, administration, and top-up/voucher capabilities. The principal user journey appears to run from product discovery through cart and checkout to payment and order tracking; seller and admin areas form separate operational branches. The sampled server code also implements a substantial SSO boundary with OAuth, session management, and durable storage. Most page implementations were not sampled, and the README is only a Nuxt starter, so application links are shown as capabilities rather than asserted call flows.

Main entry points: [`server/sso/handler.js`](https://github.com/icraftds/ic-market-fe/blob/main/server/sso/handler.js) (SSO request handler), [`server/sso/session.js`](https://github.com/icraftds/ic-market-fe/blob/main/server/sso/session.js) (Session service), [`server/sso/oauth.js`](https://github.com/icraftds/ic-market-fe/blob/main/server/sso/oauth.js) (OAuth provider client), [`server/sso/security.js`](https://github.com/icraftds/ic-market-fe/blob/main/server/sso/security.js) (SSO security checks)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_commerce["Storefront and shopping"]
  node_storefront["Storefront<br/>[index.vue]"]
  node_store_view["Seller storefront<br/>[&#91;slug&#93;.vue]"]
  node_product_card["Product card<br/>[ProductCard.vue]"]
  node_catalog["Product catalog"]
  node_cart["Shopping cart<br/>[useCart.js]"]
  node_topup["Top-up<br/>[topup.vue]"]
  node_vouchers["Vouchers<br/>[vouchers.vue]"]
end

subgraph group_orders["Checkout and fulfillment"]
  node_checkout["Checkout<br/>[checkout.vue]"]
  node_payment["Payment<br/>[payment.vue]"]
  node_success["Order success<br/>[success.vue]"]
  node_order_tracking["Order tracking<br/>[orders.vue]"]
  node_order_state["Order state<br/>[useOrderStore.js]"]
  node_order_lookup["Find order<br/>[useFindOrder.js]"]
end

subgraph group_operations["Seller and administration"]
  node_seller["Seller workspace<br/>[dashboard.vue]"]
  node_seller_products["Seller products<br/>[index.vue]"]
  node_seller_applications["Seller applications"]
  node_admin["Admin workspace"]
end

subgraph group_identity["Identity and API access"]
  node_login["Login and SSO<br/>[login.vue]"]
  node_sso_client["SSO client auth<br/>[useSsoAuth.js]"]
  node_sso_routes["SSO route adapters<br/>[callback.get.js]"]
  node_sso_dispatch["SSO request handler<br/>[handler.js]"]
  node_sso_runtime["SSO runtime<br/>[runtime.js]"]
  node_oauth["OAuth provider client<br/>[oauth.js]"]
  node_sessions["Session service<br/>[session.js]"]
  node_security["SSO security checks<br/>[security.js]"]
  node_session_store[("Redis session store<br/>[store.js]")]
end

node_shopper(("Shopper"))
node_redis[("Upstash Redis")]

node_sso_routes -->|"delegates to"| node_sso_dispatch
node_sso_dispatch -->|"validates with"| node_security
node_sso_dispatch -->|"uses sessions"| node_sessions
node_sso_dispatch -->|"uses OAuth"| node_oauth
node_sessions -->|"validates callbacks"| node_security
node_sessions -->|"refreshes tokens"| node_oauth
node_sessions -->|"persists sessions"| node_session_store
node_oauth -->|"checks responses"| node_security
node_session_store -->|"stores records"| node_redis

click node_storefront "https://github.com/icraftds/ic-market-fe/blob/main/app/pages/index.vue"
click node_store_view "https://github.com/icraftds/ic-market-fe/blob/main/app/pages/store/%5Bslug%5D.vue"
click node_product_card "https://github.com/icraftds/ic-market-fe/blob/main/app/components/ProductCard.vue"
click node_catalog "https://github.com/icraftds/ic-market-fe/blob/main/app/composables/useProductCatalog.js"
click node_cart "https://github.com/icraftds/ic-market-fe/blob/main/app/composables/useCart.js"
click node_checkout "https://github.com/icraftds/ic-market-fe/blob/main/app/pages/checkout.vue"
click node_payment "https://github.com/icraftds/ic-market-fe/blob/main/app/pages/payment.vue"
click node_success "https://github.com/icraftds/ic-market-fe/blob/main/app/pages/success.vue"
click node_order_tracking "https://github.com/icraftds/ic-market-fe/blob/main/app/pages/orders.vue"
click node_order_state "https://github.com/icraftds/ic-market-fe/blob/main/app/composables/useOrderStore.js"
click node_order_lookup "https://github.com/icraftds/ic-market-fe/blob/main/app/composables/useFindOrder.js"
click node_topup "https://github.com/icraftds/ic-market-fe/blob/main/app/pages/topup.vue"
click node_vouchers "https://github.com/icraftds/ic-market-fe/blob/main/app/pages/vouchers.vue"
click node_seller "https://github.com/icraftds/ic-market-fe/blob/main/app/pages/seller/dashboard.vue"
click node_seller_products "https://github.com/icraftds/ic-market-fe/blob/main/app/pages/seller/products/index.vue"
click node_seller_applications "https://github.com/icraftds/ic-market-fe/blob/main/app/composables/useSellerApplications.js"
click node_admin "https://github.com/icraftds/ic-market-fe/tree/main/app/pages/admin"
click node_login "https://github.com/icraftds/ic-market-fe/blob/main/app/pages/login.vue"
click node_sso_client "https://github.com/icraftds/ic-market-fe/blob/main/app/composables/useSsoAuth.js"
click node_sso_routes "https://github.com/icraftds/ic-market-fe/blob/main/server/routes/auth/callback.get.js"
click node_sso_dispatch "https://github.com/icraftds/ic-market-fe/blob/main/server/sso/handler.js"
click node_sso_runtime "https://github.com/icraftds/ic-market-fe/blob/main/server/sso/runtime.js"
click node_oauth "https://github.com/icraftds/ic-market-fe/blob/main/server/sso/oauth.js"
click node_sessions "https://github.com/icraftds/ic-market-fe/blob/main/server/sso/session.js"
click node_security "https://github.com/icraftds/ic-market-fe/blob/main/server/sso/security.js"
click node_session_store "https://github.com/icraftds/ic-market-fe/blob/main/server/sso/store.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_storefront,node_store_view,node_product_card,node_catalog,node_cart,node_topup,node_vouchers toneBlue
class node_checkout,node_payment,node_success,node_order_tracking,node_order_state,node_order_lookup,node_redis toneAmber
class node_seller,node_seller_products,node_seller_applications,node_admin toneMint
class node_login,node_sso_client,node_sso_routes,node_sso_dispatch,node_sso_runtime,node_oauth,node_sessions,node_security,node_session_store toneRose
class node_shopper toneIndigo
```

## Components

### Storefront and shopping

- [Storefront](https://github.com/icraftds/ic-market-fe/blob/main/app/pages/index.vue): `app/pages/index.vue`
- [Seller storefront](https://github.com/icraftds/ic-market-fe/blob/main/app/pages/store/%5Bslug%5D.vue): `app/pages/store/[slug].vue`
- [Product card](https://github.com/icraftds/ic-market-fe/blob/main/app/components/ProductCard.vue): `app/components/ProductCard.vue`
- [Product catalog](https://github.com/icraftds/ic-market-fe/blob/main/app/composables/useProductCatalog.js): `app/composables/useProductCatalog.js`
- [Shopping cart](https://github.com/icraftds/ic-market-fe/blob/main/app/composables/useCart.js): `app/composables/useCart.js`
- [Top-up](https://github.com/icraftds/ic-market-fe/blob/main/app/pages/topup.vue): `app/pages/topup.vue`
- [Vouchers](https://github.com/icraftds/ic-market-fe/blob/main/app/pages/vouchers.vue): `app/pages/vouchers.vue`

### Checkout and fulfillment

- [Checkout](https://github.com/icraftds/ic-market-fe/blob/main/app/pages/checkout.vue): `app/pages/checkout.vue`
- [Payment](https://github.com/icraftds/ic-market-fe/blob/main/app/pages/payment.vue): `app/pages/payment.vue`
- [Order success](https://github.com/icraftds/ic-market-fe/blob/main/app/pages/success.vue): `app/pages/success.vue`
- [Order tracking](https://github.com/icraftds/ic-market-fe/blob/main/app/pages/orders.vue): `app/pages/orders.vue`
- [Order state](https://github.com/icraftds/ic-market-fe/blob/main/app/composables/useOrderStore.js): `app/composables/useOrderStore.js`
- [Find order](https://github.com/icraftds/ic-market-fe/blob/main/app/composables/useFindOrder.js): `app/composables/useFindOrder.js`

### Seller and administration

- [Seller workspace](https://github.com/icraftds/ic-market-fe/blob/main/app/pages/seller/dashboard.vue): `app/pages/seller/dashboard.vue`
- [Seller products](https://github.com/icraftds/ic-market-fe/blob/main/app/pages/seller/products/index.vue): `app/pages/seller/products/index.vue`
- [Seller applications](https://github.com/icraftds/ic-market-fe/blob/main/app/composables/useSellerApplications.js): `app/composables/useSellerApplications.js`
- [Admin workspace](https://github.com/icraftds/ic-market-fe/tree/main/app/pages/admin): `app/pages/admin`

### Identity and API access

- [Login and SSO](https://github.com/icraftds/ic-market-fe/blob/main/app/pages/login.vue): `app/pages/login.vue`
- [SSO client auth](https://github.com/icraftds/ic-market-fe/blob/main/app/composables/useSsoAuth.js): `app/composables/useSsoAuth.js`
- [SSO route adapters](https://github.com/icraftds/ic-market-fe/blob/main/server/routes/auth/callback.get.js): `server/routes/auth/callback.get.js`
- [SSO request handler](https://github.com/icraftds/ic-market-fe/blob/main/server/sso/handler.js): `server/sso/handler.js`
- [SSO runtime](https://github.com/icraftds/ic-market-fe/blob/main/server/sso/runtime.js): `server/sso/runtime.js`
- [OAuth provider client](https://github.com/icraftds/ic-market-fe/blob/main/server/sso/oauth.js): `server/sso/oauth.js`
- [Session service](https://github.com/icraftds/ic-market-fe/blob/main/server/sso/session.js): `server/sso/session.js`
- [SSO security checks](https://github.com/icraftds/ic-market-fe/blob/main/server/sso/security.js): `server/sso/security.js`
- [Redis session store](https://github.com/icraftds/ic-market-fe/blob/main/server/sso/store.js): `server/sso/store.js`

### Other components

- **Shopper**
- **Upstash Redis**

## Connections

- SSO route adapters → SSO request handler: delegates to (evidence: `server/routes/auth/callback.get.js`)
- SSO request handler → SSO security checks: validates with (evidence: `server/sso/handler.js`)
- SSO request handler → Session service: uses sessions (evidence: `server/sso/handler.js`)
- SSO request handler → OAuth provider client: uses OAuth (evidence: `server/sso/handler.js`)
- Session service → SSO security checks: validates callbacks (evidence: `server/sso/session.js`)
- Session service → OAuth provider client: refreshes tokens (evidence: `server/sso/session.js`)
- Session service → Redis session store: persists sessions (evidence: `server/sso/session.js`)
- OAuth provider client → SSO security checks: checks responses (evidence: `server/sso/oauth.js`)
- Redis session store → Upstash Redis: stores records (evidence: `server/sso/store.js`)