# aniketbhardwajhere-rgb/spendwise architecture

> Architecture diagram of the GitHub repository aniketbhardwajhere-rgb/spendwise, 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/aniketbhardwajhere-rgb/spendwise
- Repository: https://github.com/aniketbhardwajhere-rgb/spendwise

## Overview

This is a small browser-based expense and income tracker. A user switches screens, selects a transaction type, and submits a validated transaction; the app keeps transactions in memory, displays recent entries, and updates income, expense, and balance totals. The source shows the JavaScript behavior, but the HTML and README contents were not provided, so screen structure and documented capabilities cannot be confirmed beyond the selectors used by the script.

Main entry points: [`index.html`](https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/index.html) (App screens), [`logic.js`](https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/logic.js) (Transaction creation), [`style.css`](https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/style.css) (Visual styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["User interface"]
  node_shell["App screens<br/>[index.html]"]
  node_navigation["Screen navigation<br/>[logic.js]"]
  node_presentation["Visual styling<br/>[style.css]"]
end

subgraph group_transactions["Transactions"]
  node_form["Transaction form<br/>[index.html]"]
  node_validation["Form validation<br/>[logic.js]"]
  node_entry["Transaction creation<br/>[logic.js]"]
  node_state["In-memory transactions<br/>[logic.js]"]
  node_recent["Recent transactions<br/>[logic.js]"]
end

subgraph group_summary["Summary"]
  node_balance["Balance totals<br/>[logic.js]"]
end

node_user(("User"))

node_user -->|"uses"| node_shell
node_shell -->|"click events"| node_navigation
node_user -->|"enters details"| node_form
node_form -->|"input events"| node_validation
node_validation -->|"validates"| node_entry
node_entry -->|"appends"| node_state
node_entry -->|"renders"| node_recent
node_recent -->|"reads latest"| node_state
node_recent -->|"updates"| node_balance
node_navigation -->|"activates screen"| node_shell
node_presentation -->|"styles"| node_shell

click node_shell "https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/index.html"
click node_navigation "https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/logic.js"
click node_form "https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/index.html"
click node_validation "https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/logic.js"
click node_entry "https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/logic.js"
click node_state "https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/logic.js"
click node_recent "https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/logic.js"
click node_balance "https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/logic.js"
click node_presentation "https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/style.css"

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_shell,node_navigation,node_presentation,node_user toneBlue
class node_form,node_validation,node_entry,node_state,node_recent toneAmber
class node_balance toneMint
```

## Components

### User interface

- [App screens](https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/index.html): `index.html`
- [Screen navigation](https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/logic.js): `logic.js`
- [Visual styling](https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/style.css): `style.css`

### Transactions

- [Transaction form](https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/index.html): `index.html`
- [Form validation](https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/logic.js): `logic.js`
- [Transaction creation](https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/logic.js): `logic.js`
- [In-memory transactions](https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/logic.js): `logic.js`
- [Recent transactions](https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/logic.js): `logic.js`

### Summary

- [Balance totals](https://github.com/aniketbhardwajhere-rgb/spendwise/blob/main/logic.js): `logic.js`

### Other components

- **User**

## Connections

- User → App screens: uses
- App screens → Screen navigation: click events
- User → Transaction form: enters details
- Transaction form → Form validation: input events
- Form validation → Transaction creation: validates
- Transaction creation → In-memory transactions: appends
- Transaction creation → Recent transactions: renders
- Recent transactions → In-memory transactions: reads latest
- Recent transactions → Balance totals: updates
- Screen navigation → App screens: activates screen
- Visual styling → App screens: styles