# adarshwebs/money_management_system architecture

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

- Interactive diagram: https://gitdiagram.com/adarshwebs/money_management_system
- Repository: https://github.com/adarshwebs/money_management_system

## Overview

1. **Project shape**
   - This is a Next.js App Router application organized around a public marketing surface and a protected finance dashboard.
   - The repo is UI-heavy, but it also includes a data layer, authentication middleware, and an AI advice helper.

2. **Public entry points**
   - `app/page.js` is the landing page, with shared marketing components in `app/_components/Header.jsx` and `app/_components/Hero.jsx`.
   - `app/layout.js` and `app/globals.css` define the global shell and styling baseline for the whole app.

3. **Authentication boundary**
   - Auth lives under `app/(auth)/sign-in/...` and `app/(auth)/sign-up/...`, which are routed separately from the dashboard.
   - The app uses Clerk, with credentials exposed in the README and route protection enforced by `middleware.ts`.

4. **Protected application shell**
   - The dashboard is grouped under `app/(routes)/dashboard`, with a shared `layout.jsx` and `SideNav.jsx` that form the persistent authenticated workspace.
   - `DashboardHeader.jsx` and `loading.jsx` indicate a layout-driven experience with route-level loading states.

5. **Dashboard overview**
   - `app/(routes)/dashboard/page.jsx` is the main dashboard home, likely summarizing financial status.
   - Reusable summary widgets such as `CardInfo.jsx` and `BarChartDashboard.jsx` suggest a metrics-and-chart overview fed by financial records.

6. **Core domain areas**
   - The app is split into three main finance domains: `budgets`, `expenses`, and `incomes`.
   - Each domain has its own route folder and component set, which is a strong sign of feature-based architecture rather than generic CRUD screens.

7. **Budgets flow**
   - `budgets/page.jsx` uses `BudgetList.jsx`, `BudgetItem.jsx`, and `CreateBudget.jsx` to display and create budget records.
   - This domain appears to be the parent concept for expense control and likely drives budget-versus-spend comparisons elsewhere.

8. **Expenses flow**
   - `expenses/page.jsx` and `expenses/[id]/page.jsx` support both list and detail views for expenses tied to a specific entity.
   - Components such as `AddExpense.jsx`, `ExpenseListTable.jsx`, and `EditBudget.jsx` indicate that expenses are linked to budgets and can be managed from within budget context.

9. **Income flow**
   - `incomes/page.jsx` uses `IncomeList.jsx`, `IncomeItem.jsx`, and `CreateIncomes.jsx` to capture and review incoming funds.
   - Income is a first-class input to the financial model, separate from budgets and expenses.

10. **Data and persistence layer**
   - `drizzle.config.js`, `utils/schema.jsx`, and `utils/dbConfig.jsx` point to Drizzle ORM as the database abstraction.
   - This creates a clear backend boundary: route components likely read/write financial entities through typed schema-backed queries rather than direct API calls.

11. **AI advice subsystem**
   - `utils/getFinancialAdvice.js` is the dedicated integration point for OpenAI-powered recommendations.
   - The README confirms AI-driven financial insights, so this helper is likely invoked from the dashboard to turn budget/income/expense state into advice.

12. **Shared UI and design system**
   - `components/ui/*` contains reusable primitives like button, input, dialog, alert dialog, and toast/sonner support.
   - `lib/utils.js` and `utils/cn.js` are utility helpers that support component composition and class-name handling.

13. **Infrastructure and environment**
   - External services matter here: Clerk for authentication, OpenAI for advice generation, and a database accessed through Drizzle.
   - The required environment variables in the README show the main runtime dependencies and make the app’s integration boundaries explicit.

14. **What to diagram**
   - A good architecture diagram should show: public marketing pages, auth routes, protected dashboard shell, three finance domains, shared UI components, database access via Drizzle, and the AI advice integration.
   - The primary data flow is user-authenticated interaction in the dashboard, persisting income/budget/expense data to the database, then feeding aggregated state into summaries and OpenAI advice.

