# warmarth/folio_frontend architecture

> Architecture diagram of the GitHub repository warmarth/folio_frontend, 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/warmarth/folio_frontend
- Repository: https://github.com/warmarth/folio_frontend

## Overview

Folio is a Next.js frontend for a developer-learning platform; its business logic and persistence live in a separate backend API. Learners register or sign in, build a profile, browse exercises and submit work, and discover mentors. Mentors create exercises and review submissions. The graph preserves the documented project, progress, code-review, settings, and mentorship areas; several of those routes were not sampled, so their internal API wiring is not asserted.

Main entry points: [`app/me/page.tsx`](https://github.com/warmarth/folio_frontend/blob/main/app/me/page.tsx) (Profile management), [`app/register/page.tsx`](https://github.com/warmarth/folio_frontend/blob/main/app/register/page.tsx) (Registration), [`app/login/page.tsx`](https://github.com/warmarth/folio_frontend/blob/main/app/login/page.tsx) (Sign in), [`app/dashboard/exercises/[id]/page.tsx`](https://github.com/warmarth/folio_frontend/blob/main/app/dashboard/exercises/%5Bid%5D/page.tsx) (Exercise detail)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public access"]
  node_landing["Landing page<br/>[page.tsx]"]
end

subgraph group_identity["Identity and profile"]
  node_register["Registration<br/>[page.tsx]"]
  node_login["Sign in<br/>[page.tsx]"]
  node_profile["Profile management<br/>[page.tsx]"]
  node_profile_form["Profile form<br/>[createProfile.tsx]"]
end

subgraph group_learner["Learner workflows"]
  node_learner_dash["Learner dashboard<br/>[page.tsx]"]
  node_exercise_catalog["Exercise catalog<br/>[page.tsx]"]
  node_exercise_detail["Exercise detail<br/>[page.tsx]"]
  node_exercise_submit["Exercise submission<br/>[submitExercise.tsx]"]
  node_learner_extensions["Learner tools"]
  node_mentor_discovery["Mentor discovery<br/>[page.tsx]"]
  node_mentor_detail["Mentor details<br/>[page.tsx]"]
end

subgraph group_mentor["Mentor workflows"]
  node_mentor_dash["Mentor dashboard<br/>[page.tsx]"]
  node_exercise_create["Exercise creation"]
  node_mentor_exercises["Exercise management<br/>[page.tsx]"]
  node_submission_review["Submission review<br/>[page.tsx]"]
  node_mentor_learner_tools["Learner and performance tools"]
  node_mentor_layout["Mentor navigation<br/>[layout.tsx]"]
end

subgraph group_integration["API integration"]
  node_mentor_api["Mentor API client<br/>[mentors.ts]"]
end

node_visitor(("Visitor"))
node_backend{{"Folio backend API"}}

node_visitor -->|"opens"| node_landing
node_visitor -->|"creates account"| node_register
node_visitor -->|"signs in"| node_login
node_register -->|"registers"| node_backend
node_login -->|"authenticates"| node_backend
node_visitor -->|"manages profile"| node_profile
node_profile -->|"renders"| node_profile_form
node_profile -->|"uploads and saves"| node_backend
node_visitor -->|"uses dashboard"| node_learner_dash
node_visitor -->|"browses"| node_exercise_catalog
node_visitor -->|"opens exercise"| node_exercise_detail
node_exercise_detail -->|"renders submission"| node_exercise_submit
node_exercise_submit -->|"submits work"| node_backend
node_visitor -->|"uses tools"| node_learner_extensions
node_visitor -->|"finds mentor"| node_mentor_discovery
node_mentor_discovery -->|"loads mentors"| node_mentor_api
node_visitor -->|"views details"| node_mentor_detail
node_mentor_api -->|"requests data"| node_backend
node_visitor -->|"opens dashboard"| node_mentor_dash
node_mentor_dash -->|"loads exercises and submissions"| node_backend
node_visitor -->|"creates exercise"| node_exercise_create
node_exercise_create -->|"creates exercise"| node_backend
node_visitor -->|"manages exercises"| node_mentor_exercises
node_visitor -->|"reviews work"| node_submission_review
node_visitor -->|"uses mentor tools"| node_mentor_learner_tools
node_mentor_layout -->|"loads mentees"| node_backend

click node_landing "https://github.com/warmarth/folio_frontend/blob/main/app/page.tsx"
click node_register "https://github.com/warmarth/folio_frontend/blob/main/app/register/page.tsx"
click node_login "https://github.com/warmarth/folio_frontend/blob/main/app/login/page.tsx"
click node_profile "https://github.com/warmarth/folio_frontend/blob/main/app/me/page.tsx"
click node_profile_form "https://github.com/warmarth/folio_frontend/blob/main/app/components/createProfile.tsx"
click node_learner_dash "https://github.com/warmarth/folio_frontend/blob/main/app/dashboard/page.tsx"
click node_exercise_catalog "https://github.com/warmarth/folio_frontend/blob/main/app/dashboard/exercises/page.tsx"
click node_exercise_detail "https://github.com/warmarth/folio_frontend/blob/main/app/dashboard/exercises/%5Bid%5D/page.tsx"
click node_exercise_submit "https://github.com/warmarth/folio_frontend/blob/main/app/components/submitExercise.tsx"
click node_learner_extensions "https://github.com/warmarth/folio_frontend/tree/main/app/dashboard"
click node_mentor_discovery "https://github.com/warmarth/folio_frontend/blob/main/app/dashboard/mentorship/page.tsx"
click node_mentor_detail "https://github.com/warmarth/folio_frontend/blob/main/app/dashboard/mentorship/%5Bid%5D/page.tsx"
click node_mentor_dash "https://github.com/warmarth/folio_frontend/blob/main/app/mentor/dashboard/page.tsx"
click node_exercise_create "https://github.com/warmarth/folio_frontend/blob/main/app/mentor/components/CreateExerciseForm.tsx"
click node_mentor_exercises "https://github.com/warmarth/folio_frontend/blob/main/app/mentor/exercises/page.tsx"
click node_submission_review "https://github.com/warmarth/folio_frontend/blob/main/app/mentor/submissions/page.tsx"
click node_mentor_learner_tools "https://github.com/warmarth/folio_frontend/tree/main/app/mentor"
click node_mentor_layout "https://github.com/warmarth/folio_frontend/blob/main/app/mentor/layout.tsx"
click node_mentor_api "https://github.com/warmarth/folio_frontend/blob/main/lib/api/mentors.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_landing toneBlue
class node_register,node_login,node_profile,node_profile_form toneAmber
class node_learner_dash,node_exercise_catalog,node_exercise_detail,node_exercise_submit,node_learner_extensions,node_mentor_discovery,node_mentor_detail,node_backend toneMint
class node_mentor_dash,node_exercise_create,node_mentor_exercises,node_submission_review,node_mentor_learner_tools,node_mentor_layout toneRose
class node_mentor_api,node_visitor toneIndigo
```

## Components

### Public access

- [Landing page](https://github.com/warmarth/folio_frontend/blob/main/app/page.tsx): `app/page.tsx`

### Identity and profile

- [Registration](https://github.com/warmarth/folio_frontend/blob/main/app/register/page.tsx): `app/register/page.tsx`
- [Sign in](https://github.com/warmarth/folio_frontend/blob/main/app/login/page.tsx): `app/login/page.tsx`
- [Profile management](https://github.com/warmarth/folio_frontend/blob/main/app/me/page.tsx): `app/me/page.tsx`
- [Profile form](https://github.com/warmarth/folio_frontend/blob/main/app/components/createProfile.tsx): `app/components/createProfile.tsx`

### Learner workflows

- [Learner dashboard](https://github.com/warmarth/folio_frontend/blob/main/app/dashboard/page.tsx): `app/dashboard/page.tsx`
- [Exercise catalog](https://github.com/warmarth/folio_frontend/blob/main/app/dashboard/exercises/page.tsx): `app/dashboard/exercises/page.tsx`
- [Exercise detail](https://github.com/warmarth/folio_frontend/blob/main/app/dashboard/exercises/%5Bid%5D/page.tsx): `app/dashboard/exercises/[id]/page.tsx`
- [Exercise submission](https://github.com/warmarth/folio_frontend/blob/main/app/components/submitExercise.tsx): `app/components/submitExercise.tsx`
- [Learner tools](https://github.com/warmarth/folio_frontend/tree/main/app/dashboard): `app/dashboard`
- [Mentor discovery](https://github.com/warmarth/folio_frontend/blob/main/app/dashboard/mentorship/page.tsx): `app/dashboard/mentorship/page.tsx`
- [Mentor details](https://github.com/warmarth/folio_frontend/blob/main/app/dashboard/mentorship/%5Bid%5D/page.tsx): `app/dashboard/mentorship/[id]/page.tsx`

### Mentor workflows

- [Mentor dashboard](https://github.com/warmarth/folio_frontend/blob/main/app/mentor/dashboard/page.tsx): `app/mentor/dashboard/page.tsx`
- [Exercise creation](https://github.com/warmarth/folio_frontend/blob/main/app/mentor/components/CreateExerciseForm.tsx): `app/mentor/components/CreateExerciseForm.tsx`
- [Exercise management](https://github.com/warmarth/folio_frontend/blob/main/app/mentor/exercises/page.tsx): `app/mentor/exercises/page.tsx`
- [Submission review](https://github.com/warmarth/folio_frontend/blob/main/app/mentor/submissions/page.tsx): `app/mentor/submissions/page.tsx`
- [Learner and performance tools](https://github.com/warmarth/folio_frontend/tree/main/app/mentor): `app/mentor`
- [Mentor navigation](https://github.com/warmarth/folio_frontend/blob/main/app/mentor/layout.tsx): `app/mentor/layout.tsx`

### API integration

- [Mentor API client](https://github.com/warmarth/folio_frontend/blob/main/lib/api/mentors.ts): `lib/api/mentors.ts`

### Other components

- **Visitor**
- **Folio backend API**

## Connections

- Visitor → Landing page: opens
- Visitor → Registration: creates account
- Visitor → Sign in: signs in
- Registration → Folio backend API: registers
- Sign in → Folio backend API: authenticates
- Visitor → Profile management: manages profile
- Profile management → Profile form: renders
- Profile management → Folio backend API: uploads and saves
- Visitor → Learner dashboard: uses dashboard
- Visitor → Exercise catalog: browses
- Visitor → Exercise detail: opens exercise
- Exercise detail → Exercise submission: renders submission
- Exercise submission → Folio backend API: submits work
- Visitor → Learner tools: uses tools
- Visitor → Mentor discovery: finds mentor
- Mentor discovery → Mentor API client: loads mentors
- Visitor → Mentor details: views details
- Mentor API client → Folio backend API: requests data
- Visitor → Mentor dashboard: opens dashboard
- Mentor dashboard → Folio backend API: loads exercises and submissions
- Visitor → Exercise creation: creates exercise
- Exercise creation → Folio backend API: creates exercise
- Visitor → Exercise management: manages exercises
- Visitor → Submission review: reviews work
- Visitor → Learner and performance tools: uses mentor tools
- Mentor navigation → Folio backend API: loads mentees