# paulonantet/finance architecture

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

- Interactive diagram: https://gitdiagram.com/paulonantet/finance
- Repository: https://github.com/paulonantet/finance

## Overview

This is a browser-based personal finance tracker: users manage income and expenses, filter and review financial summaries, configure categories and payment options, and save or transfer their data. The browser app is served by a small Express server, which reads and writes a JSON file. The source excerpts show transaction editing, installment handling, filtering, configuration, summaries, and import/export; because the excerpts omit parts of the app, the graph limits internal wiring to relationships supported by the available evidence.

Main entry points: [`server.js`](https://github.com/paulonantet/finance/blob/master/server.js) (Express API), [`index.html`](https://github.com/paulonantet/finance/blob/master/index.html) (App interface), [`script.js`](https://github.com/paulonantet/finance/blob/master/script.js) (Browser app), [`db.json`](https://github.com/paulonantet/finance/blob/master/db.json) (Finance data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Finance app"]
  node_page["App interface<br/>[index.html]"]
  node_app["Browser app<br/>[script.js]"]
  node_transactions["Transactions and installments<br/>[script.js]"]
  node_filters["Filters and slicers<br/>[script.js]"]
  node_summaries["Financial summaries<br/>[script.js]"]
  node_configuration["Finance configuration<br/>[script.js]"]
  node_transfer["JSON import and export<br/>[script.js]"]
end

subgraph group_server["Persistence service"]
  node_server["Express API<br/>[server.js]"]
end

subgraph group_state["Local data"]
  node_datafile[("Finance data<br/>[db.json]")]
end

node_user(("Finance user"))

node_user -->|"uses"| node_page
node_page -->|"loads"| node_app
node_user -->|"manages"| node_transactions
node_user -->|"filters"| node_filters
node_user -->|"configures"| node_configuration
node_user -->|"imports or exports"| node_transfer
node_transactions -->|"saves data"| node_server
node_app -->|"loads data"| node_server
node_server -->|"reads and writes"| node_datafile
node_user -->|"reviews"| node_summaries

click node_page "https://github.com/paulonantet/finance/blob/master/index.html"
click node_app "https://github.com/paulonantet/finance/blob/master/script.js"
click node_transactions "https://github.com/paulonantet/finance/blob/master/script.js"
click node_filters "https://github.com/paulonantet/finance/blob/master/script.js"
click node_summaries "https://github.com/paulonantet/finance/blob/master/script.js"
click node_configuration "https://github.com/paulonantet/finance/blob/master/script.js"
click node_transfer "https://github.com/paulonantet/finance/blob/master/script.js"
click node_server "https://github.com/paulonantet/finance/blob/master/server.js"
click node_datafile "https://github.com/paulonantet/finance/blob/master/db.json"

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_app,node_transactions,node_filters,node_summaries,node_configuration,node_transfer,node_user toneBlue
class node_server toneAmber
class node_datafile toneMint
```

## Components

### Finance app

- [App interface](https://github.com/paulonantet/finance/blob/master/index.html): `index.html`
- [Browser app](https://github.com/paulonantet/finance/blob/master/script.js): `script.js`
- [Transactions and installments](https://github.com/paulonantet/finance/blob/master/script.js): `script.js`
- [Filters and slicers](https://github.com/paulonantet/finance/blob/master/script.js): `script.js`
- [Financial summaries](https://github.com/paulonantet/finance/blob/master/script.js): `script.js`
- [Finance configuration](https://github.com/paulonantet/finance/blob/master/script.js): `script.js`
- [JSON import and export](https://github.com/paulonantet/finance/blob/master/script.js): `script.js`

### Persistence service

- [Express API](https://github.com/paulonantet/finance/blob/master/server.js): `server.js`

### Local data

- [Finance data](https://github.com/paulonantet/finance/blob/master/db.json): `db.json`

### Other components

- **Finance user**

## Connections

- Finance user → App interface: uses
- App interface → Browser app: loads
- Finance user → Transactions and installments: manages
- Finance user → Filters and slicers: filters
- Finance user → Finance configuration: configures
- Finance user → JSON import and export: imports or exports
- Transactions and installments → Express API: saves data
- Browser app → Express API: loads data
- Express API → Finance data: reads and writes
- Finance user → Financial summaries: reviews