# jamir4270/oreo-finance architecture

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

## Overview

Oreo is a personal-finance tracker whose main workflow is recording income, expenses, and transfers across accounts, then reviewing balances, budgets, and analytics. Users organize activity with categories and can manage accounts, budgets, preferences, and authentication. The app is organized around Next.js route pages and client feature components, with server actions and Supabase providing the backend boundary. Currency conversion and installable PWA support are distinct capabilities. Most feature pages and actions were not sampled, so their wiring is shown only where documented or directly evidenced.

Main entry points: [`lib/supabase/server.ts`](https://github.com/jamir4270/oreo-finance/blob/main/lib/supabase/server.ts) (Server client), [`app/(auth)/login/page.tsx`](https://github.com/jamir4270/oreo-finance/blob/main/app/(auth)/login/page.tsx) (Sign in and signup), [`app/(auth)/onboarding/page.tsx`](https://github.com/jamir4270/oreo-finance/blob/main/app/(auth)/onboarding/page.tsx) (Onboarding), [`components/accounts/AccountsPageClient.tsx`](https://github.com/jamir4270/oreo-finance/blob/main/components/accounts/AccountsPageClient.tsx) (Account management)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["App experience"]
  node_landing["Landing page"]
  node_auth["Sign in and signup<br/>[page.tsx]"]
  node_onboarding["Onboarding<br/>[page.tsx]"]
  node_shell["App navigation<br/>[AppShell.tsx]"]
  node_dashboard["Dashboard<br/>[page.tsx]"]
  node_settings["User settings<br/>[SettingsClient.tsx]"]
end

subgraph group_finance["Finance features"]
  node_accounts["Account management"]
  node_transactions["Transaction ledger"]
  node_categories["Categories"]
end

subgraph group_operations["Planning and insights"]
  node_budgets["Rollover budgets"]
  node_analytics["Financial analytics"]
end

subgraph group_backend["Backend services"]
  node_account_actions["Account actions<br/>[accounts.ts]"]
  node_transaction_actions["Transaction actions<br/>[transactions.ts]"]
  node_category_actions["Category actions<br/>[categories.ts]"]
  node_budget_actions["Budget actions<br/>[budgets.ts]"]
  node_auth_actions["Authentication actions<br/>[auth.ts]"]
  node_onboarding_actions["Onboarding actions<br/>[onboarding.ts]"]
  node_settings_actions["Settings actions<br/>[settings.ts]"]
  node_supabase_server["Server client<br/>[server.ts]"]
  node_supabase_browser["Browser client<br/>[client.ts]"]
  node_database[("Supabase database")]
end

subgraph group_platform["Platform capabilities"]
  node_rates["Currency conversion<br/>[exchange-rates.ts]"]
  node_rates_service["Open Exchange Rates"]
  node_pwa["PWA support"]
  node_service_worker["Offline worker<br/>[sw.js]"]
end

node_person(("Finance user"))

node_person -->|"visits"| node_landing
node_person -->|"authenticates"| node_auth
node_person -->|"sets up"| node_onboarding
node_person -->|"uses"| node_shell
node_landing -->|"starts signup"| node_auth
node_auth -->|"submits credentials"| node_auth_actions
node_auth -->|"continues setup"| node_onboarding
node_onboarding -->|"saves setup"| node_onboarding_actions
node_shell -->|"navigates"| node_dashboard
node_accounts -->|"manages accounts"| node_account_actions
node_transactions -->|"writes and deletes"| node_transaction_actions
node_categories -->|"manages categories"| node_category_actions
node_budgets -->|"manages budgets"| node_budget_actions
node_settings -->|"updates preferences"| node_settings_actions
node_account_actions -->|"uses client"| node_supabase_server
node_transaction_actions -->|"uses client"| node_supabase_server
node_category_actions -->|"uses client"| node_supabase_server
node_budget_actions -->|"uses client"| node_supabase_server
node_auth_actions -->|"uses client"| node_supabase_server
node_onboarding_actions -->|"uses client"| node_supabase_server
node_settings_actions -->|"uses client"| node_supabase_server
node_supabase_server -->|"queries and updates"| node_database
node_supabase_browser -->|"accesses data"| node_database
node_accounts -->|"converts totals"| node_rates
node_rates -.->|"gets exchange rates"| node_rates_service
node_person -->|"installs app"| node_pwa
node_pwa -->|"registers"| node_service_worker
node_transactions -.->|"syncs in realtime"| node_database

click node_landing "https://github.com/jamir4270/oreo-finance/blob/main/components/landing/LandingPageClient.tsx"
click node_auth "https://github.com/jamir4270/oreo-finance/blob/main/app/(auth)/login/page.tsx"
click node_onboarding "https://github.com/jamir4270/oreo-finance/blob/main/app/(auth)/onboarding/page.tsx"
click node_shell "https://github.com/jamir4270/oreo-finance/blob/main/components/layout/AppShell.tsx"
click node_dashboard "https://github.com/jamir4270/oreo-finance/blob/main/app/(app)/dashboard/page.tsx"
click node_accounts "https://github.com/jamir4270/oreo-finance/blob/main/components/accounts/AccountsPageClient.tsx"
click node_transactions "https://github.com/jamir4270/oreo-finance/blob/main/components/transactions/TransactionsPageClient.tsx"
click node_categories "https://github.com/jamir4270/oreo-finance/blob/main/components/categories/CategoriesPageClient.tsx"
click node_budgets "https://github.com/jamir4270/oreo-finance/blob/main/components/budgets/BudgetsPageClient.tsx"
click node_analytics "https://github.com/jamir4270/oreo-finance/blob/main/components/analytics/AnalyticsPageClient.tsx"
click node_settings "https://github.com/jamir4270/oreo-finance/blob/main/components/settings/SettingsClient.tsx"
click node_account_actions "https://github.com/jamir4270/oreo-finance/blob/main/app/actions/accounts.ts"
click node_transaction_actions "https://github.com/jamir4270/oreo-finance/blob/main/app/actions/transactions.ts"
click node_category_actions "https://github.com/jamir4270/oreo-finance/blob/main/app/actions/categories.ts"
click node_budget_actions "https://github.com/jamir4270/oreo-finance/blob/main/app/actions/budgets.ts"
click node_auth_actions "https://github.com/jamir4270/oreo-finance/blob/main/app/actions/auth.ts"
click node_onboarding_actions "https://github.com/jamir4270/oreo-finance/blob/main/app/actions/onboarding.ts"
click node_settings_actions "https://github.com/jamir4270/oreo-finance/blob/main/app/actions/settings.ts"
click node_supabase_server "https://github.com/jamir4270/oreo-finance/blob/main/lib/supabase/server.ts"
click node_supabase_browser "https://github.com/jamir4270/oreo-finance/blob/main/lib/supabase/client.ts"
click node_rates "https://github.com/jamir4270/oreo-finance/blob/main/lib/exchange-rates.ts"
click node_pwa "https://github.com/jamir4270/oreo-finance/blob/main/components/PwaRegistration.tsx"
click node_service_worker "https://github.com/jamir4270/oreo-finance/blob/main/public/sw.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_landing,node_auth,node_onboarding,node_shell,node_dashboard,node_settings,node_person toneBlue
class node_accounts,node_transactions,node_categories toneAmber
class node_budgets,node_analytics toneMint
class node_account_actions,node_transaction_actions,node_category_actions,node_budget_actions,node_auth_actions,node_onboarding_actions,node_settings_actions,node_supabase_server,node_supabase_browser,node_database toneRose
class node_rates,node_rates_service,node_pwa,node_service_worker toneIndigo
```

## Components

### App experience

- [Landing page](https://github.com/jamir4270/oreo-finance/blob/main/components/landing/LandingPageClient.tsx): `components/landing/LandingPageClient.tsx`
- [Sign in and signup](https://github.com/jamir4270/oreo-finance/blob/main/app/(auth)/login/page.tsx): `app/(auth)/login/page.tsx`
- [Onboarding](https://github.com/jamir4270/oreo-finance/blob/main/app/(auth)/onboarding/page.tsx): `app/(auth)/onboarding/page.tsx`
- [App navigation](https://github.com/jamir4270/oreo-finance/blob/main/components/layout/AppShell.tsx): `components/layout/AppShell.tsx`
- [Dashboard](https://github.com/jamir4270/oreo-finance/blob/main/app/(app)/dashboard/page.tsx): `app/(app)/dashboard/page.tsx`
- [User settings](https://github.com/jamir4270/oreo-finance/blob/main/components/settings/SettingsClient.tsx): `components/settings/SettingsClient.tsx`

### Finance features

- [Account management](https://github.com/jamir4270/oreo-finance/blob/main/components/accounts/AccountsPageClient.tsx): `components/accounts/AccountsPageClient.tsx`
- [Transaction ledger](https://github.com/jamir4270/oreo-finance/blob/main/components/transactions/TransactionsPageClient.tsx): `components/transactions/TransactionsPageClient.tsx`
- [Categories](https://github.com/jamir4270/oreo-finance/blob/main/components/categories/CategoriesPageClient.tsx): `components/categories/CategoriesPageClient.tsx`

### Planning and insights

- [Rollover budgets](https://github.com/jamir4270/oreo-finance/blob/main/components/budgets/BudgetsPageClient.tsx): `components/budgets/BudgetsPageClient.tsx`
- [Financial analytics](https://github.com/jamir4270/oreo-finance/blob/main/components/analytics/AnalyticsPageClient.tsx): `components/analytics/AnalyticsPageClient.tsx`

### Backend services

- [Account actions](https://github.com/jamir4270/oreo-finance/blob/main/app/actions/accounts.ts): `app/actions/accounts.ts`
- [Transaction actions](https://github.com/jamir4270/oreo-finance/blob/main/app/actions/transactions.ts): `app/actions/transactions.ts`
- [Category actions](https://github.com/jamir4270/oreo-finance/blob/main/app/actions/categories.ts): `app/actions/categories.ts`
- [Budget actions](https://github.com/jamir4270/oreo-finance/blob/main/app/actions/budgets.ts): `app/actions/budgets.ts`
- [Authentication actions](https://github.com/jamir4270/oreo-finance/blob/main/app/actions/auth.ts): `app/actions/auth.ts`
- [Onboarding actions](https://github.com/jamir4270/oreo-finance/blob/main/app/actions/onboarding.ts): `app/actions/onboarding.ts`
- [Settings actions](https://github.com/jamir4270/oreo-finance/blob/main/app/actions/settings.ts): `app/actions/settings.ts`
- [Server client](https://github.com/jamir4270/oreo-finance/blob/main/lib/supabase/server.ts): `lib/supabase/server.ts`
- [Browser client](https://github.com/jamir4270/oreo-finance/blob/main/lib/supabase/client.ts): `lib/supabase/client.ts`
- **Supabase database**

### Platform capabilities

- [Currency conversion](https://github.com/jamir4270/oreo-finance/blob/main/lib/exchange-rates.ts): `lib/exchange-rates.ts`
- **Open Exchange Rates**
- [PWA support](https://github.com/jamir4270/oreo-finance/blob/main/components/PwaRegistration.tsx): `components/PwaRegistration.tsx`
- [Offline worker](https://github.com/jamir4270/oreo-finance/blob/main/public/sw.js): `public/sw.js`

### Other components

- **Finance user**

## Connections

- Finance user → Landing page: visits
- Finance user → Sign in and signup: authenticates
- Finance user → Onboarding: sets up
- Finance user → App navigation: uses
- Landing page → Sign in and signup: starts signup
- Sign in and signup → Authentication actions: submits credentials
- Sign in and signup → Onboarding: continues setup
- Onboarding → Onboarding actions: saves setup
- App navigation → Dashboard: navigates
- Account management → Account actions: manages accounts
- Transaction ledger → Transaction actions: writes and deletes
- Categories → Category actions: manages categories
- Rollover budgets → Budget actions: manages budgets
- User settings → Settings actions: updates preferences
- Account actions → Server client: uses client
- Transaction actions → Server client: uses client
- Category actions → Server client: uses client
- Budget actions → Server client: uses client
- Authentication actions → Server client: uses client
- Onboarding actions → Server client: uses client
- Settings actions → Server client: uses client
- Server client → Supabase database: queries and updates
- Browser client → Supabase database: accesses data
- Account management → Currency conversion: converts totals
- Currency conversion → Open Exchange Rates: gets exchange rates
- Finance user → PWA support: installs app
- PWA support → Offline worker: registers
- Transaction ledger → Supabase database: syncs in realtime