# joelleonardt/codingcamp-6july26-joelleonardt architecture

> Architecture diagram of the GitHub repository joelleonardt/codingcamp-6july26-joelleonardt, 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/joelleonardt/codingcamp-6july26-joelleonardt
- Repository: https://github.com/joelleonardt/codingcamp-6july26-joelleonardt

## Overview

This is a client-side expense tracker with budget visualization. Users enter and validate transactions, which are saved in browser storage; the app then reloads state, computes totals and summaries, and renders the interface. Users can also sort transactions, set a spending limit, and view category and monthly summaries. The README offers no architecture detail, and the sampled JavaScript is incomplete, so uncertain internal wiring is omitted.

Main entry points: [`js/app.js`](https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.js) (App Controller), [`index.html`](https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/index.html) (Expense Page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interaction["User Interface"]
  node_page["Expense Page<br/>[index.html]"]
  node_app["App Controller<br/>[app.js]"]
end

subgraph group_domain["Expense Logic"]
  node_validator["Input Validator<br/>[app.js]"]
  node_transactions["Transaction Service<br/>[app.js]"]
end

subgraph group_persistence["Browser State"]
  node_storage["Storage Service<br/>[app.js]"]
  node_localstorage[("Local Storage")]
end

subgraph group_visualization["Summaries"]
  node_balance["Balance Display<br/>[app.js]"]
  node_transactionlist["Transaction List<br/>[app.js]"]
  node_monthly["Monthly Summary<br/>[app.js]"]
  node_category["Category Chart<br/>[app.js]"]
end

node_user(("User"))
node_chartjs["Chart.js"]

node_user -->|"interacts"| node_page
node_page -->|"events"| node_app
node_app -->|"validates"| node_validator
node_app -->|"loads transactions"| node_storage
node_app -->|"adds or sorts"| node_transactions
node_app -->|"saves transactions"| node_storage
node_app -->|"loads limit"| node_storage
node_app -->|"saves limit"| node_storage
node_storage -->|"reads and writes"| node_localstorage
node_app -->|"renders total"| node_balance
node_app -->|"renders list"| node_transactionlist
node_app -->|"renders summary"| node_monthly
node_app -->|"groups by month"| node_transactions
node_app -->|"groups by category"| node_transactions
node_app -->|"updates chart"| node_category
node_category -.->|"renders"| node_chartjs

click node_page "https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/index.html"
click node_app "https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.js"
click node_validator "https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.js"
click node_transactions "https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.js"
click node_storage "https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.js"
click node_balance "https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.js"
click node_transactionlist "https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.js"
click node_monthly "https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.js"
click node_category "https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.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_app,node_user toneBlue
class node_validator,node_transactions toneAmber
class node_storage,node_localstorage toneMint
class node_balance,node_transactionlist,node_monthly,node_category toneRose
class node_chartjs toneIndigo
```

## Components

### User Interface

- [Expense Page](https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/index.html): `index.html`
- [App Controller](https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.js): `js/app.js`

### Expense Logic

- [Input Validator](https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.js): `js/app.js`
- [Transaction Service](https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.js): `js/app.js`

### Browser State

- [Storage Service](https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.js): `js/app.js`
- **Local Storage**

### Summaries

- [Balance Display](https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.js): `js/app.js`
- [Transaction List](https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.js): `js/app.js`
- [Monthly Summary](https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.js): `js/app.js`
- [Category Chart](https://github.com/joelleonardt/codingcamp-6july26-joelleonardt/blob/main/js/app.js): `js/app.js`

### Other components

- **User**
- **Chart.js**

## Connections

- User → Expense Page: interacts
- Expense Page → App Controller: events
- App Controller → Input Validator: validates
- App Controller → Storage Service: loads transactions
- App Controller → Transaction Service: adds or sorts
- App Controller → Storage Service: saves transactions
- App Controller → Storage Service: loads limit
- App Controller → Storage Service: saves limit
- Storage Service → Local Storage: reads and writes
- App Controller → Balance Display: renders total
- App Controller → Transaction List: renders list
- App Controller → Monthly Summary: renders summary
- App Controller → Transaction Service: groups by month
- App Controller → Transaction Service: groups by category
- App Controller → Category Chart: updates chart
- Category Chart → Chart.js: renders