# daniel-vergaram/dash architecture

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

- Interactive diagram: https://gitdiagram.com/daniel-vergaram/dash
- Repository: https://github.com/daniel-vergaram/dash

## Overview

Dash is a personal dashboard served by Express, with a React interface for authentication, personal data, and connected services. The main workflow is sign in, choose a dashboard view, and request or change that user’s data through the API; tasks are Google Calendar events, while notes are local Markdown files. The graph preserves the documented service panels and account/access management. Backend internals and some panels are represented at subsystem level where the provided excerpts do not show their implementation details.

Main entry points: [`web/src/lib/api.ts`](https://github.com/daniel-vergaram/dash/blob/main/web/src/lib/api.ts) (API client), [`server.js`](https://github.com/daniel-vergaram/dash/blob/main/server.js) (Express API), [`web/src/App.tsx`](https://github.com/daniel-vergaram/dash/blob/main/web/src/App.tsx) (App entry), [`web/src/context/AuthContext.tsx`](https://github.com/daniel-vergaram/dash/blob/main/web/src/context/AuthContext.tsx) (Auth context)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Dashboard interface"]
  node_app["App entry<br/>[App.tsx]"]
  node_shell["View shell<br/>[Shell.tsx]"]
  node_api["API client<br/>[api.ts]"]
end

subgraph group_identity["Identity and access"]
  node_authctx["Auth context<br/>[AuthContext.tsx]"]
  node_gate["Sign-in gate<br/>[Gate.tsx]"]
  node_account["Account settings<br/>[Account.tsx]"]
  node_access["Access management<br/>[Access.tsx]"]
  node_authcore["Authentication and authorization<br/>[auth.js]"]
  node_authdata[("People and sessions<br/>[auth.json]")]
end

subgraph group_personal["Personal data"]
  node_server["Express API<br/>[server.js]"]
  node_tasks["Tasks and subtasks<br/>[Tasks.tsx]"]
  node_today["Today agenda<br/>[Today.tsx]"]
  node_calendar["Calendar view<br/>[CalendarView.tsx]"]
  node_notes["Markdown notes<br/>[Notes.tsx]"]
  node_notesdata[("Notes files")]
end

subgraph group_services["Connected services"]
  node_drive["Drive browser<br/>[Drive.tsx]"]
  node_music["Spotify panel<br/>[Music.tsx]"]
  node_github["GitHub panel<br/>[GitHubView.tsx]"]
  node_projects["Linear projects<br/>[ProjectsModal.tsx]"]
  node_google["Google APIs"]
  node_spotify["Spotify API"]
  node_githubsvc["GitHub API"]
  node_linear["Linear API"]
end

node_person(("Dashboard user"))

node_person -->|"opens dashboard"| node_app
node_app -->|"provides session"| node_authctx
node_app -->|"shows signed out"| node_gate
node_app -->|"shows signed in"| node_shell
node_shell -->|"reads identity"| node_authctx
node_authctx -->|"requests session"| node_api
node_gate -->|"sends sign-in requests"| node_api
node_account -->|"manages own account"| node_api
node_access -->|"manages users"| node_api
node_authcore -->|"persists identity"| node_authdata
node_server -->|"uses auth module"| node_authcore
node_tasks -->|"requests task changes"| node_api
node_today -->|"loads agenda"| node_api
node_calendar -->|"loads calendar"| node_api
node_notes -->|"reads and edits notes"| node_api
node_drive -->|"browses files"| node_api
node_music -->|"loads and controls music"| node_api
node_github -->|"loads repositories"| node_api
node_projects -->|"manages projects"| node_api
node_api -.->|"sends HTTP requests"| node_server
node_server -.->|"uses calendar and Drive"| node_google
node_server -.->|"uses playback and playlists"| node_spotify
node_server -.->|"uses GitHub"| node_githubsvc
node_server -.->|"proxies project operations"| node_linear
node_server -.->|"stores Markdown notes"| node_notesdata
node_server -.->|"stores tasks as calendar events"| node_google

click node_app "https://github.com/daniel-vergaram/dash/blob/main/web/src/App.tsx"
click node_shell "https://github.com/daniel-vergaram/dash/blob/main/web/src/components/Shell.tsx"
click node_api "https://github.com/daniel-vergaram/dash/blob/main/web/src/lib/api.ts"
click node_authctx "https://github.com/daniel-vergaram/dash/blob/main/web/src/context/AuthContext.tsx"
click node_gate "https://github.com/daniel-vergaram/dash/blob/main/web/src/components/Gate.tsx"
click node_account "https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/Account.tsx"
click node_access "https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/Access.tsx"
click node_authcore "https://github.com/daniel-vergaram/dash/blob/main/auth.js"
click node_authdata "https://github.com/daniel-vergaram/dash/blob/main/data/auth.json"
click node_server "https://github.com/daniel-vergaram/dash/blob/main/server.js"
click node_tasks "https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/Tasks.tsx"
click node_today "https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/Today.tsx"
click node_calendar "https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/CalendarView.tsx"
click node_notes "https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/Notes.tsx"
click node_notesdata "https://github.com/daniel-vergaram/dash/tree/main/data"
click node_drive "https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/Drive.tsx"
click node_music "https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/Music.tsx"
click node_github "https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/GitHubView.tsx"
click node_projects "https://github.com/daniel-vergaram/dash/blob/main/web/src/components/ProjectsModal.tsx"

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_shell,node_api,node_person toneBlue
class node_authctx,node_gate,node_account,node_access,node_authcore,node_authdata toneAmber
class node_server,node_tasks,node_today,node_calendar,node_notes,node_notesdata toneMint
class node_drive,node_music,node_github,node_projects,node_google,node_spotify,node_githubsvc,node_linear toneRose
```

## Components

### Dashboard interface

- [App entry](https://github.com/daniel-vergaram/dash/blob/main/web/src/App.tsx): `web/src/App.tsx`
- [View shell](https://github.com/daniel-vergaram/dash/blob/main/web/src/components/Shell.tsx): `web/src/components/Shell.tsx`
- [API client](https://github.com/daniel-vergaram/dash/blob/main/web/src/lib/api.ts): `web/src/lib/api.ts`

### Identity and access

- [Auth context](https://github.com/daniel-vergaram/dash/blob/main/web/src/context/AuthContext.tsx): `web/src/context/AuthContext.tsx`
- [Sign-in gate](https://github.com/daniel-vergaram/dash/blob/main/web/src/components/Gate.tsx): `web/src/components/Gate.tsx`
- [Account settings](https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/Account.tsx): `web/src/components/views/Account.tsx`
- [Access management](https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/Access.tsx): `web/src/components/views/Access.tsx`
- [Authentication and authorization](https://github.com/daniel-vergaram/dash/blob/main/auth.js): `auth.js`
- [People and sessions](https://github.com/daniel-vergaram/dash/blob/main/data/auth.json): `data/auth.json`

### Personal data

- [Express API](https://github.com/daniel-vergaram/dash/blob/main/server.js): `server.js`
- [Tasks and subtasks](https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/Tasks.tsx): `web/src/components/views/Tasks.tsx`
- [Today agenda](https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/Today.tsx): `web/src/components/views/Today.tsx`
- [Calendar view](https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/CalendarView.tsx): `web/src/components/views/CalendarView.tsx`
- [Markdown notes](https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/Notes.tsx): `web/src/components/views/Notes.tsx`
- [Notes files](https://github.com/daniel-vergaram/dash/tree/main/data): `data`

### Connected services

- [Drive browser](https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/Drive.tsx): `web/src/components/views/Drive.tsx`
- [Spotify panel](https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/Music.tsx): `web/src/components/views/Music.tsx`
- [GitHub panel](https://github.com/daniel-vergaram/dash/blob/main/web/src/components/views/GitHubView.tsx): `web/src/components/views/GitHubView.tsx`
- [Linear projects](https://github.com/daniel-vergaram/dash/blob/main/web/src/components/ProjectsModal.tsx): `web/src/components/ProjectsModal.tsx`
- **Google APIs**
- **Spotify API**
- **GitHub API**
- **Linear API**

### Other components

- **Dashboard user**

## Connections

- Dashboard user → App entry: opens dashboard
- App entry → Auth context: provides session (evidence: `web/src/main.tsx`)
- App entry → Sign-in gate: shows signed out (evidence: `web/src/App.tsx`)
- App entry → View shell: shows signed in (evidence: `web/src/App.tsx`)
- View shell → Auth context: reads identity (evidence: `web/src/components/Shell.tsx`)
- Auth context → API client: requests session (evidence: `web/src/context/AuthContext.tsx`)
- Sign-in gate → API client: sends sign-in requests (evidence: `web/src/components/Gate.tsx`)
- Account settings → API client: manages own account (evidence: `web/src/components/views/Account.tsx`)
- Access management → API client: manages users (evidence: `web/src/components/views/Access.tsx`)
- Authentication and authorization → People and sessions: persists identity (evidence: `README.md`)
- Express API → Authentication and authorization: uses auth module (evidence: `server.js`)
- Tasks and subtasks → API client: requests task changes (evidence: `web/src/components/views/Tasks.tsx`)
- Today agenda → API client: loads agenda (evidence: `web/src/components/views/Today.tsx`)
- Calendar view → API client: loads calendar (evidence: `web/src/components/views/CalendarView.tsx`)
- Markdown notes → API client: reads and edits notes (evidence: `web/src/components/views/Notes.tsx`)
- Drive browser → API client: browses files (evidence: `web/src/components/views/Drive.tsx`)
- Spotify panel → API client: loads and controls music (evidence: `web/src/components/views/Music.tsx`)
- GitHub panel → API client: loads repositories (evidence: `web/src/components/views/GitHubView.tsx`)
- Linear projects → API client: manages projects (evidence: `web/src/components/ProjectsModal.tsx`)
- API client → Express API: sends HTTP requests
- Express API → Google APIs: uses calendar and Drive
- Express API → Spotify API: uses playback and playlists
- Express API → GitHub API: uses GitHub
- Express API → Linear API: proxies project operations
- Express API → Notes files: stores Markdown notes
- Express API → Google APIs: stores tasks as calendar events