# alexrosario/delegatorfrontend architecture

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

- Interactive diagram: https://gitdiagram.com/alexrosario/delegatorfrontend
- Repository: https://github.com/alexrosario/delegatorfrontend

## Overview

This is a React civic-engagement app for browsing legislation and representatives, comparing congressional votes, and encouraging constituent contact. The main flow routes users into bill discovery or representative views; signed-in users also get personalized voting and representative data. Bill cards support voting and contact-message drafting, while representative cards show alignment and donor information. Relationships below use the excerpts and SOURCE INDEX references; several component internals were not sampled, so those links are omitted rather than assumed.

Main entry points: [`src/api.tsx`](https://github.com/alexrosario/delegatorfrontend/blob/main/src/api.tsx) (Request client), [`src/providers/BillProvider.tsx`](https://github.com/alexrosario/delegatorfrontend/blob/main/src/providers/BillProvider.tsx) (Bill state and feeds), [`src/App.tsx`](https://github.com/alexrosario/delegatorfrontend/blob/main/src/App.tsx) (Main application), [`src/main.tsx`](https://github.com/alexrosario/delegatorfrontend/blob/main/src/main.tsx) (Route entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and identity"]
  node_entry["Route entry<br/>[main.tsx]"]
  node_auth["Authentication state<br/>[AuthProvider.tsx]"]
  node_registration["Registration and sign-in<br/>[Register.tsx]"]
  node_application["Main application<br/>[App.tsx]"]
  node_screen["Screen selection<br/>[ScreenProvider.tsx]"]
end

subgraph group_legislation["Legislation and voting"]
  node_billsection["Bill sections<br/>[BillSection.tsx]"]
  node_discovery["Bill discovery<br/>[BillDiscover.tsx]"]
  node_billdata["Bill state and feeds<br/>[BillProvider.tsx]"]
  node_billcard["Bill details<br/>[BillCard.tsx]"]
  node_voting["Bill voting<br/>[VoteButtons.tsx]"]
  node_votecontrol["Vote control<br/>[VoteButton.tsx]"]
  node_contact["Constituent contact<br/>[ComButton.tsx]"]
end

subgraph group_representatives["Representative insights"]
  node_memberdata["Member data<br/>[MemberProvider.tsx]"]
  node_repsection["Representative sections<br/>[RepSection.tsx]"]
  node_repcard["Representative profile<br/>[RepCard.tsx]"]
  node_donors["Campaign donors<br/>[RepDonors.tsx]"]
  node_alignment["Vote alignment<br/>[useAlignment.ts]"]
end

subgraph group_services["Data and domain logic"]
  node_api["Request client<br/>[api.tsx]"]
  node_voteparser["Roll-call parsing<br/>[parser-utils.ts]"]
  node_passage["Bill passage rules<br/>[passage-utils.ts]"]
  node_facets["Bill facets<br/>[billFacets.ts]"]
end

node_user(("Visitor"))
node_backend{{"Application API"}}

node_user -->|"opens"| node_entry
node_entry -->|"routes to"| node_application
node_entry -->|"routes to"| node_registration
node_registration -->|"submits credentials"| node_api
node_registration -->|"updates session"| node_auth
node_entry -->|"provides state"| node_auth
node_entry -->|"provides state"| node_screen
node_application -->|"reads selection"| node_screen
node_application -->|"reads user"| node_auth
node_application -->|"renders bills"| node_billsection
node_application -->|"renders reps"| node_repsection
node_application -->|"provides bill state"| node_billdata
node_application -->|"provides member state"| node_memberdata
node_billsection -->|"renders"| node_discovery
node_billsection -->|"reads state"| node_billdata
node_discovery -->|"renders"| node_billcard
node_discovery -->|"reads and updates"| node_billdata
node_discovery -->|"fetches bills"| node_api
node_discovery -->|"uses filters"| node_facets
node_billdata -->|"loads bill data"| node_api
node_billdata -->|"personalizes requests"| node_auth
node_billdata -->|"selects queries"| node_facets
node_billcard -->|"renders"| node_voting
node_billcard -->|"renders"| node_contact
node_voting -->|"records votes"| node_api
node_voting -->|"renders"| node_votecontrol
node_voting -->|"reads vote state"| node_billdata
node_contact -->|"submits messages"| node_api
node_contact -->|"uses representatives"| node_memberdata
node_contact -->|"uses vote history"| node_billdata
node_repsection -->|"reads members"| node_memberdata
node_repsection -->|"renders"| node_repcard
node_memberdata -->|"loads representatives"| node_api
node_memberdata -->|"loads for user"| node_auth
node_repcard -->|"calculates alignment"| node_alignment
node_repcard -->|"renders donor view"| node_donors
node_alignment -->|"fetches vote logs"| node_api
node_alignment -->|"compares bill votes"| node_billdata
node_alignment -->|"infers disposition"| node_passage
node_api -->|"sends requests"| node_backend
node_api -->|"parses roll calls"| node_voteparser
node_backend -.->|"returns data"| node_api

click node_entry "https://github.com/alexrosario/delegatorfrontend/blob/main/src/main.tsx"
click node_auth "https://github.com/alexrosario/delegatorfrontend/blob/main/src/providers/AuthProvider.tsx"
click node_registration "https://github.com/alexrosario/delegatorfrontend/blob/main/src/auth-components/Register.tsx"
click node_application "https://github.com/alexrosario/delegatorfrontend/blob/main/src/App.tsx"
click node_screen "https://github.com/alexrosario/delegatorfrontend/blob/main/src/providers/ScreenProvider.tsx"
click node_billsection "https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/BillComponents/BillSection.tsx"
click node_discovery "https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/BillComponents/BillDiscover.tsx"
click node_billdata "https://github.com/alexrosario/delegatorfrontend/blob/main/src/providers/BillProvider.tsx"
click node_billcard "https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/BillComponents/BillCard.tsx"
click node_voting "https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/BillComponents/VoteButtons.tsx"
click node_votecontrol "https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/BillComponents/VoteButton.tsx"
click node_contact "https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/BillComponents/ComButton.tsx"
click node_memberdata "https://github.com/alexrosario/delegatorfrontend/blob/main/src/providers/MemberProvider.tsx"
click node_repsection "https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/RepComponents/RepSection.tsx"
click node_repcard "https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/RepComponents/RepCard.tsx"
click node_donors "https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/RepComponents/RepDonors.tsx"
click node_alignment "https://github.com/alexrosario/delegatorfrontend/blob/main/src/hooks/useAlignment.ts"
click node_api "https://github.com/alexrosario/delegatorfrontend/blob/main/src/api.tsx"
click node_voteparser "https://github.com/alexrosario/delegatorfrontend/blob/main/src/utils/parser-utils.ts"
click node_passage "https://github.com/alexrosario/delegatorfrontend/blob/main/src/utils/passage-utils.ts"
click node_facets "https://github.com/alexrosario/delegatorfrontend/blob/main/src/constants/billFacets.ts"

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_entry,node_auth,node_registration,node_application,node_screen toneBlue
class node_billsection,node_discovery,node_billdata,node_billcard,node_voting,node_votecontrol,node_contact toneAmber
class node_memberdata,node_repsection,node_repcard,node_donors,node_alignment,node_backend toneMint
class node_api,node_voteparser,node_passage,node_facets toneRose
class node_user toneIndigo
```

## Components

### App and identity

- [Route entry](https://github.com/alexrosario/delegatorfrontend/blob/main/src/main.tsx): `src/main.tsx`
- [Authentication state](https://github.com/alexrosario/delegatorfrontend/blob/main/src/providers/AuthProvider.tsx): `src/providers/AuthProvider.tsx`
- [Registration and sign-in](https://github.com/alexrosario/delegatorfrontend/blob/main/src/auth-components/Register.tsx): `src/auth-components/Register.tsx`
- [Main application](https://github.com/alexrosario/delegatorfrontend/blob/main/src/App.tsx): `src/App.tsx`
- [Screen selection](https://github.com/alexrosario/delegatorfrontend/blob/main/src/providers/ScreenProvider.tsx): `src/providers/ScreenProvider.tsx`

### Legislation and voting

- [Bill sections](https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/BillComponents/BillSection.tsx): `src/components/BillComponents/BillSection.tsx`
- [Bill discovery](https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/BillComponents/BillDiscover.tsx): `src/components/BillComponents/BillDiscover.tsx`
- [Bill state and feeds](https://github.com/alexrosario/delegatorfrontend/blob/main/src/providers/BillProvider.tsx): `src/providers/BillProvider.tsx`
- [Bill details](https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/BillComponents/BillCard.tsx): `src/components/BillComponents/BillCard.tsx`
- [Bill voting](https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/BillComponents/VoteButtons.tsx): `src/components/BillComponents/VoteButtons.tsx`
- [Vote control](https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/BillComponents/VoteButton.tsx): `src/components/BillComponents/VoteButton.tsx`
- [Constituent contact](https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/BillComponents/ComButton.tsx): `src/components/BillComponents/ComButton.tsx`

### Representative insights

- [Member data](https://github.com/alexrosario/delegatorfrontend/blob/main/src/providers/MemberProvider.tsx): `src/providers/MemberProvider.tsx`
- [Representative sections](https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/RepComponents/RepSection.tsx): `src/components/RepComponents/RepSection.tsx`
- [Representative profile](https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/RepComponents/RepCard.tsx): `src/components/RepComponents/RepCard.tsx`
- [Campaign donors](https://github.com/alexrosario/delegatorfrontend/blob/main/src/components/RepComponents/RepDonors.tsx): `src/components/RepComponents/RepDonors.tsx`
- [Vote alignment](https://github.com/alexrosario/delegatorfrontend/blob/main/src/hooks/useAlignment.ts): `src/hooks/useAlignment.ts`

### Data and domain logic

- [Request client](https://github.com/alexrosario/delegatorfrontend/blob/main/src/api.tsx): `src/api.tsx`
- [Roll-call parsing](https://github.com/alexrosario/delegatorfrontend/blob/main/src/utils/parser-utils.ts): `src/utils/parser-utils.ts`
- [Bill passage rules](https://github.com/alexrosario/delegatorfrontend/blob/main/src/utils/passage-utils.ts): `src/utils/passage-utils.ts`
- [Bill facets](https://github.com/alexrosario/delegatorfrontend/blob/main/src/constants/billFacets.ts): `src/constants/billFacets.ts`

### Other components

- **Visitor**
- **Application API**

## Connections

- Visitor → Route entry: opens (evidence: `src/main.tsx`)
- Route entry → Main application: routes to (evidence: `src/main.tsx`)
- Route entry → Registration and sign-in: routes to (evidence: `src/main.tsx`)
- Registration and sign-in → Request client: submits credentials (evidence: `src/auth-components/Register.tsx`)
- Registration and sign-in → Authentication state: updates session (evidence: `src/auth-components/Register.tsx`)
- Route entry → Authentication state: provides state (evidence: `src/main.tsx`)
- Route entry → Screen selection: provides state (evidence: `src/main.tsx`)
- Main application → Screen selection: reads selection (evidence: `src/App.tsx`)
- Main application → Authentication state: reads user (evidence: `src/App.tsx`)
- Main application → Bill sections: renders bills (evidence: `src/App.tsx`)
- Main application → Representative sections: renders reps (evidence: `src/App.tsx`)
- Main application → Bill state and feeds: provides bill state (evidence: `src/App.tsx`)
- Main application → Member data: provides member state (evidence: `src/App.tsx`)
- Bill sections → Bill discovery: renders (evidence: `src/components/BillComponents/BillSection.tsx`)
- Bill sections → Bill state and feeds: reads state (evidence: `src/components/BillComponents/BillSection.tsx`)
- Bill discovery → Bill details: renders (evidence: `src/components/BillComponents/BillDiscover.tsx`)
- Bill discovery → Bill state and feeds: reads and updates (evidence: `src/components/BillComponents/BillDiscover.tsx`)
- Bill discovery → Request client: fetches bills (evidence: `src/components/BillComponents/BillDiscover.tsx`)
- Bill discovery → Bill facets: uses filters (evidence: `src/components/BillComponents/BillDiscover.tsx`)
- Bill state and feeds → Request client: loads bill data (evidence: `src/providers/BillProvider.tsx`)
- Bill state and feeds → Authentication state: personalizes requests (evidence: `src/providers/BillProvider.tsx`)
- Bill state and feeds → Bill facets: selects queries (evidence: `src/providers/BillProvider.tsx`)
- Bill details → Bill voting: renders (evidence: `src/components/BillComponents/BillCard.tsx`)
- Bill details → Constituent contact: renders (evidence: `src/components/BillComponents/BillCard.tsx`)
- Bill voting → Request client: records votes (evidence: `src/components/BillComponents/VoteButtons.tsx`)
- Bill voting → Vote control: renders (evidence: `src/components/BillComponents/VoteButtons.tsx`)
- Bill voting → Bill state and feeds: reads vote state (evidence: `src/components/BillComponents/VoteButtons.tsx`)
- Constituent contact → Request client: submits messages (evidence: `src/components/BillComponents/ComButton.tsx`)
- Constituent contact → Member data: uses representatives (evidence: `src/components/BillComponents/ComButton.tsx`)
- Constituent contact → Bill state and feeds: uses vote history (evidence: `src/components/BillComponents/ComButton.tsx`)
- Representative sections → Member data: reads members (evidence: `src/components/RepComponents/RepSection.tsx`)
- Representative sections → Representative profile: renders (evidence: `src/components/RepComponents/RepSection.tsx`)
- Member data → Request client: loads representatives (evidence: `src/providers/MemberProvider.tsx`)
- Member data → Authentication state: loads for user (evidence: `src/providers/MemberProvider.tsx`)
- Representative profile → Vote alignment: calculates alignment (evidence: `src/components/RepComponents/RepCard.tsx`)
- Representative profile → Campaign donors: renders donor view (evidence: `src/components/RepComponents/RepCard.tsx`)
- Vote alignment → Request client: fetches vote logs (evidence: `src/hooks/useAlignment.ts`)
- Vote alignment → Bill state and feeds: compares bill votes (evidence: `src/hooks/useAlignment.ts`)
- Vote alignment → Bill passage rules: infers disposition (evidence: `src/hooks/useAlignment.ts`)
- Request client → Application API: sends requests (evidence: `src/api.tsx`)
- Request client → Roll-call parsing: parses roll calls (evidence: `src/api.tsx`)
- Application API → Request client: returns data