Main entry points: [`app/(routes)/dashboard/page.jsx`](https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/page.jsx) (Dashboard home), [`utils/schema.jsx`](https://github.com/adarshwebs/money_management_system/blob/main/utils/schema.jsx) (Schema), [`components/ui/button.jsx`](https://github.com/adarshwebs/money_management_system/blob/main/components/ui/button.jsx) (UI primitives), [`app/page.js`](https://github.com/adarshwebs/money_management_system/blob/main/app/page.js) (Landing page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public site"]
  node_app_page["Landing page<br/>entry page<br/>[page.js]"]
  node_app_layout["App shell<br/>root layout<br/>[layout.js]"]
  node_header["Header<br/>marketing component<br/>[Header.jsx]"]
  node_hero["Hero<br/>marketing component<br/>[Hero.jsx]"]
end

subgraph group_auth["Authentication"]
  node_signin["Sign in<br/>auth route<br/>[page.jsx]"]
  node_signup["Sign up<br/>auth route<br/>[page.jsx]"]
end

subgraph group_dashboard["Protected dashboard"]
  node_dashboard_layout["Dashboard shell<br/>route layout<br/>[layout.jsx]"]
  node_sidenav["Side nav<br/>navigation component<br/>[SideNav.jsx]"]
  node_dashboard_home["Dashboard home<br/>overview page<br/>[page.jsx]"]
  node_dash_header["Dashboard header<br/>dashboard component"]
  node_card_info["Metric cards<br/>summary widget<br/>[CardInfo.jsx]"]
  node_chart_dash["Chart widget<br/>visualization widget"]
  node_budgets_page["Budgets<br/>feature route<br/>[page.jsx]"]
  node_expenses_page["Expenses<br/>feature route<br/>[page.jsx]"]
  node_expense_detail["Expense detail<br/>detail route<br/>[page.jsx]"]
  node_incomes_page["Incomes<br/>feature route<br/>[page.jsx]"]
  node_upgrade["Upgrade<br/>route page<br/>[page.jsx]"]
end

subgraph group_data["Data and services"]
  node_middleware{{"Route guard<br/>middleware<br/>[middleware.ts]"}}
  node_schema[("Schema<br/>[schema.jsx]")]
  node_dbconfig{{"DB config<br/>orm config<br/>[dbConfig.jsx]"}}
  node_advice{{"Advice helper<br/>ai integration"}}
end

subgraph group_shared["Shared UI"]
  node_ui_primitives["UI primitives<br/>component library<br/>[button.jsx]"]
  node_utils["Utilities<br/>helper library<br/>[utils.js]"]
end

node_app_layout -->|"wraps"| node_app_page
node_app_page -->|"uses"| node_header
node_app_page -->|"uses"| node_hero
node_middleware -.->|"protects"| node_dashboard_layout
node_dashboard_layout -->|"contains"| node_sidenav
node_dashboard_layout -->|"contains"| node_dash_header
node_dashboard_home -->|"uses"| node_card_info
node_dashboard_home -->|"uses"| node_chart_dash
node_dashboard_home -.->|"feeds"| node_advice
node_budgets_page -->|"persists via"| node_schema
node_expenses_page -->|"persists via"| node_schema
node_expense_detail -->|"reads via"| node_schema
node_incomes_page -->|"persists via"| node_schema
node_schema -->|"connects"| node_dbconfig
node_dashboard_home -.->|"summarizes"| node_schema
node_budgets_page -->|"uses"| node_ui_primitives
node_expenses_page -->|"uses"| node_ui_primitives
node_incomes_page -->|"uses"| node_ui_primitives
node_dashboard_home -->|"uses"| node_ui_primitives
node_header -.->|"uses"| node_utils
node_hero -.->|"uses"| node_utils
node_ui_primitives -->|"depends on"| node_utils
node_signin -.->|"enters protected app"| node_middleware
node_signup -.->|"enters protected app"| node_middleware
node_dashboard_home -.->|"links to"| node_upgrade

click node_app_page "https://github.com/adarshwebs/money_management_system/blob/main/app/page.js"
click node_app_layout "https://github.com/adarshwebs/money_management_system/blob/main/app/layout.js"
click node_header "https://github.com/adarshwebs/money_management_system/blob/main/app/_components/Header.jsx"
click node_hero "https://github.com/adarshwebs/money_management_system/blob/main/app/_components/Hero.jsx"
click node_signin "https://github.com/adarshwebs/money_management_system/blob/main/app/(auth)/sign-in/[[...sign-in]]/page.jsx"
click node_signup "https://github.com/adarshwebs/money_management_system/blob/main/app/(auth)/sign-up/[[...sign-up]]/page.jsx"
click node_middleware "https://github.com/adarshwebs/money_management_system/blob/main/middleware.ts"
click node_dashboard_layout "https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/layout.jsx"
click node_sidenav "https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/_components/SideNav.jsx"
click node_dashboard_home "https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/page.jsx"
click node_dash_header "https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/_components/DashboardHeader.jsx"
click node_card_info "https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/_components/CardInfo.jsx"
click node_chart_dash "https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/_components/BarChartDashboard.jsx"
click node_budgets_page "https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/budgets/page.jsx"
click node_expenses_page "https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/expenses/page.jsx"
click node_expense_detail "https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/expenses/[id]/page.jsx"
click node_incomes_page "https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/incomes/page.jsx"
click node_upgrade "https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/upgrade/page.jsx"
click node_schema "https://github.com/adarshwebs/money_management_system/blob/main/utils/schema.jsx"
click node_dbconfig "https://github.com/adarshwebs/money_management_system/blob/main/utils/dbConfig.jsx"
click node_advice "https://github.com/adarshwebs/money_management_system/blob/main/utils/getFinancialAdvice.js"
click node_ui_primitives "https://github.com/adarshwebs/money_management_system/blob/main/components/ui/button.jsx"
click node_utils "https://github.com/adarshwebs/money_management_system/blob/main/lib/utils.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_page,node_app_layout,node_header,node_hero toneBlue
class node_signin,node_signup toneAmber
class node_dashboard_layout,node_sidenav,node_dashboard_home,node_dash_header,node_card_info,node_chart_dash,node_budgets_page,node_expenses_page,node_expense_detail,node_incomes_page,node_upgrade toneMint
class node_middleware,node_schema,node_dbconfig,node_advice toneRose
class node_ui_primitives,node_utils toneIndigo
```

## Components

### Public site

Marketing-facing pages and shared landing components.

- [Landing page](https://github.com/adarshwebs/money_management_system/blob/main/app/page.js): entry page · Public home page for the marketing surface. · `app/page.js`
- [App shell](https://github.com/adarshwebs/money_management_system/blob/main/app/layout.js): root layout · Global application layout. · `app/layout.js`
- [Header](https://github.com/adarshwebs/money_management_system/blob/main/app/_components/Header.jsx): marketing component · Shared top navigation for public pages. · `app/_components/Header.jsx`
- [Hero](https://github.com/adarshwebs/money_management_system/blob/main/app/_components/Hero.jsx): marketing component · Primary landing-page content block. · `app/_components/Hero.jsx`

### Authentication

Clerk-backed sign-in and sign-up routes.

- [Sign in](https://github.com/adarshwebs/money_management_system/blob/main/app/(auth)/sign-in/[[...sign-in]]/page.jsx): auth route · Clerk sign-in entry route. · `app/(auth)/sign-in/[[...sign-in]]/page.jsx`
- [Sign up](https://github.com/adarshwebs/money_management_system/blob/main/app/(auth)/sign-up/[[...sign-up]]/page.jsx): auth route · Clerk sign-up entry route. · `app/(auth)/sign-up/[[...sign-up]]/page.jsx`

### Protected dashboard

Authenticated workspace and finance features.

- [Dashboard shell](https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/layout.jsx): route layout · Persistent authenticated workspace layout. · `app/(routes)/dashboard/layout.jsx`
- [Side nav](https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/_components/SideNav.jsx): navigation component · Primary dashboard navigation. · `app/(routes)/dashboard/_components/SideNav.jsx`
- [Dashboard home](https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/page.jsx): overview page · Main dashboard summary page. · `app/(routes)/dashboard/page.jsx`
- [Dashboard header](https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/_components/DashboardHeader.jsx): dashboard component · Top-of-page authenticated header. · `app/(routes)/dashboard/_components/DashboardHeader.jsx`
- [Metric cards](https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/_components/CardInfo.jsx): summary widget · Financial summary tiles for the dashboard. · `app/(routes)/dashboard/_components/CardInfo.jsx`
- [Chart widget](https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/_components/BarChartDashboard.jsx): visualization widget · Dashboard bar-chart summary. · `app/(routes)/dashboard/_components/BarChartDashboard.jsx`
- [Budgets](https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/budgets/page.jsx): feature route · Budget management area. · `app/(routes)/dashboard/budgets/page.jsx`
- [Expenses](https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/expenses/page.jsx): feature route · Expense management area. · `app/(routes)/dashboard/expenses/page.jsx`
- [Expense detail](https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/expenses/[id]/page.jsx): detail route · Expense-focused subroute for an entity id. · `app/(routes)/dashboard/expenses/[id]/page.jsx`
- [Incomes](https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/incomes/page.jsx): feature route · Income management area. · `app/(routes)/dashboard/incomes/page.jsx`
- [Upgrade](https://github.com/adarshwebs/money_management_system/blob/main/app/(routes)/dashboard/upgrade/page.jsx): route page · Monetization or plan-upgrade screen. · `app/(routes)/dashboard/upgrade/page.jsx`

### Data and services

Database schema, ORM config, AI advice, and route protection.

- [Route guard](https://github.com/adarshwebs/money_management_system/blob/main/middleware.ts): middleware · Protects dashboard routes and enforces auth boundary. · `middleware.ts`
- [Schema](https://github.com/adarshwebs/money_management_system/blob/main/utils/schema.jsx): drizzle schema · Typed database model definitions. · `utils/schema.jsx`
- [DB config](https://github.com/adarshwebs/money_management_system/blob/main/utils/dbConfig.jsx): orm config · Drizzle database connection/configuration. · `utils/dbConfig.jsx`
- [Advice helper](https://github.com/adarshwebs/money_management_system/blob/main/utils/getFinancialAdvice.js): ai integration · OpenAI-backed financial recommendations. · `utils/getFinancialAdvice.js`

### Shared UI

Reusable UI primitives and utilities.

- [UI primitives](https://github.com/adarshwebs/money_management_system/blob/main/components/ui/button.jsx): component library · Reusable dialogs, inputs, buttons, alerts, and toast UI. · `components/ui/button.jsx`
- [Utilities](https://github.com/adarshwebs/money_management_system/blob/main/lib/utils.js): helper library · Shared helper functions for class merging and general utilities. · `lib/utils.js`

## Connections

- App shell → Landing page: wraps · Global shell surrounds the public landing page.
- Landing page → Header: uses · Landing page composes shared marketing header.
- Landing page → Hero: uses · Landing page composes hero content.
- Route guard → Dashboard shell: protects · Authenticated workspace is gated by route middleware.
- Dashboard shell → Side nav: contains · Persistent dashboard shell includes primary navigation.
- Dashboard shell → Dashboard header: contains · Layout renders the dashboard header.
- Dashboard home → Metric cards: uses · Dashboard home shows metric summaries.
- Dashboard home → Chart widget: uses · Dashboard home shows charted financial trends.
- Dashboard home → Advice helper: feeds · Aggregated financial state can be used for AI advice.
- Budgets → Schema: persists via · Budget records are modeled in the database schema.
- Expenses → Schema: persists via · Expense records are modeled in the database schema.
- Expense detail → Schema: reads via · Expense detail resolves data through the schema layer.
- Incomes → Schema: persists via · Income records are modeled in the database schema.
- Schema → DB config: connects · Schema is used through the Drizzle database configuration.
- Dashboard home → Schema: summarizes · Overview aggregates the finance data model.
- Budgets → UI primitives: uses · Budget screens rely on shared UI components.
- Expenses → UI primitives: uses · Expense screens rely on shared UI components.
- Incomes → UI primitives: uses · Income screens rely on shared UI components.
- Dashboard home → UI primitives: uses · Dashboard overview is built from shared primitives.
- Header → Utilities: uses · Shared UI components depend on utility helpers.
- Hero → Utilities: uses · Shared UI components depend on utility helpers.
- UI primitives → Utilities: depends on · Component primitives use shared helper functions.
- Sign in → Route guard: enters protected app · Auth boundary separates public and protected areas.
- Sign up → Route guard: enters protected app · Auth boundary separates public and protected areas.
- Dashboard home → Upgrade: links to · Dashboard can route users toward plan upgrade.