# simplyvinay/vue-expenses architecture

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

- Interactive diagram: https://gitdiagram.com/simplyvinay/vue-expenses
- Repository: https://github.com/simplyvinay/vue-expenses

## Overview

Vue Expenses is a personal expense-tracking app: users manage expenses and their categories/types, then review dashboard and year/month statistics. The Vue client routes views through shared state and an API service to a .NET API; API controllers dispatch requests through MediatR feature handlers to application data. Authentication supports registration, login, profile/settings updates, and refresh tokens. The README documents SQLite, EF Core, and Dapper; sampled code confirms API dispatch and the EF context, but not individual handler-to-storage calls, so those links are not shown.

Main entry points: [`vue-expenses-client/src/store/index.js`](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-client/src/store/index.js) (Vuex state), [`vue-expenses-client/src/App.vue`](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-client/src/App.vue) (Vue application), [`vue-expenses-client/src/router/index.js`](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-client/src/router/index.js) (Route views), [`vue-expenses-client/src/views/Expenses.vue`](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-client/src/views/Expenses.vue) (Expense and account views)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Vue client"]
  node_app["Vue application<br/>[App.vue]"]
  node_router["Route views<br/>[index.js]"]
  node_views["Expense and account views<br/>[Expenses.vue]"]
  node_statsui["Dashboard and charts<br/>[Dashboard.vue]"]
  node_store["Vuex state<br/>[index.js]"]
  node_api_client["HTTP API service<br/>[api.js]"]
end

subgraph group_api["API features"]
  node_users["Account endpoints<br/>[UsersController.cs]"]
  node_user_ops["Account operations"]
  node_expenses["Expense endpoints"]
  node_expense_ops["Expense operations"]
  node_categories["Category endpoints"]
  node_category_ops["Category operations"]
  node_types["Type endpoints"]
  node_type_ops["Type operations"]
  node_statistics["Statistics endpoints"]
  node_statistics_ops["Statistics queries"]
end

subgraph group_infra["Data and security"]
  node_context["EF data context<br/>[ExpensesContext.cs]"]
  node_database[("SQLite database")]
  node_security["JWT and refresh tokens"]
end

node_user(("User"))
node_http(("HTTP client"))

node_user -->|"uses"| node_app
node_app -->|"renders routes"| node_router
node_router -->|"selects view"| node_views
node_views -->|"dispatches actions"| node_store
node_statsui -->|"reads statistics"| node_store
node_store -->|"requests data"| node_api_client
node_api_client -->|"sends HTTP"| node_http
node_http -->|"calls account API"| node_users
node_http -->|"calls expense API"| node_expenses
node_http -->|"calls category API"| node_categories
node_http -->|"calls type API"| node_types
node_http -->|"calls statistics API"| node_statistics
node_users -->|"mediates requests"| node_user_ops
node_expenses -->|"mediates requests"| node_expense_ops
node_categories -->|"mediates requests"| node_category_ops
node_types -->|"mediates requests"| node_type_ops
node_statistics -->|"mediates queries"| node_statistics_ops
node_context -->|"reads and writes"| node_database

