# rafaelrebeca/portfolio architecture

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

## Overview

Portfolio Manager is a browser-based portfolio dashboard backed by a Cloudflare Pages API and D1. The user opens the SPA, authenticates or enters a local guest demo, and manages financial data; the frontend requests persisted data through the API, which applies access checks and reads or writes D1. The frontend also computes and presents dashboard metrics, history, growth, goals, and projections. README documents broad product capabilities, but the sampled source is partial, so some feature-level API wiring is not shown. PWA caching is a separate supporting path.

Main entry points: [`js/portfolio.js`](https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js) (Application client), [`index.html`](https://github.com/rafaelrebeca/portfolio/blob/main/index.html) (SPA shell), [`functions/api/[[path]].js`](https://github.com/rafaelrebeca/portfolio/blob/main/functions/api/%5B%5Bpath%5D%5D.js) (API request handler), [`sw.js`](https://github.com/rafaelrebeca/portfolio/blob/main/sw.js) (Service worker)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Portfolio interface"]
  node_shell["SPA shell<br/>[index.html]"]
  node_frontend["Application client<br/>[portfolio.js]"]
end

subgraph group_domain["Portfolio features"]
  node_dashboard["Dashboard analytics<br/>[portfolio.js]"]
  node_holdings["Holdings and assets<br/>[portfolio.js]"]
  node_accounts["Accounts and providers<br/>[portfolio.js]"]
  node_loans["Loan simulator<br/>[portfolio.js]"]
  node_goals["Financial goals<br/>[portfolio.js]"]
  node_dividends["Dividend tracking<br/>[portfolio.js]"]
  node_growth["Growth calendar<br/>[portfolio.js]"]
  node_history["Snapshots and history<br/>[portfolio.js]"]
  node_simulation["Portfolio projections<br/>[portfolio.js]"]
end

subgraph group_backend["API and persistence"]
  node_auth["Authentication and access<br/>[&#91;&#91;path&#93;&#93;.js]"]
  node_api["API request handler<br/>[&#91;&#91;path&#93;&#93;.js]"]
  node_portfolio_api["Portfolio data API<br/>[&#91;&#91;path&#93;&#93;.js]"]
  node_market_api["Market data integration<br/>[&#91;&#91;path&#93;&#93;.js]"]
  node_db[("D1 portfolio database<br/>[schema.sql]")]
end

subgraph group_pwa["Offline app"]
  node_service_worker["Service worker<br/>[sw.js]"]
  node_browser_cache[("Browser cache")]
end

node_user(("Portfolio user"))
node_market_services["Market data services"]
node_chart_cdn["Chart.js CDN"]

node_user -->|"opens"| node_shell
node_shell -->|"loads"| node_frontend
node_frontend -->|"requests data"| node_api
node_api -->|"checks access"| node_auth
node_api -->|"dispatches"| node_portfolio_api
node_auth -->|"reads sessions"| node_db
node_portfolio_api -->|"reads and writes"| node_db
node_market_api -->|"reads and updates"| node_db
node_frontend -->|"requests prices"| node_market_api
node_market_api -.->|"fetches prices"| node_market_services
node_frontend -->|"renders"| node_dashboard
node_frontend -->|"renders"| node_holdings
node_frontend -->|"renders"| node_accounts
node_frontend -->|"calculates"| node_loans
node_frontend -->|"tracks"| node_goals
node_frontend -->|"tracks"| node_dividends
node_frontend -->|"renders"| node_growth
node_frontend -->|"replays"| node_history
node_frontend -->|"projects"| node_simulation
node_service_worker -->|"caches shell and GETs"| node_browser_cache
node_service_worker -->|"serves cached shell"| node_shell
node_shell -->|"registers"| node_service_worker
node_frontend -.->|"uses charts"| node_chart_cdn

click node_shell "https://github.com/rafaelrebeca/portfolio/blob/main/index.html"
click node_frontend "https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js"
click node_dashboard "https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js"
click node_holdings "https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js"
click node_accounts "https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js"
click node_loans "https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js"
click node_goals "https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js"
click node_dividends "https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js"
click node_growth "https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js"
click node_history "https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js"
click node_simulation "https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js"
click node_auth "https://github.com/rafaelrebeca/portfolio/blob/main/functions/api/%5B%5Bpath%5D%5D.js"
click node_api "https://github.com/rafaelrebeca/portfolio/blob/main/functions/api/%5B%5Bpath%5D%5D.js"
click node_portfolio_api "https://github.com/rafaelrebeca/portfolio/blob/main/functions/api/%5B%5Bpath%5D%5D.js"
click node_market_api "https://github.com/rafaelrebeca/portfolio/blob/main/functions/api/%5B%5Bpath%5D%5D.js"
click node_db "https://github.com/rafaelrebeca/portfolio/blob/main/schema.sql"
click node_service_worker "https://github.com/rafaelrebeca/portfolio/blob/main/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_shell,node_frontend,node_user toneBlue
class node_dashboard,node_holdings,node_accounts,node_loans,node_goals,node_dividends,node_growth,node_history,node_simulation toneAmber
class node_auth,node_api,node_portfolio_api,node_market_api,node_db toneMint
class node_service_worker,node_browser_cache toneRose
class node_market_services,node_chart_cdn toneIndigo
```

## Components

### Portfolio interface

- [SPA shell](https://github.com/rafaelrebeca/portfolio/blob/main/index.html): `index.html`
- [Application client](https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js): `js/portfolio.js`

### Portfolio features

- [Dashboard analytics](https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js): `js/portfolio.js`
- [Holdings and assets](https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js): `js/portfolio.js`
- [Accounts and providers](https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js): `js/portfolio.js`
- [Loan simulator](https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js): `js/portfolio.js`
- [Financial goals](https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js): `js/portfolio.js`
- [Dividend tracking](https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js): `js/portfolio.js`
- [Growth calendar](https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js): `js/portfolio.js`
- [Snapshots and history](https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js): `js/portfolio.js`
- [Portfolio projections](https://github.com/rafaelrebeca/portfolio/blob/main/js/portfolio.js): `js/portfolio.js`

### API and persistence

- [Authentication and access](https://github.com/rafaelrebeca/portfolio/blob/main/functions/api/%5B%5Bpath%5D%5D.js): `functions/api/[[path]].js`
- [API request handler](https://github.com/rafaelrebeca/portfolio/blob/main/functions/api/%5B%5Bpath%5D%5D.js): `functions/api/[[path]].js`
- [Portfolio data API](https://github.com/rafaelrebeca/portfolio/blob/main/functions/api/%5B%5Bpath%5D%5D.js): `functions/api/[[path]].js`
- [Market data integration](https://github.com/rafaelrebeca/portfolio/blob/main/functions/api/%5B%5Bpath%5D%5D.js): `functions/api/[[path]].js`
- [D1 portfolio database](https://github.com/rafaelrebeca/portfolio/blob/main/schema.sql): `schema.sql`

### Offline app

- [Service worker](https://github.com/rafaelrebeca/portfolio/blob/main/sw.js): `sw.js`
- **Browser cache**

### Other components

- **Portfolio user**
- **Market data services**
- **Chart.js CDN**

## Connections

- Portfolio user → SPA shell: opens
- SPA shell → Application client: loads
- Application client → API request handler: requests data
- API request handler → Authentication and access: checks access
- API request handler → Portfolio data API: dispatches
- Authentication and access → D1 portfolio database: reads sessions
- Portfolio data API → D1 portfolio database: reads and writes
- Market data integration → D1 portfolio database: reads and updates
- Application client → Market data integration: requests prices
- Market data integration → Market data services: fetches prices
- Application client → Dashboard analytics: renders
- Application client → Holdings and assets: renders
- Application client → Accounts and providers: renders
- Application client → Loan simulator: calculates
- Application client → Financial goals: tracks
- Application client → Dividend tracking: tracks
- Application client → Growth calendar: renders
- Application client → Snapshots and history: replays
- Application client → Portfolio projections: projects
- Service worker → Browser cache: caches shell and GETs
- Service worker → SPA shell: serves cached shell
- SPA shell → Service worker: registers
- Application client → Chart.js CDN: uses charts