# bogdannakai/fintrack architecture

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

## Overview

FinTrack is a browser-based personal-finance tracker. Its user journey is sign-up or login, access-controlled navigation, then reviewing finance pages for transactions, budgets, goals, reports, and profile information. The README describes localStorage-backed accounts, demo tables and charts, and a transactions Redux store; it also marks full CRUD and several data controls as in development. The graph shows route and storage calls evidenced in sampled source; feature-page internals are represented from the tree and README, without assuming their wiring.

Main entry points: [`src/routes/Routes.tsx`](https://github.com/bogdannakai/fintrack/blob/main/src/routes/Routes.tsx) (Route config), [`src/routes/ProtectedRoutes.tsx`](https://github.com/bogdannakai/fintrack/blob/main/src/routes/ProtectedRoutes.tsx) (Route guard), [`src/App.tsx`](https://github.com/bogdannakai/fintrack/blob/main/src/App.tsx) (App), [`src/pages/auth/LoginPage.tsx`](https://github.com/bogdannakai/fintrack/blob/main/src/pages/auth/LoginPage.tsx) (Login page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App and navigation"]
  node_app["App<br/>[App.tsx]"]
  node_routes["Route config<br/>[Routes.tsx]"]
  node_guard["Route guard"]
end

subgraph group_accounts["Accounts and persistence"]
  node_login["Login page<br/>[LoginPage.tsx]"]
  node_signup["Sign-up page<br/>[SignUpPage.tsx]"]
  node_authui["Account forms"]
  node_storage["Local storage<br/>[localStorage.ts]"]
  node_storagekeys["Storage keys<br/>[storageKeys.ts]"]
end

subgraph group_finance["Finance features"]
  node_dashboard["Dashboard<br/>[DashboardPage.tsx]"]
  node_transactions["Transactions"]
  node_transactionui["Transaction views"]
  node_budget["Budgets<br/>[BudgetPage.tsx]"]
  node_budgetui["Budget views"]
  node_goals["Financial goals<br/>[GoalsPage.tsx]"]
  node_goalui["Goal views"]
  node_reports["Reports<br/>[ReportsPage.tsx]"]
  node_profile["Profile<br/>[ProfilePage.tsx]"]
  node_dashboardui["Dashboard views"]
end

subgraph group_state["Client state"]
  node_redux["Redux store<br/>[store.ts]"]
  node_slice["Transaction slice"]
end

subgraph group_shared["Shared interface"]
  node_charts["Charts"]
  node_modal["Modal context<br/>[ModalContex.tsx]"]
  node_forms["Shared forms"]
end

node_user(("User"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_routes
node_routes -->|"routes to"| node_login
node_routes -->|"routes to"| node_signup
node_routes -->|"guards routes"| node_guard
node_guard -->|"reads account"| node_storage
node_guard -->|"uses keys"| node_storagekeys
node_routes -->|"routes to"| node_dashboard
node_routes -->|"routes to"| node_transactions
node_routes -->|"routes to"| node_budget
node_routes -->|"routes to"| node_goals
node_routes -->|"routes to"| node_reports
node_routes -->|"routes to"| node_profile
node_login -->|"uses forms"| node_authui
node_signup -->|"uses forms"| node_authui
node_transactions -.->|"state access"| node_redux
node_redux -.->|"registers reducer"| node_slice
node_dashboardui -.->|"renders charts"| node_charts

click node_app "https://github.com/bogdannakai/fintrack/blob/main/src/App.tsx"
click node_routes "https://github.com/bogdannakai/fintrack/blob/main/src/routes/Routes.tsx"
click node_guard "https://github.com/bogdannakai/fintrack/blob/main/src/routes/ProtectedRoutes.tsx"
click node_login "https://github.com/bogdannakai/fintrack/blob/main/src/pages/auth/LoginPage.tsx"
click node_signup "https://github.com/bogdannakai/fintrack/blob/main/src/pages/auth/SignUpPage.tsx"
click node_authui "https://github.com/bogdannakai/fintrack/tree/main/src/features/auth/components"
click node_storage "https://github.com/bogdannakai/fintrack/blob/main/src/services/localStorage.ts"
click node_storagekeys "https://github.com/bogdannakai/fintrack/blob/main/src/services/storageKeys.ts"
click node_dashboard "https://github.com/bogdannakai/fintrack/blob/main/src/pages/Dashboard/DashboardPage.tsx"
click node_transactions "https://github.com/bogdannakai/fintrack/blob/main/src/pages/Transactions/TransactionsPage.tsx"
click node_transactionui "https://github.com/bogdannakai/fintrack/tree/main/src/features/transactions/component"
click node_budget "https://github.com/bogdannakai/fintrack/blob/main/src/pages/Budget/BudgetPage.tsx"
click node_budgetui "https://github.com/bogdannakai/fintrack/tree/main/src/features/budget/components"
click node_goals "https://github.com/bogdannakai/fintrack/blob/main/src/pages/Goals/GoalsPage.tsx"
click node_goalui "https://github.com/bogdannakai/fintrack/tree/main/src/features/goals/components"
click node_reports "https://github.com/bogdannakai/fintrack/blob/main/src/pages/Reports/ReportsPage.tsx"
click node_profile "https://github.com/bogdannakai/fintrack/blob/main/src/pages/Profile/ProfilePage.tsx"
click node_dashboardui "https://github.com/bogdannakai/fintrack/tree/main/src/features/dashboard/components"
click node_charts "https://github.com/bogdannakai/fintrack/tree/main/src/components/charts"
click node_redux "https://github.com/bogdannakai/fintrack/blob/main/src/app/store.ts"
click node_slice "https://github.com/bogdannakai/fintrack/blob/main/src/features/transactions/transactionsSlice.ts"
click node_modal "https://github.com/bogdannakai/fintrack/blob/main/src/context/ModalContex.tsx"
click node_forms "https://github.com/bogdannakai/fintrack/tree/main/src/components/Form"

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_routes,node_guard,node_user toneBlue
class node_login,node_signup,node_authui,node_storage,node_storagekeys toneAmber
class node_dashboard,node_transactions,node_transactionui,node_budget,node_budgetui,node_goals,node_goalui,node_reports,node_profile,node_dashboardui toneMint
class node_redux,node_slice toneRose
class node_charts,node_modal,node_forms toneIndigo
```

## Components

### App and navigation

- [App](https://github.com/bogdannakai/fintrack/blob/main/src/App.tsx): `src/App.tsx`
- [Route config](https://github.com/bogdannakai/fintrack/blob/main/src/routes/Routes.tsx): `src/routes/Routes.tsx`
- [Route guard](https://github.com/bogdannakai/fintrack/blob/main/src/routes/ProtectedRoutes.tsx): `src/routes/ProtectedRoutes.tsx`

### Accounts and persistence

- [Login page](https://github.com/bogdannakai/fintrack/blob/main/src/pages/auth/LoginPage.tsx): `src/pages/auth/LoginPage.tsx`
- [Sign-up page](https://github.com/bogdannakai/fintrack/blob/main/src/pages/auth/SignUpPage.tsx): `src/pages/auth/SignUpPage.tsx`
- [Account forms](https://github.com/bogdannakai/fintrack/tree/main/src/features/auth/components): `src/features/auth/components`
- [Local storage](https://github.com/bogdannakai/fintrack/blob/main/src/services/localStorage.ts): `src/services/localStorage.ts`
- [Storage keys](https://github.com/bogdannakai/fintrack/blob/main/src/services/storageKeys.ts): `src/services/storageKeys.ts`

### Finance features

- [Dashboard](https://github.com/bogdannakai/fintrack/blob/main/src/pages/Dashboard/DashboardPage.tsx): `src/pages/Dashboard/DashboardPage.tsx`
- [Transactions](https://github.com/bogdannakai/fintrack/blob/main/src/pages/Transactions/TransactionsPage.tsx): `src/pages/Transactions/TransactionsPage.tsx`
- [Transaction views](https://github.com/bogdannakai/fintrack/tree/main/src/features/transactions/component): `src/features/transactions/component`
- [Budgets](https://github.com/bogdannakai/fintrack/blob/main/src/pages/Budget/BudgetPage.tsx): `src/pages/Budget/BudgetPage.tsx`
- [Budget views](https://github.com/bogdannakai/fintrack/tree/main/src/features/budget/components): `src/features/budget/components`
- [Financial goals](https://github.com/bogdannakai/fintrack/blob/main/src/pages/Goals/GoalsPage.tsx): `src/pages/Goals/GoalsPage.tsx`
- [Goal views](https://github.com/bogdannakai/fintrack/tree/main/src/features/goals/components): `src/features/goals/components`
- [Reports](https://github.com/bogdannakai/fintrack/blob/main/src/pages/Reports/ReportsPage.tsx): `src/pages/Reports/ReportsPage.tsx`
- [Profile](https://github.com/bogdannakai/fintrack/blob/main/src/pages/Profile/ProfilePage.tsx): `src/pages/Profile/ProfilePage.tsx`
- [Dashboard views](https://github.com/bogdannakai/fintrack/tree/main/src/features/dashboard/components): `src/features/dashboard/components`

### Client state

- [Redux store](https://github.com/bogdannakai/fintrack/blob/main/src/app/store.ts): `src/app/store.ts`
- [Transaction slice](https://github.com/bogdannakai/fintrack/blob/main/src/features/transactions/transactionsSlice.ts): `src/features/transactions/transactionsSlice.ts`

### Shared interface

- [Charts](https://github.com/bogdannakai/fintrack/tree/main/src/components/charts): `src/components/charts`
- [Modal context](https://github.com/bogdannakai/fintrack/blob/main/src/context/ModalContex.tsx): `src/context/ModalContex.tsx`
- [Shared forms](https://github.com/bogdannakai/fintrack/tree/main/src/components/Form): `src/components/Form`

### Other components

- **User**

## Connections

- User → App: uses
- App → Route config: renders
- Route config → Login page: routes to
- Route config → Sign-up page: routes to
- Route config → Route guard: guards routes
- Route guard → Local storage: reads account
- Route guard → Storage keys: uses keys
- Route config → Dashboard: routes to
- Route config → Transactions: routes to
- Route config → Budgets: routes to
- Route config → Financial goals: routes to
- Route config → Reports: routes to
- Route config → Profile: routes to
- Login page → Account forms: uses forms
- Sign-up page → Account forms: uses forms
- Transactions → Redux store: state access
- Redux store → Transaction slice: registers reducer
- Dashboard views → Charts: renders charts