# nosibbiswas22/expenzo architecture

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

- Interactive diagram: https://gitdiagram.com/nosibbiswas22/expenzo
- Repository: https://github.com/nosibbiswas22/expenzo

## Overview

Expenzo is a browser-based expense tracker. Users add categorized entries, browse and filter them, edit or delete records, and review category totals and charts; Settings also manages categories and JSON import/export. The sampled source shows localStorage as the persistence layer and app.js as the page dispatcher. Some Settings, summary, and action implementations are excerpted, so only their directly supported responsibilities and connections are shown.

Main entry points: [`app.js`](https://github.com/nosibbiswas22/expenzo/blob/main/app.js) (Page dispatcher), [`components/localdb.js`](https://github.com/nosibbiswas22/expenzo/blob/main/components/localdb.js) (Browser storage), [`components/actions.js`](https://github.com/nosibbiswas22/expenzo/blob/main/components/actions.js) (Entry actions), [`components/ListItems.js`](https://github.com/nosibbiswas22/expenzo/blob/main/components/ListItems.js) (Entry list)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_app["Page dispatcher<br/>[app.js]"]
  node_navigation_ui["Navigation UI<br/>[Navigation.js]"]
end

subgraph group_entries["Expense entries"]
  node_add["Add entry<br/>[AddItem.js]"]
  node_list["Entry list<br/>[ListItems.js]"]
  node_render_entries["Filter and render<br/>[renderItems.js]"]
  node_edit["Edit entry<br/>[EditEntry.js]"]
  node_entry_actions["Entry actions<br/>[actions.js]"]
end

subgraph group_insights["Summary and settings"]
  node_summary["Totals and charts<br/>[Summary.js]"]
  node_settings["Settings and transfer<br/>[Settings.js]"]
end

subgraph group_shared["Shared services"]
  node_category_render["Category rendering"]
  node_localdb[("Browser storage<br/>[localdb.js]")]
  node_modal["Confirmation modal<br/>[modal.js]"]
  node_toast["Toast notifications<br/>[toastify.js]"]
  node_loading["Loading indicator<br/>[TopLoadingBar.js]"]
end

node_user(("User"))
node_browser_storage[("Browser localStorage")]
node_chart_lib["Chart library"]
node_pdf_lib["jsPDF library"]

node_user -->|"selects page"| node_navigation_ui
node_navigation_ui -->|"dispatches click"| node_app
node_app -->|"opens page"| node_add
node_app -->|"opens page"| node_list
node_app -->|"opens page"| node_summary
node_app -->|"opens page"| node_settings
node_app -->|"updates progress"| node_loading
node_app -->|"checks entries"| node_localdb
node_add -->|"renders categories"| node_category_render
node_add -->|"loads and saves"| node_localdb
node_add -->|"reports outcome"| node_toast
node_list -->|"renders entries"| node_render_entries
node_list -->|"renders categories"| node_category_render
node_list -->|"binds actions"| node_entry_actions
node_render_entries -->|"loads entries"| node_localdb
node_render_entries -->|"opens edit form"| node_edit
node_render_entries -->|"requests deletion"| node_entry_actions
node_edit -->|"loads and saves"| node_localdb
node_edit -->|"refreshes list"| node_list
node_edit -->|"reports outcome"| node_toast
node_entry_actions -->|"confirms actions"| node_modal
node_entry_actions -->|"updates entries"| node_localdb
node_entry_actions -->|"refreshes entries"| node_render_entries
node_entry_actions -.->|"generates PDF"| node_pdf_lib
node_summary -->|"loads entries"| node_localdb
node_summary -.->|"renders charts"| node_chart_lib
node_settings -->|"manages data"| node_localdb
node_settings -->|"reports outcome"| node_toast
node_localdb -->|"reads and writes"| node_browser_storage

click node_app "https://github.com/nosibbiswas22/expenzo/blob/main/app.js"
click node_navigation_ui "https://github.com/nosibbiswas22/expenzo/blob/main/components/Navigation.js"
click node_add "https://github.com/nosibbiswas22/expenzo/blob/main/components/AddItem.js"
click node_list "https://github.com/nosibbiswas22/expenzo/blob/main/components/ListItems.js"
click node_render_entries "https://github.com/nosibbiswas22/expenzo/blob/main/components/renderItems.js"
click node_edit "https://github.com/nosibbiswas22/expenzo/blob/main/components/EditEntry.js"
click node_entry_actions "https://github.com/nosibbiswas22/expenzo/blob/main/components/actions.js"
click node_summary "https://github.com/nosibbiswas22/expenzo/blob/main/components/Summary.js"
click node_settings "https://github.com/nosibbiswas22/expenzo/blob/main/components/Settings.js"
click node_category_render "https://github.com/nosibbiswas22/expenzo/blob/main/components/renderCategories.js"
click node_localdb "https://github.com/nosibbiswas22/expenzo/blob/main/components/localdb.js"
click node_modal "https://github.com/nosibbiswas22/expenzo/blob/main/components/modal.js"
click node_toast "https://github.com/nosibbiswas22/expenzo/blob/main/components/toastify.js"
click node_loading "https://github.com/nosibbiswas22/expenzo/blob/main/components/TopLoadingBar.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_app,node_navigation_ui,node_user toneBlue
class node_add,node_list,node_render_entries,node_edit,node_entry_actions,node_browser_storage toneAmber
class node_summary,node_settings toneMint
class node_category_render,node_localdb,node_modal,node_toast,node_loading toneRose
class node_chart_lib,node_pdf_lib toneIndigo
```

## Components

### App navigation

- [Page dispatcher](https://github.com/nosibbiswas22/expenzo/blob/main/app.js): `app.js`
- [Navigation UI](https://github.com/nosibbiswas22/expenzo/blob/main/components/Navigation.js): `components/Navigation.js`

### Expense entries

- [Add entry](https://github.com/nosibbiswas22/expenzo/blob/main/components/AddItem.js): `components/AddItem.js`
- [Entry list](https://github.com/nosibbiswas22/expenzo/blob/main/components/ListItems.js): `components/ListItems.js`
- [Filter and render](https://github.com/nosibbiswas22/expenzo/blob/main/components/renderItems.js): `components/renderItems.js`
- [Edit entry](https://github.com/nosibbiswas22/expenzo/blob/main/components/EditEntry.js): `components/EditEntry.js`
- [Entry actions](https://github.com/nosibbiswas22/expenzo/blob/main/components/actions.js): `components/actions.js`

### Summary and settings

- [Totals and charts](https://github.com/nosibbiswas22/expenzo/blob/main/components/Summary.js): `components/Summary.js`
- [Settings and transfer](https://github.com/nosibbiswas22/expenzo/blob/main/components/Settings.js): `components/Settings.js`

### Shared services

- [Category rendering](https://github.com/nosibbiswas22/expenzo/blob/main/components/renderCategories.js): `components/renderCategories.js`
- [Browser storage](https://github.com/nosibbiswas22/expenzo/blob/main/components/localdb.js): `components/localdb.js`
- [Confirmation modal](https://github.com/nosibbiswas22/expenzo/blob/main/components/modal.js): `components/modal.js`
- [Toast notifications](https://github.com/nosibbiswas22/expenzo/blob/main/components/toastify.js): `components/toastify.js`
- [Loading indicator](https://github.com/nosibbiswas22/expenzo/blob/main/components/TopLoadingBar.js): `components/TopLoadingBar.js`

### Other components

- **User**
- **Browser localStorage**
- **Chart library**
- **jsPDF library**

## Connections

- User → Navigation UI: selects page
- Navigation UI → Page dispatcher: dispatches click
- Page dispatcher → Add entry: opens page
- Page dispatcher → Entry list: opens page
- Page dispatcher → Totals and charts: opens page
- Page dispatcher → Settings and transfer: opens page
- Page dispatcher → Loading indicator: updates progress
- Page dispatcher → Browser storage: checks entries
- Add entry → Category rendering: renders categories
- Add entry → Browser storage: loads and saves
- Add entry → Toast notifications: reports outcome
- Entry list → Filter and render: renders entries
- Entry list → Category rendering: renders categories
- Entry list → Entry actions: binds actions
- Filter and render → Browser storage: loads entries
- Filter and render → Edit entry: opens edit form
- Filter and render → Entry actions: requests deletion
- Edit entry → Browser storage: loads and saves
- Edit entry → Entry list: refreshes list
- Edit entry → Toast notifications: reports outcome
- Entry actions → Confirmation modal: confirms actions
- Entry actions → Browser storage: updates entries
- Entry actions → Filter and render: refreshes entries
- Entry actions → jsPDF library: generates PDF
- Totals and charts → Browser storage: loads entries
- Totals and charts → Chart library: renders charts
- Settings and transfer → Browser storage: manages data
- Settings and transfer → Toast notifications: reports outcome
- Browser storage → Browser localStorage: reads and writes