# zyruspogi2006/remix-of-bright-bills-and-budgets architecture

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

- Interactive diagram: https://gitdiagram.com/zyruspogi2006/remix-of-bright-bills-and-budgets
- Repository: https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets

## Overview

Pennywise is a browser-based personal budgeting app. Users navigate from the overview to manage transactions, budgets, savings goals, bills, reports, and settings; app state is loaded and saved in localStorage. The graph reflects documented features and shown imports/calls. Several route implementations are unsampled, so their internal interactions are represented only where the source index or README supports them.

Main entry points: [`src/lib/store.tsx`](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/lib/store.tsx) (App state), [`src/lib/finance.ts`](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/lib/finance.ts) (Finance calculations), [`src/components/pw/TransactionDialog.tsx`](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/components/pw/TransactionDialog.tsx) (Transaction dialog), [`src/components/pw/AppShell.tsx`](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/components/pw/AppShell.tsx) (Navigation shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["App experience"]
  node_root["Application root<br/>[__root.tsx]"]
  node_shell["Navigation shell<br/>[AppShell.tsx]"]
end

subgraph group_finance["Finance features"]
  node_dashboard["Monthly overview<br/>[index.tsx]"]
  node_transactions["Transactions<br/>[transactions.tsx]"]
  node_transaction_form["Transaction dialog"]
  node_budgets["Budgets<br/>[budgets.tsx]"]
  node_goals["Savings goals<br/>[goals.tsx]"]
  node_bills["Bills<br/>[bills.tsx]"]
  node_reports["Reports and exports<br/>[reports.tsx]"]
  node_settings["Settings and backup<br/>[settings.tsx]"]
end

subgraph group_state["State and persistence"]
  node_store["App state<br/>[store.tsx]"]
  node_storage[("Local persistence<br/>[storage.ts]")]
  node_demo["Demo data<br/>[demo.ts]"]
end

subgraph group_shared["Shared foundations"]
  node_finance_logic["Finance calculations<br/>[finance.ts]"]
  node_types["Finance data types<br/>[types.ts]"]
  node_shared_components["Shared UI components<br/>[shared.tsx]"]
  node_ui_primitives["UI primitives"]
end

node_user(("Everyday user"))

node_user -->|"opens app"| node_root
node_root -->|"renders shell"| node_shell
node_shell -->|"opens dialog"| node_transaction_form
node_shell -->|"reads app state"| node_store
node_dashboard -->|"reads app state"| node_store
node_dashboard -->|"uses calculations"| node_finance_logic
node_transactions -->|"uses app state"| node_store
node_transactions -->|"uses calculations"| node_finance_logic
node_transactions -->|"uses dialog"| node_transaction_form
node_transaction_form -->|"uses app state"| node_store
node_budgets -->|"uses app state"| node_store
node_budgets -->|"uses calculations"| node_finance_logic
node_goals -->|"uses app state"| node_store
node_goals -->|"uses calculations"| node_finance_logic
node_bills -->|"uses app state"| node_store
node_bills -->|"uses calculations"| node_finance_logic
node_reports -->|"uses app state"| node_store
node_reports -->|"uses calculations"| node_finance_logic
node_settings -->|"uses app state"| node_store
node_settings -->|"validates backup"| node_storage
node_store -->|"loads and saves"| node_storage
node_store -->|"manages demo data"| node_demo
node_storage -->|"seeds fresh data"| node_demo
node_storage -->|"validates data"| node_types
node_store -->|"uses date helpers"| node_finance_logic
node_finance_logic -->|"uses domain types"| node_types
node_root -->|"provides state"| node_store
node_transaction_form -->|"uses form helpers"| node_shared_components
node_shell -->|"uses controls"| node_ui_primitives
node_transaction_form -->|"uses controls"| node_ui_primitives

click node_root "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/routes/__root.tsx"
click node_shell "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/components/pw/AppShell.tsx"
click node_dashboard "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/routes/index.tsx"
click node_transactions "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/routes/transactions.tsx"
click node_transaction_form "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/components/pw/TransactionDialog.tsx"
click node_budgets "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/routes/budgets.tsx"
click node_goals "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/routes/goals.tsx"
click node_bills "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/routes/bills.tsx"
click node_reports "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/routes/reports.tsx"
click node_settings "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/routes/settings.tsx"
click node_store "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/lib/store.tsx"
click node_storage "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/lib/storage.ts"
click node_demo "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/lib/demo.ts"
click node_finance_logic "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/lib/finance.ts"
click node_types "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/lib/types.ts"
click node_shared_components "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/components/pw/shared.tsx"
click node_ui_primitives "https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/tree/main/src/components/ui"

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_root,node_shell,node_user toneBlue
class node_dashboard,node_transactions,node_transaction_form,node_budgets,node_goals,node_bills,node_reports,node_settings toneAmber
class node_store,node_storage,node_demo toneMint
class node_finance_logic,node_types,node_shared_components,node_ui_primitives toneRose
```

## Components

### App experience

- [Application root](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/routes/__root.tsx): `src/routes/__root.tsx`
- [Navigation shell](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/components/pw/AppShell.tsx): `src/components/pw/AppShell.tsx`

### Finance features

- [Monthly overview](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/routes/index.tsx): `src/routes/index.tsx`
- [Transactions](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/routes/transactions.tsx): `src/routes/transactions.tsx`
- [Transaction dialog](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/components/pw/TransactionDialog.tsx): `src/components/pw/TransactionDialog.tsx`
- [Budgets](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/routes/budgets.tsx): `src/routes/budgets.tsx`
- [Savings goals](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/routes/goals.tsx): `src/routes/goals.tsx`
- [Bills](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/routes/bills.tsx): `src/routes/bills.tsx`
- [Reports and exports](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/routes/reports.tsx): `src/routes/reports.tsx`
- [Settings and backup](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/routes/settings.tsx): `src/routes/settings.tsx`

### State and persistence

- [App state](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/lib/store.tsx): `src/lib/store.tsx`
- [Local persistence](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/lib/storage.ts): `src/lib/storage.ts`
- [Demo data](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/lib/demo.ts): `src/lib/demo.ts`

### Shared foundations

- [Finance calculations](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/lib/finance.ts): `src/lib/finance.ts`
- [Finance data types](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/lib/types.ts): `src/lib/types.ts`
- [Shared UI components](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/blob/main/src/components/pw/shared.tsx): `src/components/pw/shared.tsx`
- [UI primitives](https://github.com/zyruspogi2006/remix-of-bright-bills-and-budgets/tree/main/src/components/ui): `src/components/ui`

### Other components

- **Everyday user**

## Connections

- Everyday user → Application root: opens app
- Application root → Navigation shell: renders shell (evidence: `src/routes/__root.tsx`)
- Navigation shell → Transaction dialog: opens dialog (evidence: `src/components/pw/AppShell.tsx`)
- Navigation shell → App state: reads app state (evidence: `src/components/pw/AppShell.tsx`)
- Monthly overview → App state: reads app state (evidence: `src/routes/index.tsx`)
- Monthly overview → Finance calculations: uses calculations (evidence: `src/routes/index.tsx`)
- Transactions → App state: uses app state (evidence: `src/routes/transactions.tsx`)
- Transactions → Finance calculations: uses calculations (evidence: `src/routes/transactions.tsx`)
- Transactions → Transaction dialog: uses dialog (evidence: `src/routes/transactions.tsx`)
- Transaction dialog → App state: uses app state (evidence: `src/components/pw/TransactionDialog.tsx`)
- Budgets → App state: uses app state (evidence: `src/routes/budgets.tsx`)
- Budgets → Finance calculations: uses calculations (evidence: `src/routes/budgets.tsx`)
- Savings goals → App state: uses app state (evidence: `src/routes/goals.tsx`)
- Savings goals → Finance calculations: uses calculations (evidence: `src/routes/goals.tsx`)
- Bills → App state: uses app state (evidence: `src/routes/bills.tsx`)
- Bills → Finance calculations: uses calculations (evidence: `src/routes/bills.tsx`)
- Reports and exports → App state: uses app state (evidence: `src/routes/reports.tsx`)
- Reports and exports → Finance calculations: uses calculations (evidence: `src/routes/reports.tsx`)
- Settings and backup → App state: uses app state (evidence: `src/routes/settings.tsx`)
- Settings and backup → Local persistence: validates backup (evidence: `src/routes/settings.tsx`)
- App state → Local persistence: loads and saves (evidence: `src/lib/store.tsx`)
- App state → Demo data: manages demo data (evidence: `src/lib/store.tsx`)
- Local persistence → Demo data: seeds fresh data (evidence: `src/lib/storage.ts`)
- Local persistence → Finance data types: validates data (evidence: `src/lib/storage.ts`)
- App state → Finance calculations: uses date helpers (evidence: `src/lib/store.tsx`)
- Finance calculations → Finance data types: uses domain types (evidence: `src/lib/finance.ts`)
- Application root → App state: provides state (evidence: `src/routes/__root.tsx`)
- Transaction dialog → Shared UI components: uses form helpers (evidence: `src/components/pw/TransactionDialog.tsx`)
- Navigation shell → UI primitives: uses controls (evidence: `src/components/pw/AppShell.tsx`)
- Transaction dialog → UI primitives: uses controls (evidence: `src/components/pw/TransactionDialog.tsx`)