# wilsonjohntadlip/expense-tracker architecture

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

- Interactive diagram: https://gitdiagram.com/wilsonjohntadlip/expense-tracker
- Repository: https://github.com/wilsonjohntadlip/expense-tracker

## Overview

This checkout contains the Expense Tracker’s Figma UI-builder plugin, not the backend or frontend described as planned repository folders in the README. Its workflow is to run in an open Figma file, prepare design foundations, build reusable components, and create screen designs. The sampled code shows the setup calls and component-building call; screen generation is identified in the file’s comments, but its invocation is not visible in the excerpt.

Main entry points: [`design/figma-plugin/code.js`](https://github.com/wilsonjohntadlip/expense-tracker/blob/main/design/figma-plugin/code.js) (Plugin entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_orchestration["Plugin orchestration"]
  node_plugin["Plugin entry<br/>[code.js]"]
end

subgraph group_design_system["Design system"]
  node_foundations["Foundations setup<br/>[code.js]"]
end

subgraph group_ui_generation["UI generation"]
  node_components["Component builder<br/>[code.js]"]
  node_screens["Screen builder<br/>[code.js]"]
end

node_designer(("Designer"))
node_figma["Open Figma file"]

node_designer -->|"runs"| node_plugin
node_plugin -->|"builds in"| node_figma
node_plugin -->|"sets up"| node_foundations
node_plugin -->|"builds"| node_components
node_plugin -.->|"generates"| node_screens

click node_plugin "https://github.com/wilsonjohntadlip/expense-tracker/blob/main/design/figma-plugin/code.js"
click node_foundations "https://github.com/wilsonjohntadlip/expense-tracker/blob/main/design/figma-plugin/code.js"
click node_components "https://github.com/wilsonjohntadlip/expense-tracker/blob/main/design/figma-plugin/code.js"
click node_screens "https://github.com/wilsonjohntadlip/expense-tracker/blob/main/design/figma-plugin/code.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_plugin toneBlue
class node_foundations toneAmber
class node_components,node_screens toneMint
class node_designer,node_figma toneIndigo
```

## Components

### Plugin orchestration

- [Plugin entry](https://github.com/wilsonjohntadlip/expense-tracker/blob/main/design/figma-plugin/code.js): `design/figma-plugin/code.js`

### Design system

- [Foundations setup](https://github.com/wilsonjohntadlip/expense-tracker/blob/main/design/figma-plugin/code.js): `design/figma-plugin/code.js`

### UI generation

- [Component builder](https://github.com/wilsonjohntadlip/expense-tracker/blob/main/design/figma-plugin/code.js): `design/figma-plugin/code.js`
- [Screen builder](https://github.com/wilsonjohntadlip/expense-tracker/blob/main/design/figma-plugin/code.js): `design/figma-plugin/code.js`

### Other components

- **Designer**
- **Open Figma file**

## Connections

- Designer → Plugin entry: runs (evidence: `design/figma-plugin/code.js`)
- Plugin entry → Open Figma file: builds in (evidence: `design/figma-plugin/code.js`)
- Plugin entry → Foundations setup: sets up (evidence: `design/figma-plugin/code.js`)
- Plugin entry → Component builder: builds (evidence: `design/figma-plugin/code.js`)
- Plugin entry → Screen builder: generates (evidence: `design/figma-plugin/code.js`)