# chrisanger59/abricot architecture

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

- Interactive diagram: https://gitdiagram.com/chrisanger59/abricot
- Repository: https://github.com/chrisanger59/abricot

## Overview

Abricot is a project-management web app. Users register or log in, then reach account and project views; they can update profile details and browse project teams and task counts. Server actions validate form input, manage the session token, and call the backend API; protected API requests attach that token. The tree also includes dashboard and project-detail routes, but the sampled evidence does not establish their behavior. Edges reflect sampled imports and calls; broader UI composition is supported by the source index, not inspected component bodies.

Main entry points: [`lib/actions/auth.ts`](https://github.com/chrisanger59/abricot/blob/main/lib/actions/auth.ts) (Auth actions), [`lib/api.ts`](https://github.com/chrisanger59/abricot/blob/main/lib/api.ts) (Protected API client), [`app/(auth)/login/page.tsx`](https://github.com/chrisanger59/abricot/blob/main/app/(auth)/login/page.tsx) (Auth pages), [`components/Organisms/ProjectList.tsx`](https://github.com/chrisanger59/abricot/blob/main/components/Organisms/ProjectList.tsx) (Project list)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routes["App routes"]
  node_auth_routes["Auth pages<br/>[page.tsx]"]
  node_account_route["Account page<br/>[page.tsx]"]
  node_dashboard_route["Dashboard page<br/>[page.tsx]"]
  node_projects_route["Projects page<br/>[page.tsx]"]
  node_project_detail["Project detail<br/>[page.tsx]"]
  node_main_layout["Main layout<br/>[layout.tsx]"]
end

subgraph group_ui["Interface components"]
  node_auth_illustration["Auth illustration"]
  node_login_form["Login form<br/>[LoginForm.tsx]"]
  node_register_form["Registration form<br/>[RegisterForm.tsx]"]
  node_header["Header<br/>[Header.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_project_list["Project list<br/>[ProjectList.tsx]"]
  node_project_card["Project card<br/>[ProjectCard.tsx]"]
  node_avatar["Avatar<br/>[Avatar.tsx]"]
  node_update_form["Profile form<br/>[UpdateUserForm.tsx]"]
  node_account_info["Account info<br/>[AccountInfo.tsx]"]
end

subgraph group_auth["Authentication and profile"]
  node_auth_actions["Auth actions<br/>[auth.ts]"]
  node_session["Session cookie<br/>[session.ts]"]
  node_proxy["Session proxy<br/>[proxy.ts]"]
  node_validation["Form validation<br/>[validation.ts]"]
end

subgraph group_backend["API and data"]
  node_user_data["User data<br/>[user.ts]"]
  node_api_client["Protected API client<br/>[api.ts]"]
  node_api_types["API data types<br/>[api.ts]"]
end

node_visitor(("Visitor"))
node_backend_api{{"Backend API"}}

node_visitor -->|"opens"| node_auth_routes
node_auth_routes -->|"renders"| node_login_form
node_auth_routes -->|"renders"| node_register_form
node_auth_routes -->|"renders"| node_auth_illustration
node_login_form -->|"submits to"| node_auth_actions
node_register_form -->|"submits to"| node_auth_actions
node_auth_actions -->|"validates with"| node_validation
node_auth_actions -->|"creates or deletes"| node_session
node_auth_actions -->|"calls auth routes"| node_backend_api
node_auth_actions -->|"uses for protected updates"| node_api_client
node_auth_actions -->|"redirects to"| node_account_route
node_account_route -->|"renders"| node_account_info
node_account_info -->|"reads"| node_user_data
node_account_info -->|"renders"| node_update_form
node_update_form -->|"submits to"| node_auth_actions
node_projects_route -->|"renders"| node_project_list
node_project_list -->|"loads projects"| node_api_client
node_project_list -->|"renders"| node_project_card
node_project_card -->|"renders team avatars"| node_avatar
node_api_client -->|"reads token"| node_session
node_api_client -->|"sends authenticated requests"| node_backend_api
node_user_data -->|"requests user data"| node_api_client
node_proxy -.->|"uses session helpers"| node_session
node_main_layout -->|"renders"| node_header
node_main_layout -->|"renders"| node_footer
node_header -->|"uses user data"| node_user_data
node_auth_actions -->|"uses response types"| node_api_types
node_api_client -->|"types responses"| node_api_types
node_project_card -->|"uses project type"| node_api_types

click node_auth_routes "https://github.com/chrisanger59/abricot/blob/main/app/(auth)/login/page.tsx"
click node_account_route "https://github.com/chrisanger59/abricot/blob/main/app/(main)/account/page.tsx"
click node_dashboard_route "https://github.com/chrisanger59/abricot/blob/main/app/(main)/dashboard/page.tsx"
click node_projects_route "https://github.com/chrisanger59/abricot/blob/main/app/(main)/projects/page.tsx"
click node_project_detail "https://github.com/chrisanger59/abricot/blob/main/app/(main)/projects/%5Bid%5D/page.tsx"
click node_main_layout "https://github.com/chrisanger59/abricot/blob/main/app/(main)/layout.tsx"
click node_auth_illustration "https://github.com/chrisanger59/abricot/blob/main/components/Atoms/AuthIllustration.tsx"
click node_login_form "https://github.com/chrisanger59/abricot/blob/main/components/Organisms/LoginForm.tsx"
click node_register_form "https://github.com/chrisanger59/abricot/blob/main/components/Organisms/RegisterForm.tsx"
click node_header "https://github.com/chrisanger59/abricot/blob/main/components/Organisms/Header.tsx"
click node_footer "https://github.com/chrisanger59/abricot/blob/main/components/Organisms/Footer.tsx"
click node_project_list "https://github.com/chrisanger59/abricot/blob/main/components/Organisms/ProjectList.tsx"
click node_project_card "https://github.com/chrisanger59/abricot/blob/main/components/Molecules/ProjectCard.tsx"
click node_avatar "https://github.com/chrisanger59/abricot/blob/main/components/Atoms/Avatar.tsx"
click node_update_form "https://github.com/chrisanger59/abricot/blob/main/components/Organisms/UpdateUserForm.tsx"
click node_account_info "https://github.com/chrisanger59/abricot/blob/main/components/Organisms/AccountInfo.tsx"
click node_auth_actions "https://github.com/chrisanger59/abricot/blob/main/lib/actions/auth.ts"
click node_session "https://github.com/chrisanger59/abricot/blob/main/lib/session.ts"
click node_proxy "https://github.com/chrisanger59/abricot/blob/main/proxy.ts"
click node_validation "https://github.com/chrisanger59/abricot/blob/main/lib/validation.ts"
click node_user_data "https://github.com/chrisanger59/abricot/blob/main/lib/user.ts"
click node_api_client "https://github.com/chrisanger59/abricot/blob/main/lib/api.ts"
click node_api_types "https://github.com/chrisanger59/abricot/blob/main/types/api.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_auth_routes,node_account_route,node_dashboard_route,node_projects_route,node_project_detail,node_main_layout toneBlue
class node_auth_illustration,node_login_form,node_register_form,node_header,node_footer,node_project_list,node_project_card,node_avatar,node_update_form,node_account_info toneAmber
class node_auth_actions,node_session,node_proxy,node_validation,node_backend_api toneMint
class node_user_data,node_api_client,node_api_types toneRose
class node_visitor toneIndigo
```

## Components

### App routes

- [Auth pages](https://github.com/chrisanger59/abricot/blob/main/app/(auth)/login/page.tsx): `app/(auth)/login/page.tsx`
- [Account page](https://github.com/chrisanger59/abricot/blob/main/app/(main)/account/page.tsx): `app/(main)/account/page.tsx`
- [Dashboard page](https://github.com/chrisanger59/abricot/blob/main/app/(main)/dashboard/page.tsx): `app/(main)/dashboard/page.tsx`
- [Projects page](https://github.com/chrisanger59/abricot/blob/main/app/(main)/projects/page.tsx): `app/(main)/projects/page.tsx`
- [Project detail](https://github.com/chrisanger59/abricot/blob/main/app/(main)/projects/%5Bid%5D/page.tsx): `app/(main)/projects/[id]/page.tsx`
- [Main layout](https://github.com/chrisanger59/abricot/blob/main/app/(main)/layout.tsx): `app/(main)/layout.tsx`

### Interface components

- [Auth illustration](https://github.com/chrisanger59/abricot/blob/main/components/Atoms/AuthIllustration.tsx): `components/Atoms/AuthIllustration.tsx`
- [Login form](https://github.com/chrisanger59/abricot/blob/main/components/Organisms/LoginForm.tsx): `components/Organisms/LoginForm.tsx`
- [Registration form](https://github.com/chrisanger59/abricot/blob/main/components/Organisms/RegisterForm.tsx): `components/Organisms/RegisterForm.tsx`
- [Header](https://github.com/chrisanger59/abricot/blob/main/components/Organisms/Header.tsx): `components/Organisms/Header.tsx`
- [Footer](https://github.com/chrisanger59/abricot/blob/main/components/Organisms/Footer.tsx): `components/Organisms/Footer.tsx`
- [Project list](https://github.com/chrisanger59/abricot/blob/main/components/Organisms/ProjectList.tsx): `components/Organisms/ProjectList.tsx`
- [Project card](https://github.com/chrisanger59/abricot/blob/main/components/Molecules/ProjectCard.tsx): `components/Molecules/ProjectCard.tsx`
- [Avatar](https://github.com/chrisanger59/abricot/blob/main/components/Atoms/Avatar.tsx): `components/Atoms/Avatar.tsx`
- [Profile form](https://github.com/chrisanger59/abricot/blob/main/components/Organisms/UpdateUserForm.tsx): `components/Organisms/UpdateUserForm.tsx`
- [Account info](https://github.com/chrisanger59/abricot/blob/main/components/Organisms/AccountInfo.tsx): `components/Organisms/AccountInfo.tsx`

### Authentication and profile

- [Auth actions](https://github.com/chrisanger59/abricot/blob/main/lib/actions/auth.ts): `lib/actions/auth.ts`
- [Session cookie](https://github.com/chrisanger59/abricot/blob/main/lib/session.ts): `lib/session.ts`
- [Session proxy](https://github.com/chrisanger59/abricot/blob/main/proxy.ts): `proxy.ts`
- [Form validation](https://github.com/chrisanger59/abricot/blob/main/lib/validation.ts): `lib/validation.ts`

### API and data

- [User data](https://github.com/chrisanger59/abricot/blob/main/lib/user.ts): `lib/user.ts`
- [Protected API client](https://github.com/chrisanger59/abricot/blob/main/lib/api.ts): `lib/api.ts`
- [API data types](https://github.com/chrisanger59/abricot/blob/main/types/api.ts): `types/api.ts`

### Other components

- **Visitor**
- **Backend API**

## Connections

- Visitor → Auth pages: opens
- Auth pages → Login form: renders (evidence: `app/(auth)/login/page.tsx`)
- Auth pages → Registration form: renders
- Auth pages → Auth illustration: renders
- Login form → Auth actions: submits to (evidence: `components/Organisms/LoginForm.tsx`)
- Registration form → Auth actions: submits to (evidence: `components/Organisms/RegisterForm.tsx`)
- Auth actions → Form validation: validates with (evidence: `lib/actions/auth.ts`)
- Auth actions → Session cookie: creates or deletes (evidence: `lib/actions/auth.ts`)
- Auth actions → Backend API: calls auth routes (evidence: `lib/actions/auth.ts`)
- Auth actions → Protected API client: uses for protected updates (evidence: `lib/actions/auth.ts`)
- Auth actions → Account page: redirects to (evidence: `lib/actions/auth.ts`)
- Account page → Account info: renders (evidence: `app/(main)/account/page.tsx`)
- Account info → User data: reads (evidence: `components/Organisms/AccountInfo.tsx`)
- Account info → Profile form: renders (evidence: `components/Organisms/AccountInfo.tsx`)
- Profile form → Auth actions: submits to (evidence: `components/Organisms/UpdateUserForm.tsx`)
- Projects page → Project list: renders (evidence: `app/(main)/projects/page.tsx`)
- Project list → Protected API client: loads projects (evidence: `components/Organisms/ProjectList.tsx`)
- Project list → Project card: renders (evidence: `components/Organisms/ProjectList.tsx`)
- Project card → Avatar: renders team avatars (evidence: `components/Molecules/ProjectCard.tsx`)
- Protected API client → Session cookie: reads token (evidence: `lib/api.ts`)
- Protected API client → Backend API: sends authenticated requests (evidence: `lib/api.ts`)
- User data → Protected API client: requests user data (evidence: `lib/user.ts`)
- Session proxy → Session cookie: uses session helpers (evidence: `proxy.ts`)
- Main layout → Header: renders (evidence: `app/(main)/layout.tsx`)
- Main layout → Footer: renders (evidence: `app/(main)/layout.tsx`)
- Header → User data: uses user data (evidence: `components/Organisms/Header.tsx`)
- Auth actions → API data types: uses response types (evidence: `lib/actions/auth.ts`)
- Protected API client → API data types: types responses (evidence: `lib/api.ts`)
- Project card → API data types: uses project type (evidence: `components/Molecules/ProjectCard.tsx`)