click node_app "https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-client/src/App.vue"
click node_router "https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-client/src/router/index.js"
click node_views "https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-client/src/views/Expenses.vue"
click node_statsui "https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-client/src/views/Dashboard.vue"
click node_store "https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-client/src/store/index.js"
click node_api_client "https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-client/src/services/api.js"
click node_users "https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-api/Features/Users/UsersController.cs"
click node_user_ops "https://github.com/simplyvinay/vue-expenses/tree/master/vue-expenses-api/Features/Users"
click node_expenses "https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-api/Features/Expenses/ExpensesController.cs"
click node_expense_ops "https://github.com/simplyvinay/vue-expenses/tree/master/vue-expenses-api/Features/Expenses"
click node_categories "https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-api/Features/ExpenseCategories/ExpenseCategoryController.cs"
click node_category_ops "https://github.com/simplyvinay/vue-expenses/tree/master/vue-expenses-api/Features/ExpenseCategories"
click node_types "https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-api/Features/ExpenseTypes/ExpenseTypeController.cs"
click node_type_ops "https://github.com/simplyvinay/vue-expenses/tree/master/vue-expenses-api/Features/ExpenseTypes"
click node_statistics "https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-api/Features/Statistics/StatisticsController.cs"
click node_statistics_ops "https://github.com/simplyvinay/vue-expenses/tree/master/vue-expenses-api/Features/Statistics"
click node_context "https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-api/Infrastructure/ExpensesContext.cs"
click node_security "https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-api/Infrastructure/Security/JwtTokenGenerator.cs"

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_router,node_views,node_statsui,node_store,node_api_client,node_user,node_http toneBlue
class node_users,node_user_ops,node_expenses,node_expense_ops,node_categories,node_category_ops,node_types,node_type_ops,node_statistics,node_statistics_ops toneAmber
class node_context,node_database,node_security toneMint
```

## Components

### Vue client

- [Vue application](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-client/src/App.vue): `vue-expenses-client/src/App.vue`
- [Route views](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-client/src/router/index.js): `vue-expenses-client/src/router/index.js`
- [Expense and account views](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-client/src/views/Expenses.vue): `vue-expenses-client/src/views/Expenses.vue`
- [Dashboard and charts](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-client/src/views/Dashboard.vue): `vue-expenses-client/src/views/Dashboard.vue`
- [Vuex state](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-client/src/store/index.js): `vue-expenses-client/src/store/index.js`
- [HTTP API service](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-client/src/services/api.js): `vue-expenses-client/src/services/api.js`

### API features

- [Account endpoints](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-api/Features/Users/UsersController.cs): `vue-expenses-api/Features/Users/UsersController.cs`
- [Account operations](https://github.com/simplyvinay/vue-expenses/tree/master/vue-expenses-api/Features/Users): `vue-expenses-api/Features/Users`
- [Expense endpoints](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-api/Features/Expenses/ExpensesController.cs): `vue-expenses-api/Features/Expenses/ExpensesController.cs`
- [Expense operations](https://github.com/simplyvinay/vue-expenses/tree/master/vue-expenses-api/Features/Expenses): `vue-expenses-api/Features/Expenses`
- [Category endpoints](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-api/Features/ExpenseCategories/ExpenseCategoryController.cs): `vue-expenses-api/Features/ExpenseCategories/ExpenseCategoryController.cs`
- [Category operations](https://github.com/simplyvinay/vue-expenses/tree/master/vue-expenses-api/Features/ExpenseCategories): `vue-expenses-api/Features/ExpenseCategories`
- [Type endpoints](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-api/Features/ExpenseTypes/ExpenseTypeController.cs): `vue-expenses-api/Features/ExpenseTypes/ExpenseTypeController.cs`
- [Type operations](https://github.com/simplyvinay/vue-expenses/tree/master/vue-expenses-api/Features/ExpenseTypes): `vue-expenses-api/Features/ExpenseTypes`
- [Statistics endpoints](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-api/Features/Statistics/StatisticsController.cs): `vue-expenses-api/Features/Statistics/StatisticsController.cs`
- [Statistics queries](https://github.com/simplyvinay/vue-expenses/tree/master/vue-expenses-api/Features/Statistics): `vue-expenses-api/Features/Statistics`

### Data and security

- [EF data context](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-api/Infrastructure/ExpensesContext.cs): `vue-expenses-api/Infrastructure/ExpensesContext.cs`
- **SQLite database**
- [JWT and refresh tokens](https://github.com/simplyvinay/vue-expenses/blob/master/vue-expenses-api/Infrastructure/Security/JwtTokenGenerator.cs): `vue-expenses-api/Infrastructure/Security/JwtTokenGenerator.cs`

### Other components

- **User**
- **HTTP client**

## Connections

- User → Vue application: uses
- Vue application → Route views: renders routes
- Route views → Expense and account views: selects view
- Expense and account views → Vuex state: dispatches actions
- Dashboard and charts → Vuex state: reads statistics
- Vuex state → HTTP API service: requests data
- HTTP API service → HTTP client: sends HTTP
- HTTP client → Account endpoints: calls account API
- HTTP client → Expense endpoints: calls expense API
- HTTP client → Category endpoints: calls category API
- HTTP client → Type endpoints: calls type API
- HTTP client → Statistics endpoints: calls statistics API
- Account endpoints → Account operations: mediates requests
- Expense endpoints → Expense operations: mediates requests
- Category endpoints → Category operations: mediates requests
- Type endpoints → Type operations: mediates requests
- Statistics endpoints → Statistics queries: mediates queries
- EF data context → SQLite database: reads and writes