# cedrexpelagio/expensy architecture

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

- Interactive diagram: https://gitdiagram.com/cedrexpelagio/expensy
- Repository: https://github.com/cedrexpelagio/expensy

## Overview

Expensy is a browser-based expense and budget tracker. Users manage expenses through a form, see them in a list, filter by category, and view a recalculated total. The single JavaScript module handles these interactions and persists expenses and user-added categories in browser local storage; the HTML supplies the interface and CSS styles it. The README also documents dynamic categories and add, edit, and delete flows. Source evidence is limited to the sampled script, so specific HTML element details and styling internals are not expanded.

Main entry points: [`script.js`](https://github.com/cedrexpelagio/expensy/blob/main/script.js) (Interaction controller), [`index.html`](https://github.com/cedrexpelagio/expensy/blob/main/index.html) (Expense page), [`style.css`](https://github.com/cedrexpelagio/expensy/blob/main/style.css) (Visual styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["User interface"]
  node_page["Expense page<br/>[index.html]"]
  node_styles["Visual styling<br/>[style.css]"]
end

subgraph group_expense["Expense management"]
  node_app["Interaction controller<br/>[script.js]"]
  node_expense_form["Expense form<br/>[index.html]"]
  node_expense_list["Expense list<br/>[index.html]"]
  node_total["Expense total<br/>[index.html]"]
  node_expense_state["Expense records<br/>[script.js]"]
end

subgraph group_category["Category management"]
  node_category_form["Category form<br/>[index.html]"]
  node_category_choices["Category choices<br/>[index.html]"]
  node_category_state["Category records<br/>[script.js]"]
end

subgraph group_persistence["Browser persistence"]
  node_storage[("Local storage")]
end

node_user(("User"))

node_user -->|"uses"| node_page
node_page -->|"styled by"| node_styles
node_page -->|"loads"| node_app
node_user -->|"enters expense"| node_expense_form
node_expense_form -->|"submits"| node_app
node_app -->|"adds or edits"| node_expense_state
node_app -->|"deletes"| node_expense_state
node_app -->|"filters"| node_expense_state
node_app -->|"renders"| node_expense_list
node_app -->|"updates"| node_total
node_user -->|"adds category"| node_category_form
node_category_form -->|"submits"| node_app
node_app -->|"records"| node_category_state
node_app -->|"adds choices"| node_category_choices
node_expense_state -->|"saved in"| node_storage
node_storage -->|"loads expenses"| node_app
node_category_state -->|"saved in"| node_storage
node_storage -->|"loads categories"| node_app

click node_page "https://github.com/cedrexpelagio/expensy/blob/main/index.html"
click node_styles "https://github.com/cedrexpelagio/expensy/blob/main/style.css"
click node_app "https://github.com/cedrexpelagio/expensy/blob/main/script.js"
click node_expense_form "https://github.com/cedrexpelagio/expensy/blob/main/index.html"
click node_expense_list "https://github.com/cedrexpelagio/expensy/blob/main/index.html"
click node_total "https://github.com/cedrexpelagio/expensy/blob/main/index.html"
click node_expense_state "https://github.com/cedrexpelagio/expensy/blob/main/script.js"
click node_category_form "https://github.com/cedrexpelagio/expensy/blob/main/index.html"
click node_category_choices "https://github.com/cedrexpelagio/expensy/blob/main/index.html"
click node_category_state "https://github.com/cedrexpelagio/expensy/blob/main/script.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_page,node_styles,node_user toneBlue
class node_app,node_expense_form,node_expense_list,node_total,node_expense_state toneAmber
class node_category_form,node_category_choices,node_category_state toneMint
class node_storage toneRose
```

## Components

### User interface

- [Expense page](https://github.com/cedrexpelagio/expensy/blob/main/index.html): `index.html`
- [Visual styling](https://github.com/cedrexpelagio/expensy/blob/main/style.css): `style.css`

### Expense management

- [Interaction controller](https://github.com/cedrexpelagio/expensy/blob/main/script.js): `script.js`
- [Expense form](https://github.com/cedrexpelagio/expensy/blob/main/index.html): `index.html`
- [Expense list](https://github.com/cedrexpelagio/expensy/blob/main/index.html): `index.html`
- [Expense total](https://github.com/cedrexpelagio/expensy/blob/main/index.html): `index.html`
- [Expense records](https://github.com/cedrexpelagio/expensy/blob/main/script.js): `script.js`

### Category management

- [Category form](https://github.com/cedrexpelagio/expensy/blob/main/index.html): `index.html`
- [Category choices](https://github.com/cedrexpelagio/expensy/blob/main/index.html): `index.html`
- [Category records](https://github.com/cedrexpelagio/expensy/blob/main/script.js): `script.js`

### Browser persistence

- **Local storage**

### Other components

- **User**

## Connections

- User → Expense page: uses
- Expense page → Visual styling: styled by
- Expense page → Interaction controller: loads
- User → Expense form: enters expense
- Expense form → Interaction controller: submits
- Interaction controller → Expense records: adds or edits
- Interaction controller → Expense records: deletes
- Interaction controller → Expense records: filters
- Interaction controller → Expense list: renders
- Interaction controller → Expense total: updates
- User → Category form: adds category
- Category form → Interaction controller: submits
- Interaction controller → Category records: records
- Interaction controller → Category choices: adds choices
- Expense records → Local storage: saved in
- Local storage → Interaction controller: loads expenses
- Category records → Local storage: saved in
- Local storage → Interaction controller: loads categories