# seedcompany/cord-field architecture

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

- Interactive diagram: https://gitdiagram.com/seedcompany/cord-field
- Repository: https://github.com/seedcompany/cord-field

## Overview

CORD Field is the React UI for field-program management, backed by a separately hosted CORD API. The principal user workflow is to open the application, browse or manage program entities through lists and grids, and receive query or mutation results through Apollo. The tree also shows distinct reporting, changeset, collaboration, and file-upload capabilities. Sampled code supports the application-provider setup and list-query behavior; most domain screens were not sampled, so their detailed call wiring is not inferred.

Main entry points: [`src/api/client/createClient.ts`](https://github.com/seedcompany/cord-field/blob/develop/src/api/client/createClient.ts) (Apollo client), [`src/App.tsx`](https://github.com/seedcompany/cord-field/blob/develop/src/App.tsx) (React application), [`src/server/server.ts`](https://github.com/seedcompany/cord-field/blob/develop/src/server/server.ts) (Seed API proxy), [`src/components/List`](https://github.com/seedcompany/cord-field/tree/develop/src/components/List) (Lists and grids)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["React application<br/>[App.tsx]"]
  node_session["Session and auth"]
  node_server["Web server<br/>[server.ts]"]
end

subgraph group_data["API and data"]
  node_apollo["Apollo client<br/>[createClient.ts]"]
  node_cache["GraphQL cache<br/>[createCache.ts]"]
  node_seedproxy["Seed API proxy<br/>[server.ts]"]
  node_seedcommunities["Community seed data"]
end

subgraph group_program["Program management"]
  node_lists["Lists and grids"]
  node_projects["Projects and partners"]
  node_languages["Languages and engagements"]
  node_fields["Field regions and zones"]
  node_reports["Reports and budgets"]
end

subgraph group_collab["Collaboration and files"]
  node_changesets["Changesets"]
  node_comments["Comments"]
  node_uploads["File uploads"]
  node_files["File previews<br/>[useFilePreview.tsx]"]
end

node_user(("Field user"))
node_api{{"CORD API"}}
node_seedapi{{"Seed API"}}

node_user -->|"uses"| node_app
node_app -->|"provides client"| node_apollo
node_app -->|"provides session"| node_session
node_apollo -->|"uses cache"| node_cache
node_apollo -->|"sends GraphQL"| node_api
node_server -->|"logout mutation"| node_api
node_server -->|"serves proxy"| node_seedproxy
node_seedproxy -.->|"forwards GraphQL"| node_seedapi
node_seedcommunities -.->|"requests data"| node_seedproxy
node_lists -->|"queries pages"| node_apollo
node_projects -->|"uses list queries"| node_lists
node_languages -->|"uses list queries"| node_lists
node_fields -->|"manages records"| node_api
node_reports -->|"loads and updates"| node_api
node_changesets -->|"loads diffs"| node_api
node_comments -->|"loads and updates"| node_api
node_uploads -->|"submits file data"| node_api
node_files -->|"shows preview"| node_user

click node_app "https://github.com/seedcompany/cord-field/blob/develop/src/App.tsx"
click node_session "https://github.com/seedcompany/cord-field/tree/develop/src/components/Session"
click node_server "https://github.com/seedcompany/cord-field/blob/develop/src/server/server.ts"
click node_apollo "https://github.com/seedcompany/cord-field/blob/develop/src/api/client/createClient.ts"
click node_cache "https://github.com/seedcompany/cord-field/blob/develop/src/api/client/createCache.ts"
click node_seedproxy "https://github.com/seedcompany/cord-field/blob/develop/src/server/server.ts"
click node_lists "https://github.com/seedcompany/cord-field/tree/develop/src/components/List"
click node_projects "https://github.com/seedcompany/cord-field/tree/develop/src/components/ProjectDataGrid"
click node_languages "https://github.com/seedcompany/cord-field/tree/develop/src/components/LanguageDataGrid"
click node_fields "https://github.com/seedcompany/cord-field/tree/develop/src/components/FieldRegion"
click node_reports "https://github.com/seedcompany/cord-field/tree/develop/src/components/PeriodicReports"
click node_changesets "https://github.com/seedcompany/cord-field/tree/develop/src/components/Changeset"
click node_comments "https://github.com/seedcompany/cord-field/tree/develop/src/components/Comments"
click node_uploads "https://github.com/seedcompany/cord-field/tree/develop/src/components/Upload"
click node_files "https://github.com/seedcompany/cord-field/blob/develop/src/components/files/FilePreview/useFilePreview.tsx"
click node_seedcommunities "https://github.com/seedcompany/cord-field/tree/develop/src/api/seed"

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_session,node_server,node_user toneBlue
class node_apollo,node_cache,node_seedproxy,node_seedcommunities toneAmber
class node_lists,node_projects,node_languages,node_fields,node_reports,node_api,node_seedapi toneMint
class node_changesets,node_comments,node_uploads,node_files toneRose
```

## Components

### Application shell

- [React application](https://github.com/seedcompany/cord-field/blob/develop/src/App.tsx): `src/App.tsx`
- [Session and auth](https://github.com/seedcompany/cord-field/tree/develop/src/components/Session): `src/components/Session`
- [Web server](https://github.com/seedcompany/cord-field/blob/develop/src/server/server.ts): `src/server/server.ts`

### API and data

- [Apollo client](https://github.com/seedcompany/cord-field/blob/develop/src/api/client/createClient.ts): `src/api/client/createClient.ts`
- [GraphQL cache](https://github.com/seedcompany/cord-field/blob/develop/src/api/client/createCache.ts): `src/api/client/createCache.ts`
- [Seed API proxy](https://github.com/seedcompany/cord-field/blob/develop/src/server/server.ts): `src/server/server.ts`
- [Community seed data](https://github.com/seedcompany/cord-field/tree/develop/src/api/seed): `src/api/seed`

### Program management

- [Lists and grids](https://github.com/seedcompany/cord-field/tree/develop/src/components/List): `src/components/List`
- [Projects and partners](https://github.com/seedcompany/cord-field/tree/develop/src/components/ProjectDataGrid): `src/components/ProjectDataGrid`
- [Languages and engagements](https://github.com/seedcompany/cord-field/tree/develop/src/components/LanguageDataGrid): `src/components/LanguageDataGrid`
- [Field regions and zones](https://github.com/seedcompany/cord-field/tree/develop/src/components/FieldRegion): `src/components/FieldRegion`
- [Reports and budgets](https://github.com/seedcompany/cord-field/tree/develop/src/components/PeriodicReports): `src/components/PeriodicReports`

### Collaboration and files

- [Changesets](https://github.com/seedcompany/cord-field/tree/develop/src/components/Changeset): `src/components/Changeset`
- [Comments](https://github.com/seedcompany/cord-field/tree/develop/src/components/Comments): `src/components/Comments`
- [File uploads](https://github.com/seedcompany/cord-field/tree/develop/src/components/Upload): `src/components/Upload`
- [File previews](https://github.com/seedcompany/cord-field/blob/develop/src/components/files/FilePreview/useFilePreview.tsx): `src/components/files/FilePreview/useFilePreview.tsx`

### Other components

- **Field user**
- **CORD API**
- **Seed API**

## Connections

- Field user → React application: uses
- React application → Apollo client: provides client
- React application → Session and auth: provides session
- Apollo client → GraphQL cache: uses cache
- Apollo client → CORD API: sends GraphQL
- Web server → CORD API: logout mutation
- Web server → Seed API proxy: serves proxy
- Seed API proxy → Seed API: forwards GraphQL
- Community seed data → Seed API proxy: requests data
- Lists and grids → Apollo client: queries pages
- Projects and partners → Lists and grids: uses list queries
- Languages and engagements → Lists and grids: uses list queries
- Field regions and zones → CORD API: manages records
- Reports and budgets → CORD API: loads and updates
- Changesets → CORD API: loads diffs
- Comments → CORD API: loads and updates
- File uploads → CORD API: submits file data
- File previews → Field user: shows preview