# whiteboxhub/wbl-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/whiteboxhub/wbl-frontend
- Repository: https://github.com/whiteboxhub/wbl-frontend

## Overview

Whitebox Learning is a multi-area learning and talent platform. A candidate-facing AI-prep journey progresses from assessment discovery through device checks and a recorded session to processing and reports; the tree supports these distinct stages, though the sampled sources do not show their page-level wiring. The product also exposes training, resume-building, coding practice, and extensive recruiting and employee operations. Sampled service code confirms assessment API requests; other backend connections are not inferred.

Main entry points: [`app/avatar/page.tsx`](https://github.com/whiteboxhub/wbl-frontend/blob/main/app/avatar/page.tsx) (Operations portal), [`app/aiprep/session/[assessmentId]/page.tsx`](https://github.com/whiteboxhub/wbl-frontend/blob/main/app/aiprep/session/%5BassessmentId%5D/page.tsx) (Assessment session), [`app/aiprep/page.tsx`](https://github.com/whiteboxhub/wbl-frontend/blob/main/app/aiprep/page.tsx) (Prep dashboard), [`services/assessmentService.ts`](https://github.com/whiteboxhub/wbl-frontend/blob/main/services/assessmentService.ts) (Assessment service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_prep["AI Preparation"]
  node_prep_home["Prep dashboard<br/>[page.tsx]"]
  node_device_check["Device check<br/>[page.tsx]"]
  node_session["Assessment session<br/>[page.tsx]"]
  node_processing["Session processing<br/>[page.tsx]"]
  node_report["Assessment report<br/>[page.tsx]"]
  node_dashboard_report["Reports dashboard<br/>[page.tsx]"]
  node_assessment_ui["Assessment components"]
  node_media_capture["Recording and vision"]
  node_vision["Vision diagnostics"]
  node_chunk_upload["Chunked upload"]
  node_assessment_service["Assessment service"]
end

subgraph group_learning["Learning Products"]
  node_learning_home["Learning homepage<br/>[page.tsx]"]
  node_training["Training courses"]
  node_resume["Resume builder<br/>[page.tsx]"]
  node_coding["Coding practice<br/>[page.tsx]"]
end

subgraph group_talent["Talent Operations"]
  node_avatar_home["Operations portal<br/>[page.tsx]"]
  node_recruiting["Recruiting operations"]
  node_companies["Company records<br/>[page.tsx]"]
  node_workflow["Outreach workflows"]
  node_placements["Placement management"]
  node_employee_ops["Employee operations"]
end

subgraph group_shared["Shared Services"]
  node_auth["Authentication<br/>[route.ts]"]
  node_auth_context["Client auth state<br/>[AuthContext.js]"]
  node_api_client["API client<br/>[api.js]"]
  node_contact["Contact form<br/>[index.tsx]"]
end

node_candidate(("Candidate"))
node_backend{{"Application backend"}}

node_candidate -->|"opens prep"| node_prep_home
node_prep_home -->|"starts assessment"| node_device_check
node_device_check -->|"continues to session"| node_session
node_session -->|"submits recording"| node_processing
node_processing -->|"continues to report"| node_report
node_candidate -->|"opens reports"| node_dashboard_report
node_session -->|"uses recording"| node_media_capture
node_media_capture -->|"diagnoses video"| node_vision
node_session -->|"uploads chunks"| node_chunk_upload
node_prep_home -->|"renders assessments"| node_assessment_ui
node_dashboard_report -->|"requests assessments"| node_assessment_service
node_report -->|"requests report"| node_assessment_service
node_assessment_service -->|"calls"| node_api_client
node_api_client -->|"sends API requests"| node_backend
node_candidate -->|"visits"| node_learning_home
node_candidate -->|"takes courses"| node_training
node_candidate -->|"builds resume"| node_resume
node_candidate -->|"practices coding"| node_coding
node_candidate -->|"signs in"| node_auth
node_auth -->|"provides auth state"| node_auth_context
node_candidate -->|"uses portal"| node_avatar_home
node_avatar_home -->|"supports recruiting"| node_recruiting
node_avatar_home -->|"manages companies"| node_companies
node_avatar_home -->|"manages outreach"| node_workflow
node_avatar_home -->|"manages placements"| node_placements
node_avatar_home -->|"supports employees"| node_employee_ops
node_candidate -->|"sends inquiry"| node_contact
node_contact -->|"posts contact form"| node_backend

click node_prep_home "https://github.com/whiteboxhub/wbl-frontend/blob/main/app/aiprep/page.tsx"
click node_device_check "https://github.com/whiteboxhub/wbl-frontend/blob/main/app/aiprep/device-check/page.tsx"
click node_session "https://github.com/whiteboxhub/wbl-frontend/blob/main/app/aiprep/session/%5BassessmentId%5D/page.tsx"
click node_processing "https://github.com/whiteboxhub/wbl-frontend/blob/main/app/aiprep/session/%5BassessmentId%5D/processing/page.tsx"
click node_report "https://github.com/whiteboxhub/wbl-frontend/blob/main/app/aiprep/reports/%5BassessmentId%5D/page.tsx"
click node_dashboard_report "https://github.com/whiteboxhub/wbl-frontend/blob/main/app/aiprep/reports/dashboard/page.tsx"
click node_assessment_ui "https://github.com/whiteboxhub/wbl-frontend/tree/main/components/aiprep"
click node_media_capture "https://github.com/whiteboxhub/wbl-frontend/blob/main/hooks/useMediaRecorder.ts"
click node_vision "https://github.com/whiteboxhub/wbl-frontend/blob/main/hooks/useMediaPipeVision.ts"
click node_chunk_upload "https://github.com/whiteboxhub/wbl-frontend/blob/main/components/aiprep/ChunkedUploader.tsx"
click node_assessment_service "https://github.com/whiteboxhub/wbl-frontend/blob/main/services/assessmentService.ts"
click node_learning_home "https://github.com/whiteboxhub/wbl-frontend/blob/main/app/page.tsx"
click node_training "https://github.com/whiteboxhub/wbl-frontend/tree/main/app/avatar/training"
click node_resume "https://github.com/whiteboxhub/wbl-frontend/blob/main/app/resume/page.tsx"
click node_coding "https://github.com/whiteboxhub/wbl-frontend/blob/main/app/coderpad/page.tsx"
click node_avatar_home "https://github.com/whiteboxhub/wbl-frontend/blob/main/app/avatar/page.tsx"
click node_recruiting "https://github.com/whiteboxhub/wbl-frontend/tree/main/app/avatar/candidates"
click node_companies "https://github.com/whiteboxhub/wbl-frontend/blob/main/app/avatar/companies/page.tsx"
click node_workflow "https://github.com/whiteboxhub/wbl-frontend/tree/main/app/avatar/workflow"
click node_placements "https://github.com/whiteboxhub/wbl-frontend/tree/main/app/avatar/placements"
click node_employee_ops "https://github.com/whiteboxhub/wbl-frontend/tree/main/app/avatar/employee"
click node_auth "https://github.com/whiteboxhub/wbl-frontend/blob/main/app/api/auth/%5B...nextauth%5D/route.ts"
click node_auth_context "https://github.com/whiteboxhub/wbl-frontend/blob/main/utils/AuthContext.js"
click node_api_client "https://github.com/whiteboxhub/wbl-frontend/blob/main/lib/api.js"
click node_contact "https://github.com/whiteboxhub/wbl-frontend/blob/main/components/Contact/index.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_prep_home,node_device_check,node_session,node_processing,node_report,node_dashboard_report,node_assessment_ui,node_media_capture,node_vision,node_chunk_upload,node_assessment_service toneBlue
class node_learning_home,node_training,node_resume,node_coding toneAmber
class node_avatar_home,node_recruiting,node_companies,node_workflow,node_placements,node_employee_ops toneMint
class node_auth,node_auth_context,node_api_client,node_contact toneRose
class node_candidate,node_backend toneIndigo
```

## Components

### AI Preparation

- [Prep dashboard](https://github.com/whiteboxhub/wbl-frontend/blob/main/app/aiprep/page.tsx): `app/aiprep/page.tsx`
- [Device check](https://github.com/whiteboxhub/wbl-frontend/blob/main/app/aiprep/device-check/page.tsx): `app/aiprep/device-check/page.tsx`
- [Assessment session](https://github.com/whiteboxhub/wbl-frontend/blob/main/app/aiprep/session/%5BassessmentId%5D/page.tsx): `app/aiprep/session/[assessmentId]/page.tsx`
- [Session processing](https://github.com/whiteboxhub/wbl-frontend/blob/main/app/aiprep/session/%5BassessmentId%5D/processing/page.tsx): `app/aiprep/session/[assessmentId]/processing/page.tsx`
- [Assessment report](https://github.com/whiteboxhub/wbl-frontend/blob/main/app/aiprep/reports/%5BassessmentId%5D/page.tsx): `app/aiprep/reports/[assessmentId]/page.tsx`
- [Reports dashboard](https://github.com/whiteboxhub/wbl-frontend/blob/main/app/aiprep/reports/dashboard/page.tsx): `app/aiprep/reports/dashboard/page.tsx`
- [Assessment components](https://github.com/whiteboxhub/wbl-frontend/tree/main/components/aiprep): `components/aiprep`
- [Recording and vision](https://github.com/whiteboxhub/wbl-frontend/blob/main/hooks/useMediaRecorder.ts): `hooks/useMediaRecorder.ts`
- [Vision diagnostics](https://github.com/whiteboxhub/wbl-frontend/blob/main/hooks/useMediaPipeVision.ts): `hooks/useMediaPipeVision.ts`
- [Chunked upload](https://github.com/whiteboxhub/wbl-frontend/blob/main/components/aiprep/ChunkedUploader.tsx): `components/aiprep/ChunkedUploader.tsx`
- [Assessment service](https://github.com/whiteboxhub/wbl-frontend/blob/main/services/assessmentService.ts): `services/assessmentService.ts`

### Learning Products

- [Learning homepage](https://github.com/whiteboxhub/wbl-frontend/blob/main/app/page.tsx): `app/page.tsx`
- [Training courses](https://github.com/whiteboxhub/wbl-frontend/tree/main/app/avatar/training): `app/avatar/training`
- [Resume builder](https://github.com/whiteboxhub/wbl-frontend/blob/main/app/resume/page.tsx): `app/resume/page.tsx`
- [Coding practice](https://github.com/whiteboxhub/wbl-frontend/blob/main/app/coderpad/page.tsx): `app/coderpad/page.tsx`

### Talent Operations

- [Operations portal](https://github.com/whiteboxhub/wbl-frontend/blob/main/app/avatar/page.tsx): `app/avatar/page.tsx`
- [Recruiting operations](https://github.com/whiteboxhub/wbl-frontend/tree/main/app/avatar/candidates): `app/avatar/candidates`
- [Company records](https://github.com/whiteboxhub/wbl-frontend/blob/main/app/avatar/companies/page.tsx): `app/avatar/companies/page.tsx`
- [Outreach workflows](https://github.com/whiteboxhub/wbl-frontend/tree/main/app/avatar/workflow): `app/avatar/workflow`
- [Placement management](https://github.com/whiteboxhub/wbl-frontend/tree/main/app/avatar/placements): `app/avatar/placements`
- [Employee operations](https://github.com/whiteboxhub/wbl-frontend/tree/main/app/avatar/employee): `app/avatar/employee`

### Shared Services

- [Authentication](https://github.com/whiteboxhub/wbl-frontend/blob/main/app/api/auth/%5B...nextauth%5D/route.ts): `app/api/auth/[...nextauth]/route.ts`
- [Client auth state](https://github.com/whiteboxhub/wbl-frontend/blob/main/utils/AuthContext.js): `utils/AuthContext.js`
- [API client](https://github.com/whiteboxhub/wbl-frontend/blob/main/lib/api.js): `lib/api.js`
- [Contact form](https://github.com/whiteboxhub/wbl-frontend/blob/main/components/Contact/index.tsx): `components/Contact/index.tsx`

### Other components

- **Candidate**
- **Application backend**

## Connections

- Candidate → Prep dashboard: opens prep
- Prep dashboard → Device check: starts assessment
- Device check → Assessment session: continues to session
- Assessment session → Session processing: submits recording
- Session processing → Assessment report: continues to report
- Candidate → Reports dashboard: opens reports
- Assessment session → Recording and vision: uses recording
- Recording and vision → Vision diagnostics: diagnoses video
- Assessment session → Chunked upload: uploads chunks
- Prep dashboard → Assessment components: renders assessments
- Reports dashboard → Assessment service: requests assessments
- Assessment report → Assessment service: requests report
- Assessment service → API client: calls
- API client → Application backend: sends API requests
- Candidate → Learning homepage: visits
- Candidate → Training courses: takes courses
- Candidate → Resume builder: builds resume
- Candidate → Coding practice: practices coding
- Candidate → Authentication: signs in
- Authentication → Client auth state: provides auth state
- Candidate → Operations portal: uses portal
- Operations portal → Recruiting operations: supports recruiting
- Operations portal → Company records: manages companies
- Operations portal → Outreach workflows: manages outreach
- Operations portal → Placement management: manages placements
- Operations portal → Employee operations: supports employees
- Candidate → Contact form: sends inquiry
- Contact form → Application backend: posts contact form