# phyothukha/learnflow-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/phyothukha/learnflow-frontend
- Repository: https://github.com/phyothukha/learnflow-frontend

## Overview

Learnflow is a learning-workspace web application with topic-scoped notes and library content, study timelines, dashboards, and admin management for courses and enrollments. The main runtime pattern is a user working through the Next.js UI and API routes, which authenticate requests and proxy data to a backend service; the sampled routes show this directly for documents, enrollments, and study blocks. The graph also retains the documented topic-context workflow and major unsampled product areas. Evidence is limited to the README, source index, and excerpts; unverified UI-to-API links are omitted.

Main entry points: [`src/app/api/study-blocks/route.ts`](https://github.com/phyothukha/learnflow-frontend/blob/main/src/app/api/study-blocks/route.ts) (Study-block API), [`src/lib/axios.ts`](https://github.com/phyothukha/learnflow-frontend/blob/main/src/lib/axios.ts) (HTTP clients), [`src/app/api/enrollments/route.ts`](https://github.com/phyothukha/learnflow-frontend/blob/main/src/app/api/enrollments/route.ts) (Enrollment API), [`src/lib/auth.ts`](https://github.com/phyothukha/learnflow-frontend/blob/main/src/lib/auth.ts) (Authentication)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workspace["Workspace UI"]
  node_shell["Workspace shell<br/>[main-layout.tsx]"]
  node_header["Workspace header<br/>[header.tsx]"]
  node_topic_switch["Topic context"]
  node_library["Document library"]
  node_notes["Notes workspace"]
  node_timeline["Study timeline<br/>[page.tsx]"]
  node_dashboard["Learning dashboard"]
  node_ui_primitives["UI primitives"]
  node_confirm_hook["Confirmation hook"]
end

subgraph group_admin["Admin tools"]
  node_courses["Course management"]
  node_enrollments["Enrollment management"]
end

subgraph group_access["Access and API"]
  node_auth["Authentication<br/>[auth.ts]"]
  node_api_docs["Document API"]
  node_api_enroll["Enrollment API<br/>[route.ts]"]
  node_api_study["Study-block API<br/>[route.ts]"]
  node_api_courses["Course API<br/>[route.ts]"]
  node_api_notes["Notes API<br/>[route.ts]"]
  node_api_topics["Topics API<br/>[route.ts]"]
  node_api_folders["Topic-folder API"]
  node_api_tags["Tags API<br/>[route.ts]"]
end

subgraph group_data["Client and query state"]
  node_client_state["Client workspace state<br/>[use-store.ts]"]
  node_topic_queries["Topic queries<br/>[queries.ts]"]
  node_query_builder["Query builder<br/>[query.ts]"]
  node_http_clients["HTTP clients<br/>[axios.ts]"]
end

node_user(("Workspace user"))
node_backend["Backend service"]

node_user -.->|"uses"| node_shell
node_shell -.->|"hosts"| node_header
node_header -->|"renders"| node_topic_switch
node_topic_switch -->|"fetches topics"| node_topic_queries
node_topic_switch -->|"updates context"| node_client_state
node_header -->|"loads breadcrumbs"| node_topic_queries
node_header -->|"requests logout confirmation"| node_confirm_hook
node_topic_queries -->|"uses"| node_http_clients
node_api_study -->|"checks session"| node_auth
node_api_study -->|"builds query"| node_query_builder
node_api_study -->|"requests data"| node_http_clients
node_api_study -->|"proxies requests"| node_backend
node_api_docs -->|"checks session"| node_auth
node_api_docs -->|"requests data"| node_http_clients
node_api_docs -->|"proxies requests"| node_backend
node_api_enroll -->|"checks session"| node_auth
node_api_enroll -->|"builds query"| node_query_builder
node_api_enroll -->|"requests data"| node_http_clients
node_api_enroll -->|"proxies requests"| node_backend
node_auth -->|"authenticates via"| node_http_clients
node_auth -->|"submits credentials"| node_backend
node_http_clients -->|"targets service"| node_backend
node_api_courses -.->|"proxies requests"| node_backend
node_api_notes -.->|"proxies requests"| node_backend
node_api_topics -.->|"proxies requests"| node_backend
node_api_folders -.->|"proxies requests"| node_backend
node_api_tags -.->|"proxies requests"| node_backend
node_courses -.->|"manages via"| node_api_courses
node_enrollments -.->|"manages via"| node_api_enroll
node_library -.->|"works with"| node_api_docs
node_notes -.->|"works with"| node_api_notes
node_timeline -.->|"works with"| node_api_study
node_dashboard -.->|"uses activity data"| node_api_study

click node_shell "https://github.com/phyothukha/learnflow-frontend/blob/main/src/layout/main-layout.tsx"
click node_header "https://github.com/phyothukha/learnflow-frontend/blob/main/src/layout/header.tsx"
click node_topic_switch "https://github.com/phyothukha/learnflow-frontend/blob/main/src/components/topic-context-switcher.tsx"
click node_library "https://github.com/phyothukha/learnflow-frontend/tree/main/src/app/(admin)/library"
click node_notes "https://github.com/phyothukha/learnflow-frontend/tree/main/src/app/(admin)/notes"
click node_timeline "https://github.com/phyothukha/learnflow-frontend/blob/main/src/app/(admin)/timeline/page.tsx"
click node_dashboard "https://github.com/phyothukha/learnflow-frontend/tree/main/src/app/(admin)/dashboard"
click node_courses "https://github.com/phyothukha/learnflow-frontend/tree/main/src/app/(admin)/courses"
click node_enrollments "https://github.com/phyothukha/learnflow-frontend/tree/main/src/app/(admin)/enrollments"
click node_auth "https://github.com/phyothukha/learnflow-frontend/blob/main/src/lib/auth.ts"
click node_api_docs "https://github.com/phyothukha/learnflow-frontend/tree/main/src/app/api/documents"
click node_api_enroll "https://github.com/phyothukha/learnflow-frontend/blob/main/src/app/api/enrollments/route.ts"
click node_api_study "https://github.com/phyothukha/learnflow-frontend/blob/main/src/app/api/study-blocks/route.ts"
click node_api_courses "https://github.com/phyothukha/learnflow-frontend/blob/main/src/app/api/courses/route.ts"
click node_api_notes "https://github.com/phyothukha/learnflow-frontend/blob/main/src/app/api/notes/route.ts"
click node_api_topics "https://github.com/phyothukha/learnflow-frontend/blob/main/src/app/api/topics/route.ts"
click node_api_folders "https://github.com/phyothukha/learnflow-frontend/tree/main/src/app/api/topic-folders"
click node_api_tags "https://github.com/phyothukha/learnflow-frontend/blob/main/src/app/api/tags/route.ts"
click node_client_state "https://github.com/phyothukha/learnflow-frontend/blob/main/src/store/client/use-store.ts"
click node_topic_queries "https://github.com/phyothukha/learnflow-frontend/blob/main/src/store/server/topics/queries.ts"
click node_query_builder "https://github.com/phyothukha/learnflow-frontend/blob/main/src/utils/query.ts"
click node_http_clients "https://github.com/phyothukha/learnflow-frontend/blob/main/src/lib/axios.ts"
click node_ui_primitives "https://github.com/phyothukha/learnflow-frontend/tree/main/src/components/ui"
click node_confirm_hook "https://github.com/phyothukha/learnflow-frontend/blob/main/src/hooks/use-confirm-dialog.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_shell,node_header,node_topic_switch,node_library,node_notes,node_timeline,node_dashboard,node_ui_primitives,node_confirm_hook,node_user toneBlue
class node_courses,node_enrollments toneAmber
class node_auth,node_api_docs,node_api_enroll,node_api_study,node_api_courses,node_api_notes,node_api_topics,node_api_folders,node_api_tags toneMint
class node_client_state,node_topic_queries,node_query_builder,node_http_clients toneRose
class node_backend toneIndigo
```

## Components

### Workspace UI

- [Workspace shell](https://github.com/phyothukha/learnflow-frontend/blob/main/src/layout/main-layout.tsx): `src/layout/main-layout.tsx`
- [Workspace header](https://github.com/phyothukha/learnflow-frontend/blob/main/src/layout/header.tsx): `src/layout/header.tsx`
- [Topic context](https://github.com/phyothukha/learnflow-frontend/blob/main/src/components/topic-context-switcher.tsx): `src/components/topic-context-switcher.tsx`
- [Document library](https://github.com/phyothukha/learnflow-frontend/tree/main/src/app/(admin)/library): `src/app/(admin)/library`
- [Notes workspace](https://github.com/phyothukha/learnflow-frontend/tree/main/src/app/(admin)/notes): `src/app/(admin)/notes`
- [Study timeline](https://github.com/phyothukha/learnflow-frontend/blob/main/src/app/(admin)/timeline/page.tsx): `src/app/(admin)/timeline/page.tsx`
- [Learning dashboard](https://github.com/phyothukha/learnflow-frontend/tree/main/src/app/(admin)/dashboard): `src/app/(admin)/dashboard`
- [UI primitives](https://github.com/phyothukha/learnflow-frontend/tree/main/src/components/ui): `src/components/ui`
- [Confirmation hook](https://github.com/phyothukha/learnflow-frontend/blob/main/src/hooks/use-confirm-dialog.ts): `src/hooks/use-confirm-dialog.ts`

### Admin tools

- [Course management](https://github.com/phyothukha/learnflow-frontend/tree/main/src/app/(admin)/courses): `src/app/(admin)/courses`
- [Enrollment management](https://github.com/phyothukha/learnflow-frontend/tree/main/src/app/(admin)/enrollments): `src/app/(admin)/enrollments`

### Access and API

- [Authentication](https://github.com/phyothukha/learnflow-frontend/blob/main/src/lib/auth.ts): `src/lib/auth.ts`
- [Document API](https://github.com/phyothukha/learnflow-frontend/tree/main/src/app/api/documents): `src/app/api/documents`
- [Enrollment API](https://github.com/phyothukha/learnflow-frontend/blob/main/src/app/api/enrollments/route.ts): `src/app/api/enrollments/route.ts`
- [Study-block API](https://github.com/phyothukha/learnflow-frontend/blob/main/src/app/api/study-blocks/route.ts): `src/app/api/study-blocks/route.ts`
- [Course API](https://github.com/phyothukha/learnflow-frontend/blob/main/src/app/api/courses/route.ts): `src/app/api/courses/route.ts`
- [Notes API](https://github.com/phyothukha/learnflow-frontend/blob/main/src/app/api/notes/route.ts): `src/app/api/notes/route.ts`
- [Topics API](https://github.com/phyothukha/learnflow-frontend/blob/main/src/app/api/topics/route.ts): `src/app/api/topics/route.ts`
- [Topic-folder API](https://github.com/phyothukha/learnflow-frontend/tree/main/src/app/api/topic-folders): `src/app/api/topic-folders`
- [Tags API](https://github.com/phyothukha/learnflow-frontend/blob/main/src/app/api/tags/route.ts): `src/app/api/tags/route.ts`

### Client and query state

- [Client workspace state](https://github.com/phyothukha/learnflow-frontend/blob/main/src/store/client/use-store.ts): `src/store/client/use-store.ts`
- [Topic queries](https://github.com/phyothukha/learnflow-frontend/blob/main/src/store/server/topics/queries.ts): `src/store/server/topics/queries.ts`
- [Query builder](https://github.com/phyothukha/learnflow-frontend/blob/main/src/utils/query.ts): `src/utils/query.ts`
- [HTTP clients](https://github.com/phyothukha/learnflow-frontend/blob/main/src/lib/axios.ts): `src/lib/axios.ts`

### Other components

- **Workspace user**
- **Backend service**

## Connections

- Workspace user → Workspace shell: uses
- Workspace shell → Workspace header: hosts
- Workspace header → Topic context: renders (evidence: `src/layout/header.tsx`)
- Topic context → Topic queries: fetches topics (evidence: `src/components/topic-context-switcher.tsx`)
- Topic context → Client workspace state: updates context (evidence: `src/components/topic-context-switcher.tsx`)
- Workspace header → Topic queries: loads breadcrumbs (evidence: `src/layout/header.tsx`)
- Workspace header → Confirmation hook: requests logout confirmation (evidence: `src/layout/header.tsx`)
- Topic queries → HTTP clients: uses (evidence: `src/store/server/topics/queries.ts`)
- Study-block API → Authentication: checks session (evidence: `src/app/api/study-blocks/route.ts`)
- Study-block API → Query builder: builds query (evidence: `src/app/api/study-blocks/route.ts`)
- Study-block API → HTTP clients: requests data (evidence: `src/app/api/study-blocks/route.ts`)
- Study-block API → Backend service: proxies requests (evidence: `src/app/api/study-blocks/route.ts`)
- Document API → Authentication: checks session (evidence: `src/app/api/documents/route.ts`)
- Document API → HTTP clients: requests data (evidence: `src/app/api/documents/route.ts`)
- Document API → Backend service: proxies requests (evidence: `src/app/api/documents/route.ts`)
- Enrollment API → Authentication: checks session (evidence: `src/app/api/enrollments/route.ts`)
- Enrollment API → Query builder: builds query (evidence: `src/app/api/enrollments/route.ts`)
- Enrollment API → HTTP clients: requests data (evidence: `src/app/api/enrollments/route.ts`)
- Enrollment API → Backend service: proxies requests (evidence: `src/app/api/enrollments/route.ts`)
- Authentication → HTTP clients: authenticates via (evidence: `src/lib/auth.ts`)
- Authentication → Backend service: submits credentials (evidence: `src/lib/auth.ts`)
- HTTP clients → Backend service: targets service (evidence: `src/lib/axios.ts`)
- Course API → Backend service: proxies requests
- Notes API → Backend service: proxies requests
- Topics API → Backend service: proxies requests
- Topic-folder API → Backend service: proxies requests
- Tags API → Backend service: proxies requests
- Course management → Course API: manages via
- Enrollment management → Enrollment API: manages via
- Document library → Document API: works with
- Notes workspace → Notes API: works with
- Study timeline → Study-block API: works with
- Learning dashboard → Study-block API: uses activity data