# mafubo-mark/forme architecture

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

- Interactive diagram: https://gitdiagram.com/mafubo-mark/forme
- Repository: https://github.com/mafubo-mark/forme

## Overview

Forme is a static, browser-based demo for designing and ordering custom prosthetic covers. Users move from the design flow—video or image selection, illustrative model preview, color and inspiration, and material choice—to saved designs, demo checkout, order history, and delivery status; sign-in and account activity support that journey. The README says designs, orders, and the demo session use browser local storage. Source excerpts were unavailable, so links reflect documented behavior only; reserved backend APIs are not shown as active integrations.

Main entry points: [`dist/js/main.js`](https://github.com/mafubo-mark/forme/blob/main/dist/js/main.js) (Shared interactions), [`dist/create.html`](https://github.com/mafubo-mark/forme/blob/main/dist/create.html) (Design flow), [`dist/prosthetic.html`](https://github.com/mafubo-mark/forme/blob/main/dist/prosthetic.html) (Saved designs), [`dist/order.html`](https://github.com/mafubo-mark/forme/blob/main/dist/order.html) (Order history)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_design["Design experience"]
  node_home["Home and process<br/>[index.html]"]
  node_create["Design flow<br/>[create.html]"]
  node_media["Media selection<br/>[create.html]"]
  node_preview["Model preview<br/>[create.html]"]
  node_finish["Color and material<br/>[create.html]"]
  node_gallery["Saved designs<br/>[prosthetic.html]"]
end

subgraph group_commerce["Orders and delivery"]
  node_checkout["Demo checkout<br/>[checkout.html]"]
  node_orders["Order history<br/>[order.html]"]
  node_delivery["Delivery status<br/>[delivery.html]"]
end

subgraph group_account["Account"]
  node_login["Demo sign-in<br/>[login.html]"]
  node_accountpage["Profile and activity<br/>[account.html]"]
end

subgraph group_runtime["Browser runtime"]
  node_runtime["Shared interactions<br/>[main.js]"]
  node_browserstate[("Browser local storage")]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_visitor -->|"designs"| node_create
node_visitor -->|"signs in"| node_login
node_visitor -->|"manages designs"| node_gallery
node_visitor -->|"checks out"| node_checkout
node_visitor -->|"views orders"| node_orders
node_visitor -->|"checks delivery"| node_delivery
node_visitor -->|"views account"| node_accountpage
node_create -->|"selects media"| node_media
node_create -->|"previews model"| node_preview
node_create -->|"chooses finish"| node_finish
node_create -->|"uses interactions"| node_runtime
node_gallery -->|"uses interactions"| node_runtime
node_checkout -->|"uses interactions"| node_runtime
node_orders -->|"uses interactions"| node_runtime
node_delivery -->|"uses interactions"| node_runtime
node_login -->|"uses interactions"| node_runtime
node_accountpage -->|"uses interactions"| node_runtime
node_runtime -->|"stores session, designs and orders"| node_browserstate
node_gallery -->|"reads saved designs"| node_browserstate
node_orders -->|"reads order history"| node_browserstate
node_delivery -->|"reads delivery status"| node_browserstate
node_accountpage -->|"reads activity"| node_browserstate

click node_home "https://github.com/mafubo-mark/forme/blob/main/dist/index.html"
click node_create "https://github.com/mafubo-mark/forme/blob/main/dist/create.html"
click node_media "https://github.com/mafubo-mark/forme/blob/main/dist/create.html"
click node_preview "https://github.com/mafubo-mark/forme/blob/main/dist/create.html"
click node_finish "https://github.com/mafubo-mark/forme/blob/main/dist/create.html"
click node_gallery "https://github.com/mafubo-mark/forme/blob/main/dist/prosthetic.html"
click node_checkout "https://github.com/mafubo-mark/forme/blob/main/dist/checkout.html"
click node_orders "https://github.com/mafubo-mark/forme/blob/main/dist/order.html"
click node_delivery "https://github.com/mafubo-mark/forme/blob/main/dist/delivery.html"
click node_login "https://github.com/mafubo-mark/forme/blob/main/dist/login.html"
click node_accountpage "https://github.com/mafubo-mark/forme/blob/main/dist/account.html"
click node_runtime "https://github.com/mafubo-mark/forme/blob/main/dist/js/main.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_home,node_create,node_media,node_preview,node_finish,node_gallery toneBlue
class node_checkout,node_orders,node_delivery toneAmber
class node_login,node_accountpage toneMint
class node_runtime,node_browserstate toneRose
class node_visitor toneIndigo
```

## Components

### Design experience

- [Home and process](https://github.com/mafubo-mark/forme/blob/main/dist/index.html): `dist/index.html`
- [Design flow](https://github.com/mafubo-mark/forme/blob/main/dist/create.html): `dist/create.html`
- [Media selection](https://github.com/mafubo-mark/forme/blob/main/dist/create.html): `dist/create.html`
- [Model preview](https://github.com/mafubo-mark/forme/blob/main/dist/create.html): `dist/create.html`
- [Color and material](https://github.com/mafubo-mark/forme/blob/main/dist/create.html): `dist/create.html`
- [Saved designs](https://github.com/mafubo-mark/forme/blob/main/dist/prosthetic.html): `dist/prosthetic.html`

### Orders and delivery

- [Demo checkout](https://github.com/mafubo-mark/forme/blob/main/dist/checkout.html): `dist/checkout.html`
- [Order history](https://github.com/mafubo-mark/forme/blob/main/dist/order.html): `dist/order.html`
- [Delivery status](https://github.com/mafubo-mark/forme/blob/main/dist/delivery.html): `dist/delivery.html`

### Account

- [Demo sign-in](https://github.com/mafubo-mark/forme/blob/main/dist/login.html): `dist/login.html`
- [Profile and activity](https://github.com/mafubo-mark/forme/blob/main/dist/account.html): `dist/account.html`

### Browser runtime

- [Shared interactions](https://github.com/mafubo-mark/forme/blob/main/dist/js/main.js): `dist/js/main.js`
- **Browser local storage**

### Other components

- **Visitor**

## Connections

- Visitor → Home and process: opens
- Visitor → Design flow: designs
- Visitor → Demo sign-in: signs in
- Visitor → Saved designs: manages designs
- Visitor → Demo checkout: checks out
- Visitor → Order history: views orders
- Visitor → Delivery status: checks delivery
- Visitor → Profile and activity: views account
- Design flow → Media selection: selects media
- Design flow → Model preview: previews model
- Design flow → Color and material: chooses finish
- Design flow → Shared interactions: uses interactions
- Saved designs → Shared interactions: uses interactions
- Demo checkout → Shared interactions: uses interactions
- Order history → Shared interactions: uses interactions
- Delivery status → Shared interactions: uses interactions
- Demo sign-in → Shared interactions: uses interactions
- Profile and activity → Shared interactions: uses interactions
- Shared interactions → Browser local storage: stores session, designs and orders
- Saved designs → Browser local storage: reads saved designs
- Order history → Browser local storage: reads order history
- Delivery status → Browser local storage: reads delivery status
- Profile and activity → Browser local storage: reads activity