# soenug66/wristkaki architecture

> Architecture diagram of the GitHub repository soenug66/wristkaki, 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/soenug66/wristkaki
- Repository: https://github.com/soenug66/wristkaki

## Overview

Wrist Kaki is a static AliExpress affiliate minisite for Singapore Casio-watch shoppers. Its main workflow is to retrieve and filter product listings, create product pages with buyer guidance and affiliate links, then publish the generated site for visitors to browse and buy. The README also describes counterfeit warnings, editorial guides, a live Singapore clock and a case-size finder. The excerpts show the catalog, article, template and optional Supabase behavior; other page-generation details are supported by the README or module references, not fully sampled source.

Main entry points: [`scripts/build.mjs`](https://github.com/soenug66/wristkaki/blob/main/scripts/build.mjs) (Site builder), [`scripts/lib/ali.mjs`](https://github.com/soenug66/wristkaki/blob/main/scripts/lib/ali.mjs) (AliExpress catalog), [`scripts/lib/article.mjs`](https://github.com/soenug66/wristkaki/blob/main/scripts/lib/article.mjs) (Product guidance), [`scripts/lib/util.mjs`](https://github.com/soenug66/wristkaki/blob/main/scripts/lib/util.mjs) (Text and money utilities)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_catalog["Catalog and data"]
  node_ali["AliExpress catalog<br/>[ali.mjs]"]
  node_sample["Preview catalog<br/>[sample.mjs]"]
  node_supabase[("Supabase cache<br/>[supabase.mjs]")]
  node_util["Text and money utilities<br/>[util.mjs]"]
end

subgraph group_content["Buyer content"]
  node_article["Product guidance<br/>[article.mjs]"]
  node_guidesindex["Guide index<br/>[guides.mjs]"]
  node_guidesa["Guide collection A<br/>[guides_a.mjs]"]
  node_guidesb["Guide collection B<br/>[guides_b.mjs]"]
end

subgraph group_site["Static site"]
  node_builder["Site builder<br/>[build.mjs]"]
  node_templates["Page templates<br/>[templates.mjs]"]
  node_generatedsite["Generated static pages<br/>[build.mjs]"]
end

subgraph group_visitor["Visitor experience"]
  node_publicassets["Browser assets<br/>[app.js]"]
  node_sizefinder["Case size finder<br/>[app.js]"]
  node_clock["Singapore live clock<br/>[app.js]"]
end

node_shopper(("Shopper"))
node_aliexpress{{"AliExpress API"}}
node_fxservice{{"Exchange-rate API"}}
node_affiliate{{"Affiliate listings"}}

node_builder -->|"fetches listings"| node_ali
node_builder -->|"loads preview data"| node_sample
node_ali -->|"queries products"| node_aliexpress
node_ali -->|"gets exchange rate"| node_fxservice
node_builder -.->|"builds product guidance"| node_article
node_article -->|"reads cached articles"| node_supabase
node_builder -.->|"stores catalog snapshot"| node_supabase
node_builder -.->|"renders pages"| node_templates
node_templates -->|"uses product details"| node_article
node_builder -->|"loads guide content"| node_guidesindex
node_guidesindex -->|"imports guides"| node_guidesa
node_guidesindex -->|"imports guides"| node_guidesb
node_ali -->|"cleans and formats"| node_util
node_sample -->|"cleans and slugs"| node_util
node_article -->|"formats content"| node_util
node_templates -->|"formats pages"| node_util
node_builder -->|"writes static output"| node_generatedsite
node_shopper -.->|"browses"| node_generatedsite
node_generatedsite -->|"links to offers"| node_affiliate
node_generatedsite -.->|"provides finder"| node_sizefinder
node_generatedsite -.->|"shows live time"| node_clock
node_generatedsite -.->|"includes browser assets"| node_publicassets

click node_builder "https://github.com/soenug66/wristkaki/blob/main/scripts/build.mjs"
click node_ali "https://github.com/soenug66/wristkaki/blob/main/scripts/lib/ali.mjs"
click node_sample "https://github.com/soenug66/wristkaki/blob/main/scripts/lib/sample.mjs"
click node_supabase "https://github.com/soenug66/wristkaki/blob/main/scripts/lib/supabase.mjs"
click node_article "https://github.com/soenug66/wristkaki/blob/main/scripts/lib/article.mjs"
click node_templates "https://github.com/soenug66/wristkaki/blob/main/scripts/lib/templates.mjs"
click node_guidesindex "https://github.com/soenug66/wristkaki/blob/main/content/guides.mjs"
click node_guidesa "https://github.com/soenug66/wristkaki/blob/main/content/guides_a.mjs"
click node_guidesb "https://github.com/soenug66/wristkaki/blob/main/content/guides_b.mjs"
click node_util "https://github.com/soenug66/wristkaki/blob/main/scripts/lib/util.mjs"
click node_publicassets "https://github.com/soenug66/wristkaki/blob/main/public/app.js"
click node_generatedsite "https://github.com/soenug66/wristkaki/blob/main/scripts/build.mjs"
click node_sizefinder "https://github.com/soenug66/wristkaki/blob/main/public/app.js"
click node_clock "https://github.com/soenug66/wristkaki/blob/main/public/app.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_ali,node_sample,node_supabase,node_util toneBlue
class node_article,node_guidesindex,node_guidesa,node_guidesb toneAmber
class node_builder,node_templates,node_generatedsite,node_aliexpress,node_fxservice toneMint
class node_publicassets,node_sizefinder,node_clock toneRose
class node_shopper,node_affiliate toneIndigo
```

## Components

### Catalog and data

- [AliExpress catalog](https://github.com/soenug66/wristkaki/blob/main/scripts/lib/ali.mjs): `scripts/lib/ali.mjs`
- [Preview catalog](https://github.com/soenug66/wristkaki/blob/main/scripts/lib/sample.mjs): `scripts/lib/sample.mjs`
- [Supabase cache](https://github.com/soenug66/wristkaki/blob/main/scripts/lib/supabase.mjs): `scripts/lib/supabase.mjs`
- [Text and money utilities](https://github.com/soenug66/wristkaki/blob/main/scripts/lib/util.mjs): `scripts/lib/util.mjs`

### Buyer content

- [Product guidance](https://github.com/soenug66/wristkaki/blob/main/scripts/lib/article.mjs): `scripts/lib/article.mjs`
- [Guide index](https://github.com/soenug66/wristkaki/blob/main/content/guides.mjs): `content/guides.mjs`
- [Guide collection A](https://github.com/soenug66/wristkaki/blob/main/content/guides_a.mjs): `content/guides_a.mjs`
- [Guide collection B](https://github.com/soenug66/wristkaki/blob/main/content/guides_b.mjs): `content/guides_b.mjs`

### Static site

- [Site builder](https://github.com/soenug66/wristkaki/blob/main/scripts/build.mjs): `scripts/build.mjs`
- [Page templates](https://github.com/soenug66/wristkaki/blob/main/scripts/lib/templates.mjs): `scripts/lib/templates.mjs`
- [Generated static pages](https://github.com/soenug66/wristkaki/blob/main/scripts/build.mjs): `scripts/build.mjs`

### Visitor experience

- [Browser assets](https://github.com/soenug66/wristkaki/blob/main/public/app.js): `public/app.js`
- [Case size finder](https://github.com/soenug66/wristkaki/blob/main/public/app.js): `public/app.js`
- [Singapore live clock](https://github.com/soenug66/wristkaki/blob/main/public/app.js): `public/app.js`

### Other components

- **Shopper**
- **AliExpress API**
- **Exchange-rate API**
- **Affiliate listings**

## Connections

- Site builder → AliExpress catalog: fetches listings (evidence: `scripts/build.mjs`)
- Site builder → Preview catalog: loads preview data (evidence: `scripts/build.mjs`)
- AliExpress catalog → AliExpress API: queries products (evidence: `scripts/lib/ali.mjs`)
- AliExpress catalog → Exchange-rate API: gets exchange rate (evidence: `scripts/lib/ali.mjs`)
- Site builder → Product guidance: builds product guidance (evidence: `scripts/build.mjs`)
- Product guidance → Supabase cache: reads cached articles (evidence: `scripts/lib/article.mjs`)
- Site builder → Supabase cache: stores catalog snapshot (evidence: `scripts/build.mjs`)
- Site builder → Page templates: renders pages (evidence: `scripts/build.mjs`)
- Page templates → Product guidance: uses product details (evidence: `scripts/lib/templates.mjs`)
- Site builder → Guide index: loads guide content (evidence: `scripts/build.mjs`)
- Guide index → Guide collection A: imports guides (evidence: `content/guides.mjs`)
- Guide index → Guide collection B: imports guides (evidence: `content/guides.mjs`)
- AliExpress catalog → Text and money utilities: cleans and formats (evidence: `scripts/lib/ali.mjs`)
- Preview catalog → Text and money utilities: cleans and slugs (evidence: `scripts/lib/sample.mjs`)
- Product guidance → Text and money utilities: formats content (evidence: `scripts/lib/article.mjs`)
- Page templates → Text and money utilities: formats pages (evidence: `scripts/lib/templates.mjs`)
- Site builder → Generated static pages: writes static output (evidence: `scripts/build.mjs`)
- Shopper → Generated static pages: browses
- Generated static pages → Affiliate listings: links to offers
- Generated static pages → Case size finder: provides finder (evidence: `README.md`)
- Generated static pages → Singapore live clock: shows live time (evidence: `README.md`)
- Generated static pages → Browser assets: includes browser assets