# nitinsirsath/career-companion-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/nitinsirsath/career-companion-frontend
- Repository: https://github.com/nitinsirsath/career-companion-frontend

## Overview

Career Companion is a browser frontend for tracking job applications and the email-derived events and actions associated with them. Users enter through authentication, then use the dashboard to review pending actions and resolve ambiguous or unmatched emails, or manage applications and inspect their histories. A Gmail sync screen exposes mail connection and synchronization controls. The API client and shared contracts form the internal boundary to the backend. Several route implementations were not sampled, so their detailed interactions are shown only where supported by the API surface and repository tree.

Main entry points: [`src/api/client.ts`](https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/api/client.ts) (API client), [`src/routes/__root.tsx`](https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/routes/__root.tsx) (Root route), [`src/main.tsx`](https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/main.tsx) (Frontend bootstrap), [`src/api/auth.ts`](https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/api/auth.ts) (Authentication helpers)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App shell"]
  node_frontend["Frontend bootstrap<br/>[main.tsx]"]
  node_auth["Authentication helpers<br/>[auth.ts]"]
  node_root["Root route<br/>[__root.tsx]"]
  node_theme["Theme provider<br/>[ThemeProvider.tsx]"]
  node_login["Login screen<br/>[login.tsx]"]
end

subgraph group_applications["Application tracking"]
  node_applications["Application list<br/>[applications.tsx]"]
  node_detail["Application detail"]
end

subgraph group_email["Email and actions"]
  node_dashboard["Dashboard and action queue<br/>[index.tsx]"]
  node_emailreview["Email match review<br/>[index.tsx]"]
end

subgraph group_gmail["Gmail integration"]
  node_gmail["Gmail sync screen<br/>[gmail.tsx]"]
end

subgraph group_boundary["API boundary"]
  node_client["API client<br/>[client.ts]"]
  node_contracts["Shared data contracts"]
end

node_user(("Career Companion user"))
node_backend["Career Companion backend"]

node_user -->|"opens app"| node_frontend
node_frontend -->|"checks session"| node_auth
node_frontend -->|"mounts router"| node_root
node_frontend -->|"provides theme"| node_theme
node_root -->|"routes to"| node_login
node_root -->|"routes to"| node_dashboard
node_root -->|"routes to"| node_applications
node_root -->|"routes to"| node_detail
node_root -->|"routes to"| node_gmail
node_dashboard -->|"loads data"| node_client
node_emailreview -->|"loads and resolves"| node_client
node_applications -->|"lists and creates"| node_client
node_detail -->|"loads and updates"| node_client
node_gmail -->|"uses Gmail API"| node_client
node_auth -->|"checks session"| node_backend
node_auth -->|"logs out"| node_client
node_client -->|"sends requests"| node_backend
node_client -->|"uses types"| node_contracts
node_applications -->|"validates input"| node_contracts

click node_frontend "https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/main.tsx"
click node_auth "https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/api/auth.ts"
click node_root "https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/routes/__root.tsx"
click node_theme "https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/components/ThemeProvider.tsx"
click node_login "https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/routes/login.tsx"
click node_dashboard "https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/routes/index.tsx"
click node_applications "https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/routes/applications.tsx"
click node_detail "https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/routes/applications.%24id.tsx"
click node_emailreview "https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/routes/index.tsx"
click node_gmail "https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/routes/gmail.tsx"
click node_client "https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/api/client.ts"
click node_contracts "https://github.com/nitinsirsath/career-companion-frontend/tree/main/src/contracts"

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_frontend,node_auth,node_root,node_theme,node_login,node_user toneBlue
class node_applications,node_detail toneAmber
class node_dashboard,node_emailreview toneMint
class node_gmail toneRose
class node_client,node_contracts,node_backend toneIndigo
```

## Components

### App shell

- [Frontend bootstrap](https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/main.tsx): `src/main.tsx`
- [Authentication helpers](https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/api/auth.ts): `src/api/auth.ts`
- [Root route](https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/routes/__root.tsx): `src/routes/__root.tsx`
- [Theme provider](https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/components/ThemeProvider.tsx): `src/components/ThemeProvider.tsx`
- [Login screen](https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/routes/login.tsx): `src/routes/login.tsx`

### Application tracking

- [Application list](https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/routes/applications.tsx): `src/routes/applications.tsx`
- [Application detail](https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/routes/applications.%24id.tsx): `src/routes/applications.$id.tsx`

### Email and actions

- [Dashboard and action queue](https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/routes/index.tsx): `src/routes/index.tsx`
- [Email match review](https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/routes/index.tsx): `src/routes/index.tsx`

### Gmail integration

- [Gmail sync screen](https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/routes/gmail.tsx): `src/routes/gmail.tsx`

### API boundary

- [API client](https://github.com/nitinsirsath/career-companion-frontend/blob/main/src/api/client.ts): `src/api/client.ts`
- [Shared data contracts](https://github.com/nitinsirsath/career-companion-frontend/tree/main/src/contracts): `src/contracts`

### Other components

- **Career Companion user**
- **Career Companion backend**

## Connections

- Career Companion user → Frontend bootstrap: opens app
- Frontend bootstrap → Authentication helpers: checks session
- Frontend bootstrap → Root route: mounts router
- Frontend bootstrap → Theme provider: provides theme
- Root route → Login screen: routes to
- Root route → Dashboard and action queue: routes to
- Root route → Application list: routes to
- Root route → Application detail: routes to
- Root route → Gmail sync screen: routes to
- Dashboard and action queue → API client: loads data
- Email match review → API client: loads and resolves
- Application list → API client: lists and creates
- Application detail → API client: loads and updates
- Gmail sync screen → API client: uses Gmail API
- Authentication helpers → Career Companion backend: checks session
- Authentication helpers → API client: logs out
- API client → Career Companion backend: sends requests
- API client → Shared data contracts: uses types
- Application list → Shared data contracts: validates input