# coderblack25/runnel architecture

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

- Interactive diagram: https://gitdiagram.com/coderblack25/runnel
- Repository: https://github.com/coderblack25/runnel

## Overview

This is a browser-based personal-finance app for tracking accounts, transactions, categories, budgets, and monthly summaries. Users enter or import transactions, organize them by account and category, then review balances and spending; the app also supports account and category management and recurring-transaction handling. The visible runtime flow is App view selection → feature components → finance data hooks or store → database service. The README is only a Vite template description, so product capabilities here are inferred from the source index and excerpts; unsampled wiring is omitted where it cannot be verified.

Main entry points: [`src/App.tsx`](https://github.com/coderblack25/runnel/blob/main/src/App.tsx) (Application views), [`src/hooks/useFinanceData.ts`](https://github.com/coderblack25/runnel/blob/main/src/hooks/useFinanceData.ts) (Finance data hooks), [`src/store/store.ts`](https://github.com/coderblack25/runnel/blob/main/src/store/store.ts) (Finance store), [`src/components/accounts/AccountForm.tsx`](https://github.com/coderblack25/runnel/blob/main/src/components/accounts/AccountForm.tsx) (Account entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_app["Application views<br/>[App.tsx]"]
  node_sidebar["Navigation<br/>[Sidebar.tsx]"]
end

subgraph group_finance["Finance features"]
  node_accounts["Accounts"]
  node_accountform["Account entry<br/>[AccountForm.tsx]"]
  node_accountbalance["Account balance<br/>[AccountBalance.tsx]"]
  node_transactions["Transactions"]
  node_transactionform["Transaction entry"]
  node_csv["CSV import<br/>[CsvImport.tsx]"]
  node_categories["Categories"]
  node_budgets["Category budgets<br/>[BudgetManager.tsx]"]
  node_summary["Monthly summary<br/>[MonthlySummary.tsx]"]
end

subgraph group_state["Data and calculations"]
  node_hook["Finance data hooks<br/>[useFinanceData.ts]"]
  node_store["Finance store<br/>[store.ts]"]
  node_db[("Finance database<br/>[db.ts]")]
  node_derived["Financial rollups<br/>[derived.ts]"]
  node_money["Money utilities<br/>[money.ts]"]
  node_recurring["Recurring transactions<br/>[recurring.ts]"]
  node_csvutil["CSV parsing<br/>[csv.ts]"]
end

subgraph group_shared["Shared components"]
  node_button["Button UI<br/>[button.tsx]"]
  node_input["Input UI<br/>[input.tsx]"]
  node_select["Select UI<br/>[select.tsx]"]
end

node_user(("Finance user"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_sidebar
node_app -->|"renders"| node_accounts
node_app -->|"renders"| node_accountform
node_app -->|"renders"| node_accountbalance
node_app -->|"renders"| node_transactions
node_app -->|"renders"| node_transactionform
node_app -->|"renders"| node_csv
node_app -->|"renders"| node_categories
node_app -->|"renders"| node_budgets
node_app -->|"renders"| node_summary
node_app -->|"loads accounts"| node_hook
node_hook -->|"queries"| node_db
node_hook -->|"tracks revision"| node_store
node_store -->|"persists changes"| node_db
node_accounts -->|"reads data"| node_hook
node_accounts -->|"computes rollups"| node_derived
node_accountbalance -->|"reads data"| node_hook
node_accountform -->|"creates account"| node_store
node_transactions -->|"reads data"| node_hook
node_transactions -->|"updates transactions"| node_store
node_transactions -->|"uses recurrence"| node_recurring
node_transactionform -->|"saves transaction"| node_store
node_csv -->|"parses file"| node_csvutil
node_csv -->|"imports transactions"| node_store
node_categories -->|"reads data"| node_hook
node_categories -->|"manages categories"| node_store
node_budgets -->|"reads data"| node_hook
node_budgets -->|"sets budgets"| node_store
node_summary -->|"reads data"| node_hook
node_summary -->|"computes summary"| node_derived
node_derived -->|"computes balance"| node_money
node_csv -->|"parses amounts"| node_money
node_accountform -->|"renders"| node_input
node_accountform -->|"renders"| node_select
node_categories -->|"renders"| node_button
node_budgets -->|"renders"| node_button

click node_app "https://github.com/coderblack25/runnel/blob/main/src/App.tsx"
click node_sidebar "https://github.com/coderblack25/runnel/blob/main/src/components/layout/Sidebar.tsx"
click node_accounts "https://github.com/coderblack25/runnel/blob/main/src/components/accounts/AccountsOverview.tsx"
click node_accountform "https://github.com/coderblack25/runnel/blob/main/src/components/accounts/AccountForm.tsx"
click node_accountbalance "https://github.com/coderblack25/runnel/blob/main/src/components/accounts/AccountBalance.tsx"
click node_transactions "https://github.com/coderblack25/runnel/blob/main/src/components/transactions/TransactionList.tsx"
click node_transactionform "https://github.com/coderblack25/runnel/blob/main/src/components/transactions/TransactionForm.tsx"
click node_csv "https://github.com/coderblack25/runnel/blob/main/src/components/transactions/CsvImport.tsx"
click node_categories "https://github.com/coderblack25/runnel/blob/main/src/components/categories/CategoryManager.tsx"
click node_budgets "https://github.com/coderblack25/runnel/blob/main/src/components/budgets/BudgetManager.tsx"
click node_summary "https://github.com/coderblack25/runnel/blob/main/src/components/summary/MonthlySummary.tsx"
click node_hook "https://github.com/coderblack25/runnel/blob/main/src/hooks/useFinanceData.ts"
click node_store "https://github.com/coderblack25/runnel/blob/main/src/store/store.ts"
click node_db "https://github.com/coderblack25/runnel/blob/main/src/services/db.ts"
click node_derived "https://github.com/coderblack25/runnel/blob/main/src/utils/derived.ts"
click node_money "https://github.com/coderblack25/runnel/blob/main/src/utils/money.ts"
click node_recurring "https://github.com/coderblack25/runnel/blob/main/src/utils/recurring.ts"
click node_csvutil "https://github.com/coderblack25/runnel/blob/main/src/utils/csv.ts"
click node_button "https://github.com/coderblack25/runnel/blob/main/src/components/ui/button.tsx"
click node_input "https://github.com/coderblack25/runnel/blob/main/src/components/ui/input.tsx"
click node_select "https://github.com/coderblack25/runnel/blob/main/src/components/ui/select.tsx"

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_app,node_sidebar,node_user toneBlue
class node_accounts,node_accountform,node_accountbalance,node_transactions,node_transactionform,node_csv,node_categories,node_budgets,node_summary toneAmber
class node_hook,node_store,node_db,node_derived,node_money,node_recurring,node_csvutil toneMint
class node_button,node_input,node_select toneRose
```

## Components

### App shell

- [Application views](https://github.com/coderblack25/runnel/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation](https://github.com/coderblack25/runnel/blob/main/src/components/layout/Sidebar.tsx): `src/components/layout/Sidebar.tsx`

### Finance features

- [Accounts](https://github.com/coderblack25/runnel/blob/main/src/components/accounts/AccountsOverview.tsx): `src/components/accounts/AccountsOverview.tsx`
- [Account entry](https://github.com/coderblack25/runnel/blob/main/src/components/accounts/AccountForm.tsx): `src/components/accounts/AccountForm.tsx`
- [Account balance](https://github.com/coderblack25/runnel/blob/main/src/components/accounts/AccountBalance.tsx): `src/components/accounts/AccountBalance.tsx`
- [Transactions](https://github.com/coderblack25/runnel/blob/main/src/components/transactions/TransactionList.tsx): `src/components/transactions/TransactionList.tsx`
- [Transaction entry](https://github.com/coderblack25/runnel/blob/main/src/components/transactions/TransactionForm.tsx): `src/components/transactions/TransactionForm.tsx`
- [CSV import](https://github.com/coderblack25/runnel/blob/main/src/components/transactions/CsvImport.tsx): `src/components/transactions/CsvImport.tsx`
- [Categories](https://github.com/coderblack25/runnel/blob/main/src/components/categories/CategoryManager.tsx): `src/components/categories/CategoryManager.tsx`
- [Category budgets](https://github.com/coderblack25/runnel/blob/main/src/components/budgets/BudgetManager.tsx): `src/components/budgets/BudgetManager.tsx`
- [Monthly summary](https://github.com/coderblack25/runnel/blob/main/src/components/summary/MonthlySummary.tsx): `src/components/summary/MonthlySummary.tsx`

### Data and calculations

- [Finance data hooks](https://github.com/coderblack25/runnel/blob/main/src/hooks/useFinanceData.ts): `src/hooks/useFinanceData.ts`
- [Finance store](https://github.com/coderblack25/runnel/blob/main/src/store/store.ts): `src/store/store.ts`
- [Finance database](https://github.com/coderblack25/runnel/blob/main/src/services/db.ts): `src/services/db.ts`
- [Financial rollups](https://github.com/coderblack25/runnel/blob/main/src/utils/derived.ts): `src/utils/derived.ts`
- [Money utilities](https://github.com/coderblack25/runnel/blob/main/src/utils/money.ts): `src/utils/money.ts`
- [Recurring transactions](https://github.com/coderblack25/runnel/blob/main/src/utils/recurring.ts): `src/utils/recurring.ts`
- [CSV parsing](https://github.com/coderblack25/runnel/blob/main/src/utils/csv.ts): `src/utils/csv.ts`

### Shared components

- [Button UI](https://github.com/coderblack25/runnel/blob/main/src/components/ui/button.tsx): `src/components/ui/button.tsx`
- [Input UI](https://github.com/coderblack25/runnel/blob/main/src/components/ui/input.tsx): `src/components/ui/input.tsx`
- [Select UI](https://github.com/coderblack25/runnel/blob/main/src/components/ui/select.tsx): `src/components/ui/select.tsx`

### Other components

- **Finance user**

## Connections

- Finance user → Application views: uses
- Application views → Navigation: renders (evidence: `src/App.tsx`)
- Application views → Accounts: renders (evidence: `src/App.tsx`)
- Application views → Account entry: renders (evidence: `src/App.tsx`)
- Application views → Account balance: renders (evidence: `src/App.tsx`)
- Application views → Transactions: renders (evidence: `src/App.tsx`)
- Application views → Transaction entry: renders (evidence: `src/App.tsx`)
- Application views → CSV import: renders (evidence: `src/App.tsx`)
- Application views → Categories: renders (evidence: `src/App.tsx`)
- Application views → Category budgets: renders (evidence: `src/App.tsx`)
- Application views → Monthly summary: renders (evidence: `src/App.tsx`)
- Application views → Finance data hooks: loads accounts (evidence: `src/App.tsx`)
- Finance data hooks → Finance database: queries (evidence: `src/hooks/useFinanceData.ts`)
- Finance data hooks → Finance store: tracks revision (evidence: `src/hooks/useFinanceData.ts`)
- Finance store → Finance database: persists changes (evidence: `src/store/store.ts`)
- Accounts → Finance data hooks: reads data (evidence: `src/components/accounts/AccountsOverview.tsx`)
- Accounts → Financial rollups: computes rollups (evidence: `src/components/accounts/AccountsOverview.tsx`)
- Account balance → Finance data hooks: reads data (evidence: `src/components/accounts/AccountBalance.tsx`)
- Account entry → Finance store: creates account (evidence: `src/components/accounts/AccountForm.tsx`)
- Transactions → Finance data hooks: reads data (evidence: `src/components/transactions/TransactionList.tsx`)
- Transactions → Finance store: updates transactions (evidence: `src/components/transactions/TransactionList.tsx`)
- Transactions → Recurring transactions: uses recurrence (evidence: `src/components/transactions/TransactionList.tsx`)
- Transaction entry → Finance store: saves transaction (evidence: `src/components/transactions/TransactionForm.tsx`)
- CSV import → CSV parsing: parses file (evidence: `src/components/transactions/CsvImport.tsx`)
- CSV import → Finance store: imports transactions (evidence: `src/components/transactions/CsvImport.tsx`)
- Categories → Finance data hooks: reads data (evidence: `src/components/categories/CategoryManager.tsx`)
- Categories → Finance store: manages categories (evidence: `src/components/categories/CategoryManager.tsx`)
- Category budgets → Finance data hooks: reads data (evidence: `src/components/budgets/BudgetManager.tsx`)
- Category budgets → Finance store: sets budgets (evidence: `src/components/budgets/BudgetManager.tsx`)
- Monthly summary → Finance data hooks: reads data (evidence: `src/components/summary/MonthlySummary.tsx`)
- Monthly summary → Financial rollups: computes summary (evidence: `src/components/summary/MonthlySummary.tsx`)
- Financial rollups → Money utilities: computes balance (evidence: `src/utils/derived.ts`)
- CSV import → Money utilities: parses amounts (evidence: `src/components/transactions/CsvImport.tsx`)
- Account entry → Input UI: renders (evidence: `src/components/accounts/AccountForm.tsx`)
- Account entry → Select UI: renders (evidence: `src/components/accounts/AccountForm.tsx`)
- Categories → Button UI: renders (evidence: `src/components/categories/CategoryManager.tsx`)
- Category budgets → Button UI: renders (evidence: `src/components/budgets/BudgetManager.tsx`)