# motiondreamatix/dreamboard-lite architecture

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

- Interactive diagram: https://gitdiagram.com/motiondreamatix/dreamboard-lite
- Repository: https://github.com/motiondreamatix/dreamboard-lite

## Overview

DreamBoard Lite is a static HTML/Alpine admin dashboard UI kit, not a backend application. Its user-facing flow is to open a dashboard page, inspect or interact with domain views, and see the UI update from the shared mock-data contract. The README documents broader page capabilities than the sampled source excerpts; those branches are represented at the existing pages-directory level. Runtime wiring is shown where documented, while build and audit tooling is excluded.

Main entry points: [`apps/01-html/src/js/app.js`](https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/src/js/app.js) (Alpine interactions), [`apps/01-html/src/components`](https://github.com/motiondreamatix/dreamboard-lite/tree/main/apps/01-html/src/components) (Shared components), [`apps/01-html/data/mockData.js`](https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/data/mockData.js) (Mock-data contract), [`apps/01-html/src/pages/charts.html`](https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/src/pages/charts.html) (Charts and analytics)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_views["Admin views"]
  node_admin["Dashboard home<br/>[index.html]"]
  node_orders["Orders and detail"]
  node_reports["Reports and builder"]
  node_analytics["Charts and analytics<br/>[charts.html]"]
  node_forms["Forms and notifications"]
  node_account["Auth and account"]
  node_billing["Billing and pricing"]
end

subgraph group_runtime["UI runtime"]
  node_components["Shared components"]
  node_alpine["Alpine interactions<br/>[app.js]"]
  node_layouts["Page layouts"]
end

subgraph group_content["Data and language"]
  node_mockdata["Mock-data contract<br/>[mockData.js]"]
  node_translations["English and German<br/>[i18n.js]"]
  node_worldmap["Map coordinates<br/>[world.js]"]
end

subgraph group_design["Design system"]
  node_styles["Tailwind styles<br/>[main.css]"]
  node_tokens["Theme tokens<br/>[theme.css]"]
end

node_visitor(("Dashboard user"))
node_backend["Optional API"]

node_visitor -->|"opens"| node_admin
node_visitor -->|"opens"| node_orders
node_visitor -->|"opens"| node_reports
node_visitor -->|"opens"| node_analytics
node_visitor -->|"opens"| node_forms
node_visitor -->|"opens"| node_account
node_visitor -->|"opens"| node_billing
node_admin -->|"renders"| node_components
node_orders -->|"renders"| node_components
node_reports -->|"renders"| node_components
node_analytics -->|"renders"| node_components
node_forms -->|"renders"| node_components
node_account -->|"renders"| node_components
node_billing -->|"renders"| node_components
node_admin -->|"binds interactions"| node_alpine
node_orders -->|"binds interactions"| node_alpine
node_reports -->|"binds interactions"| node_alpine
node_analytics -->|"binds interactions"| node_alpine
node_forms -->|"binds interactions"| node_alpine
node_account -->|"binds interactions"| node_alpine
node_billing -->|"binds interactions"| node_alpine
node_admin -->|"binds data"| node_mockdata
node_orders -->|"binds data"| node_mockdata
node_reports -->|"binds data"| node_mockdata
node_analytics -->|"binds data"| node_mockdata
node_forms -->|"binds data"| node_mockdata
node_account -->|"binds data"| node_mockdata
node_billing -->|"binds data"| node_mockdata
node_alpine -->|"reads and updates"| node_mockdata
node_alpine -->|"translates strings"| node_translations
node_analytics -->|"uses map data"| node_worldmap
node_components -->|"styled by"| node_styles
node_styles -->|"uses tokens"| node_tokens
node_layouts -->|"includes partials"| node_components
node_alpine -.->|"auth requests"| node_backend
node_backend -.->|"returns responses"| node_alpine

click node_admin "https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/src/pages/index.html"
click node_orders "https://github.com/motiondreamatix/dreamboard-lite/tree/main/apps/01-html/src/pages"
click node_reports "https://github.com/motiondreamatix/dreamboard-lite/tree/main/apps/01-html/src/pages"
click node_analytics "https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/src/pages/charts.html"
click node_forms "https://github.com/motiondreamatix/dreamboard-lite/tree/main/apps/01-html/src/pages"
click node_account "https://github.com/motiondreamatix/dreamboard-lite/tree/main/apps/01-html/src/pages"
click node_billing "https://github.com/motiondreamatix/dreamboard-lite/tree/main/apps/01-html/src/pages"
click node_components "https://github.com/motiondreamatix/dreamboard-lite/tree/main/apps/01-html/src/components"
click node_alpine "https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/src/js/app.js"
click node_layouts "https://github.com/motiondreamatix/dreamboard-lite/tree/main/apps/01-html/src/layouts"
click node_mockdata "https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/data/mockData.js"
click node_translations "https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/data/i18n.js"
click node_worldmap "https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/data/world.js"
click node_styles "https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/src/css/main.css"
click node_tokens "https://github.com/motiondreamatix/dreamboard-lite/blob/main/packages/tailwind-config/theme.css"

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_admin,node_orders,node_reports,node_analytics,node_forms,node_account,node_billing,node_visitor toneBlue
class node_components,node_alpine,node_layouts toneAmber
class node_mockdata,node_translations,node_worldmap,node_backend toneMint
class node_styles,node_tokens toneRose
```

## Components

### Admin views

- [Dashboard home](https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/src/pages/index.html): `apps/01-html/src/pages/index.html`
- [Orders and detail](https://github.com/motiondreamatix/dreamboard-lite/tree/main/apps/01-html/src/pages): `apps/01-html/src/pages`
- [Reports and builder](https://github.com/motiondreamatix/dreamboard-lite/tree/main/apps/01-html/src/pages): `apps/01-html/src/pages`
- [Charts and analytics](https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/src/pages/charts.html): `apps/01-html/src/pages/charts.html`
- [Forms and notifications](https://github.com/motiondreamatix/dreamboard-lite/tree/main/apps/01-html/src/pages): `apps/01-html/src/pages`
- [Auth and account](https://github.com/motiondreamatix/dreamboard-lite/tree/main/apps/01-html/src/pages): `apps/01-html/src/pages`
- [Billing and pricing](https://github.com/motiondreamatix/dreamboard-lite/tree/main/apps/01-html/src/pages): `apps/01-html/src/pages`

### UI runtime

- [Shared components](https://github.com/motiondreamatix/dreamboard-lite/tree/main/apps/01-html/src/components): `apps/01-html/src/components`
- [Alpine interactions](https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/src/js/app.js): `apps/01-html/src/js/app.js`
- [Page layouts](https://github.com/motiondreamatix/dreamboard-lite/tree/main/apps/01-html/src/layouts): `apps/01-html/src/layouts`

### Data and language

- [Mock-data contract](https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/data/mockData.js): `apps/01-html/data/mockData.js`
- [English and German](https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/data/i18n.js): `apps/01-html/data/i18n.js`
- [Map coordinates](https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/data/world.js): `apps/01-html/data/world.js`

### Design system

- [Tailwind styles](https://github.com/motiondreamatix/dreamboard-lite/blob/main/apps/01-html/src/css/main.css): `apps/01-html/src/css/main.css`
- [Theme tokens](https://github.com/motiondreamatix/dreamboard-lite/blob/main/packages/tailwind-config/theme.css): `packages/tailwind-config/theme.css`

### Other components

- **Dashboard user**
- **Optional API**

## Connections

- Dashboard user → Dashboard home: opens
- Dashboard user → Orders and detail: opens
- Dashboard user → Reports and builder: opens
- Dashboard user → Charts and analytics: opens
- Dashboard user → Forms and notifications: opens
- Dashboard user → Auth and account: opens
- Dashboard user → Billing and pricing: opens
- Dashboard home → Shared components: renders
- Orders and detail → Shared components: renders
- Reports and builder → Shared components: renders
- Charts and analytics → Shared components: renders
- Forms and notifications → Shared components: renders
- Auth and account → Shared components: renders
- Billing and pricing → Shared components: renders
- Dashboard home → Alpine interactions: binds interactions
- Orders and detail → Alpine interactions: binds interactions
- Reports and builder → Alpine interactions: binds interactions
- Charts and analytics → Alpine interactions: binds interactions
- Forms and notifications → Alpine interactions: binds interactions
- Auth and account → Alpine interactions: binds interactions
- Billing and pricing → Alpine interactions: binds interactions
- Dashboard home → Mock-data contract: binds data
- Orders and detail → Mock-data contract: binds data
- Reports and builder → Mock-data contract: binds data
- Charts and analytics → Mock-data contract: binds data
- Forms and notifications → Mock-data contract: binds data
- Auth and account → Mock-data contract: binds data
- Billing and pricing → Mock-data contract: binds data
- Alpine interactions → Mock-data contract: reads and updates
- Alpine interactions → English and German: translates strings
- Charts and analytics → Map coordinates: uses map data
- Shared components → Tailwind styles: styled by
- Tailwind styles → Theme tokens: uses tokens
- Page layouts → Shared components: includes partials
- Alpine interactions → Optional API: auth requests
- Optional API → Alpine interactions: returns responses