# bhanuvarma17/bappa-transaction-tracker architecture

> Architecture diagram of the GitHub repository bhanuvarma17/bappa-transaction-tracker, 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/bhanuvarma17/bappa-transaction-tracker
- Repository: https://github.com/bhanuvarma17/bappa-transaction-tracker

## Overview

Bappa Transaction Tracker lets committee leaders register or sign in, manage a budget and ordered expense ledger, and publish a shareable read-only committee profile. The browser app routes users between authentication, a private dashboard, and public profiles; API requests reach the Express server, which applies session and ownership checks and persists records in PostgreSQL. Profile editing includes password changes that invalidate sessions. The README documents these capabilities, but several UI and server implementations were not sampled, so uncertain internal wiring is omitted.

Main entry points: [`src/App.tsx`](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/App.tsx) (App routing), [`src/api.ts`](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/api.ts) (API client), [`src/components/Dashboard.tsx`](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/Dashboard.tsx) (Private dashboard), [`server.ts`](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/server.ts) (HTTP API and authorization)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web application"]
  node_app["App routing<br/>[App.tsx]"]
  node_api["API client<br/>[api.ts]"]
  node_imageupload["Image upload"]
  node_imageutils["Image processing<br/>[imageUtils.ts]"]
  node_notfound["Unknown profile<br/>[NotFoundPage.tsx]"]
  node_theme["Theme preferences<br/>[ThemeContext.tsx]"]
end

subgraph group_finance["Committee finance"]
  node_dashboard["Private dashboard<br/>[Dashboard.tsx]"]
  node_finance["Finance section<br/>[FinanceSection.tsx]"]
  node_expensemodal["Expense editor<br/>[ExpenseModal.tsx]"]
  node_charts["Budget charts<br/>[BudgetCharts.tsx]"]
  node_publicprofile["Public committee page<br/>[PublicProfile.tsx]"]
  node_types["Finance data types<br/>[types.ts]"]
end

subgraph group_identity["Identity and access"]
  node_authpage["Sign in / signup<br/>[AuthPage.tsx]"]
  node_profileeditor["Profile settings"]
  node_auth["Password and sessions<br/>[auth.ts]"]
end

subgraph group_backend["Server and persistence"]
  node_server["HTTP API and authorization<br/>[server.ts]"]
  node_dbaccess["Database access<br/>[db.ts]"]
  node_postgres[("PostgreSQL records")]
end

node_visitor(("Visitor or leader"))

node_visitor -->|"opens"| node_app
node_app -->|"requests data"| node_api
node_app -->|"routes to"| node_authpage
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_publicprofile
node_app -->|"routes to"| node_notfound
node_authpage -->|"authenticates"| node_api
node_dashboard -->|"presents finance"| node_finance
node_finance -->|"edits expenses"| node_expensemodal
node_dashboard -->|"visualizes budget"| node_charts
node_app -->|"opens settings"| node_profileeditor
node_profileeditor -->|"updates account"| node_api
node_imageupload -->|"processes images"| node_imageutils
node_publicprofile -->|"loads public data"| node_api
node_api -->|"sends requests"| node_server
node_server -->|"verifies credentials"| node_auth
node_server -->|"queries and writes"| node_dbaccess
node_dbaccess -->|"reads and writes"| node_postgres
node_theme -->|"stores preference"| node_visitor

click node_app "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/App.tsx"
click node_api "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/api.ts"
click node_authpage "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/AuthPage.tsx"
click node_dashboard "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/Dashboard.tsx"
click node_finance "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/FinanceSection.tsx"
click node_expensemodal "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/ExpenseModal.tsx"
click node_charts "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/BudgetCharts.tsx"
click node_profileeditor "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/ProfileEditorModal.tsx"
click node_imageupload "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/ImageUploadZone.tsx"
click node_imageutils "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/utils/imageUtils.ts"
click node_publicprofile "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/PublicProfile.tsx"
click node_notfound "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/NotFoundPage.tsx"
click node_server "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/server.ts"
click node_auth "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/server/auth.ts"
click node_dbaccess "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/server/db.ts"
click node_types "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/types.ts"
click node_theme "https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/context/ThemeContext.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_api,node_imageupload,node_imageutils,node_notfound,node_theme toneBlue
class node_dashboard,node_finance,node_expensemodal,node_charts,node_publicprofile,node_types toneAmber
class node_authpage,node_profileeditor,node_auth toneMint
class node_server,node_dbaccess,node_postgres toneRose
class node_visitor toneIndigo
```

## Components

### Web application

- [App routing](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/App.tsx): `src/App.tsx`
- [API client](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/api.ts): `src/api.ts`
- [Image upload](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/ImageUploadZone.tsx): `src/components/ImageUploadZone.tsx`
- [Image processing](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/utils/imageUtils.ts): `src/utils/imageUtils.ts`
- [Unknown profile](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/NotFoundPage.tsx): `src/components/NotFoundPage.tsx`
- [Theme preferences](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/context/ThemeContext.tsx): `src/context/ThemeContext.tsx`

### Committee finance

- [Private dashboard](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/Dashboard.tsx): `src/components/Dashboard.tsx`
- [Finance section](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/FinanceSection.tsx): `src/components/FinanceSection.tsx`
- [Expense editor](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/ExpenseModal.tsx): `src/components/ExpenseModal.tsx`
- [Budget charts](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/BudgetCharts.tsx): `src/components/BudgetCharts.tsx`
- [Public committee page](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/PublicProfile.tsx): `src/components/PublicProfile.tsx`
- [Finance data types](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/types.ts): `src/types.ts`

### Identity and access

- [Sign in / signup](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/AuthPage.tsx): `src/components/AuthPage.tsx`
- [Profile settings](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/src/components/ProfileEditorModal.tsx): `src/components/ProfileEditorModal.tsx`
- [Password and sessions](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/server/auth.ts): `server/auth.ts`

### Server and persistence

- [HTTP API and authorization](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/server.ts): `server.ts`
- [Database access](https://github.com/bhanuvarma17/bappa-transaction-tracker/blob/main/server/db.ts): `server/db.ts`
- **PostgreSQL records**

### Other components

- **Visitor or leader**

## Connections

- Visitor or leader → App routing: opens
- App routing → API client: requests data
- App routing → Sign in / signup: routes to
- App routing → Private dashboard: routes to
- App routing → Public committee page: routes to
- App routing → Unknown profile: routes to
- Sign in / signup → API client: authenticates
- Private dashboard → Finance section: presents finance
- Finance section → Expense editor: edits expenses
- Private dashboard → Budget charts: visualizes budget
- App routing → Profile settings: opens settings
- Profile settings → API client: updates account
- Image upload → Image processing: processes images
- Public committee page → API client: loads public data
- API client → HTTP API and authorization: sends requests
- HTTP API and authorization → Password and sessions: verifies credentials
- HTTP API and authorization → Database access: queries and writes
- Database access → PostgreSQL records: reads and writes
- Theme preferences → Visitor or leader: stores preference