# saulalee/katedra-client architecture

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

- Interactive diagram: https://gitdiagram.com/saulalee/katedra-client
- Repository: https://github.com/saulalee/katedra-client

## Overview

Katedra is a teacher-facing AI academic-content generator. A teacher signs in, selects a subject and syllabus, requests theory, assessments, or slides, then views and exports generated material; plan permissions and usage constrain generation and exports. The client also supports syllabus ingestion, content history, subscription checkout, and administrator user management. The README documents a hook–store/service–REST architecture; sampled source confirms generation, auth, billing, and user-service behavior, but not every page-to-hook connection, so uncertain wiring is omitted.

Main entry points: [`src/App.jsx`](https://github.com/saulalee/katedra-client/blob/main/src/App.jsx) (Route application), [`src/app/hooks/useGenerator.js`](https://github.com/saulalee/katedra-client/blob/main/src/app/hooks/useGenerator.js) (Generation workflow), [`src/app/hooks/useAuth.js`](https://github.com/saulalee/katedra-client/blob/main/src/app/hooks/useAuth.js) (Auth hook), [`src/app/store/suscripcionStore.js`](https://github.com/saulalee/katedra-client/blob/main/src/app/store/suscripcionStore.js) (Subscription state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App and routes"]
  node_app["Route application<br/>[App.jsx]"]
  node_protected["Role protection<br/>[ProtectedRoute.jsx]"]
end

subgraph group_identity["Identity and access"]
  node_login["Sign in and register<br/>[Login.jsx]"]
  node_callback["OAuth callback<br/>[AuthCallback.jsx]"]
  node_auth_hook["Auth hook<br/>[useAuth.js]"]
  node_auth_store["Auth state<br/>[authStore.js]"]
  node_auth_service["Auth requests<br/>[authService.js]"]
end

subgraph group_academic["Academic content"]
  node_dashboard["Teacher dashboard<br/>[Dashboard.jsx]"]
  node_generator_page["Content generator<br/>[Generator.jsx]"]
  node_generator_hook["Generation workflow<br/>[useGenerator.js]"]
  node_temario_service["Syllabus and materials<br/>[temarioService.js]"]
  node_content_pages["Content viewing and history"]
  node_export_hook["Content export<br/>[useExport.js]"]
  node_subjects_hook["Subject data<br/>[useAsignaturas.js]"]
  node_syllabus_hook["Syllabus data<br/>[useTemarios.js]"]
end

subgraph group_billing["Plans and billing"]
  node_billing_ui["Plan and checkout UI<br/>[CheckoutModal.jsx]"]
  node_billing_hook["Subscription hook<br/>[useSuscripcion.js]"]
  node_billing_store["Subscription state"]
  node_billing_service["Subscription requests"]
end

subgraph group_admin["Administration"]
  node_users_page["User administration<br/>[Users.jsx]"]
  node_users_hook["User data<br/>[useUsers.js]"]
  node_users_service["User requests<br/>[userService.js]"]
end

node_teacher(("Teacher"))
node_admin_actor(("Administrator"))
node_api[("Katedra REST API")]

node_teacher -->|"opens app"| node_app
node_admin_actor -->|"opens app"| node_app
node_app -->|"routes"| node_login
node_app -->|"routes"| node_callback
node_app -->|"guards routes"| node_protected
node_app -->|"routes"| node_dashboard
node_app -->|"routes"| node_generator_page
node_app -->|"routes"| node_content_pages
node_app -->|"routes"| node_users_page
node_login -->|"uses auth"| node_auth_hook
node_callback -->|"handles callback"| node_auth_hook
node_auth_hook -->|"delegates state"| node_auth_store
node_auth_store -->|"requests auth"| node_auth_service
node_auth_service -->|"sends REST requests"| node_api
node_generator_page -->|"uses workflow"| node_generator_hook
node_generator_hook -->|"loads syllabi"| node_syllabus_hook
node_generator_hook -->|"loads subjects"| node_subjects_hook
node_generator_hook -->|"generates and reads"| node_temario_service
node_temario_service -->|"sends REST requests"| node_api
node_content_pages -->|"exports content"| node_export_hook
node_generator_hook -->|"refreshes usage"| node_billing_store
node_billing_ui -->|"uses plan state"| node_billing_hook
node_billing_hook -->|"derives permissions"| node_billing_store
node_billing_store -->|"requests billing"| node_billing_service
node_billing_service -->|"sends REST requests"| node_api
node_users_page -->|"manages users"| node_users_hook
node_users_hook -->|"requests user data"| node_users_service
node_users_service -->|"sends REST requests"| node_api

click node_app "https://github.com/saulalee/katedra-client/blob/main/src/App.jsx"
click node_protected "https://github.com/saulalee/katedra-client/blob/main/src/app/components/ProtectedRoute.jsx"
click node_login "https://github.com/saulalee/katedra-client/blob/main/src/app/pages/Login.jsx"
click node_callback "https://github.com/saulalee/katedra-client/blob/main/src/app/pages/AuthCallback.jsx"
click node_auth_hook "https://github.com/saulalee/katedra-client/blob/main/src/app/hooks/useAuth.js"
click node_auth_store "https://github.com/saulalee/katedra-client/blob/main/src/app/store/authStore.js"
click node_auth_service "https://github.com/saulalee/katedra-client/blob/main/src/app/services/authService.js"
click node_dashboard "https://github.com/saulalee/katedra-client/blob/main/src/app/pages/Dashboard.jsx"
click node_generator_page "https://github.com/saulalee/katedra-client/blob/main/src/app/pages/Generator.jsx"
click node_generator_hook "https://github.com/saulalee/katedra-client/blob/main/src/app/hooks/useGenerator.js"
click node_temario_service "https://github.com/saulalee/katedra-client/blob/main/src/app/services/temarioService.js"
click node_content_pages "https://github.com/saulalee/katedra-client/blob/main/src/app/pages/GeneratedContents.jsx"
click node_export_hook "https://github.com/saulalee/katedra-client/blob/main/src/app/hooks/useExport.js"
click node_subjects_hook "https://github.com/saulalee/katedra-client/blob/main/src/app/hooks/useAsignaturas.js"
click node_syllabus_hook "https://github.com/saulalee/katedra-client/blob/main/src/app/hooks/useTemarios.js"
click node_billing_ui "https://github.com/saulalee/katedra-client/blob/main/src/app/components/CheckoutModal.jsx"
click node_billing_hook "https://github.com/saulalee/katedra-client/blob/main/src/app/hooks/useSuscripcion.js"
click node_billing_store "https://github.com/saulalee/katedra-client/blob/main/src/app/store/suscripcionStore.js"
click node_billing_service "https://github.com/saulalee/katedra-client/blob/main/src/app/services/suscripcionService.js"
click node_users_page "https://github.com/saulalee/katedra-client/blob/main/src/app/pages/Users.jsx"
click node_users_hook "https://github.com/saulalee/katedra-client/blob/main/src/app/hooks/useUsers.js"
click node_users_service "https://github.com/saulalee/katedra-client/blob/main/src/app/services/userService.js"

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_app,node_protected toneBlue
class node_login,node_callback,node_auth_hook,node_auth_store,node_auth_service,node_api toneAmber
class node_dashboard,node_generator_page,node_generator_hook,node_temario_service,node_content_pages,node_export_hook,node_subjects_hook,node_syllabus_hook toneMint
class node_billing_ui,node_billing_hook,node_billing_store,node_billing_service toneRose
class node_users_page,node_users_hook,node_users_service,node_teacher,node_admin_actor toneIndigo
```

## Components

### App and routes

- [Route application](https://github.com/saulalee/katedra-client/blob/main/src/App.jsx): `src/App.jsx`
- [Role protection](https://github.com/saulalee/katedra-client/blob/main/src/app/components/ProtectedRoute.jsx): `src/app/components/ProtectedRoute.jsx`

### Identity and access

- [Sign in and register](https://github.com/saulalee/katedra-client/blob/main/src/app/pages/Login.jsx): `src/app/pages/Login.jsx`
- [OAuth callback](https://github.com/saulalee/katedra-client/blob/main/src/app/pages/AuthCallback.jsx): `src/app/pages/AuthCallback.jsx`
- [Auth hook](https://github.com/saulalee/katedra-client/blob/main/src/app/hooks/useAuth.js): `src/app/hooks/useAuth.js`
- [Auth state](https://github.com/saulalee/katedra-client/blob/main/src/app/store/authStore.js): `src/app/store/authStore.js`
- [Auth requests](https://github.com/saulalee/katedra-client/blob/main/src/app/services/authService.js): `src/app/services/authService.js`

### Academic content

- [Teacher dashboard](https://github.com/saulalee/katedra-client/blob/main/src/app/pages/Dashboard.jsx): `src/app/pages/Dashboard.jsx`
- [Content generator](https://github.com/saulalee/katedra-client/blob/main/src/app/pages/Generator.jsx): `src/app/pages/Generator.jsx`
- [Generation workflow](https://github.com/saulalee/katedra-client/blob/main/src/app/hooks/useGenerator.js): `src/app/hooks/useGenerator.js`
- [Syllabus and materials](https://github.com/saulalee/katedra-client/blob/main/src/app/services/temarioService.js): `src/app/services/temarioService.js`
- [Content viewing and history](https://github.com/saulalee/katedra-client/blob/main/src/app/pages/GeneratedContents.jsx): `src/app/pages/GeneratedContents.jsx`
- [Content export](https://github.com/saulalee/katedra-client/blob/main/src/app/hooks/useExport.js): `src/app/hooks/useExport.js`
- [Subject data](https://github.com/saulalee/katedra-client/blob/main/src/app/hooks/useAsignaturas.js): `src/app/hooks/useAsignaturas.js`
- [Syllabus data](https://github.com/saulalee/katedra-client/blob/main/src/app/hooks/useTemarios.js): `src/app/hooks/useTemarios.js`

### Plans and billing

- [Plan and checkout UI](https://github.com/saulalee/katedra-client/blob/main/src/app/components/CheckoutModal.jsx): `src/app/components/CheckoutModal.jsx`
- [Subscription hook](https://github.com/saulalee/katedra-client/blob/main/src/app/hooks/useSuscripcion.js): `src/app/hooks/useSuscripcion.js`
- [Subscription state](https://github.com/saulalee/katedra-client/blob/main/src/app/store/suscripcionStore.js): `src/app/store/suscripcionStore.js`
- [Subscription requests](https://github.com/saulalee/katedra-client/blob/main/src/app/services/suscripcionService.js): `src/app/services/suscripcionService.js`

### Administration

- [User administration](https://github.com/saulalee/katedra-client/blob/main/src/app/pages/Users.jsx): `src/app/pages/Users.jsx`
- [User data](https://github.com/saulalee/katedra-client/blob/main/src/app/hooks/useUsers.js): `src/app/hooks/useUsers.js`
- [User requests](https://github.com/saulalee/katedra-client/blob/main/src/app/services/userService.js): `src/app/services/userService.js`

### Other components

- **Teacher**
- **Administrator**
- **Katedra REST API**

## Connections

- Teacher → Route application: opens app
- Administrator → Route application: opens app
- Route application → Sign in and register: routes
- Route application → OAuth callback: routes
- Route application → Role protection: guards routes
- Route application → Teacher dashboard: routes
- Route application → Content generator: routes
- Route application → Content viewing and history: routes
- Route application → User administration: routes
- Sign in and register → Auth hook: uses auth
- OAuth callback → Auth hook: handles callback
- Auth hook → Auth state: delegates state
- Auth state → Auth requests: requests auth
- Auth requests → Katedra REST API: sends REST requests
- Content generator → Generation workflow: uses workflow
- Generation workflow → Syllabus data: loads syllabi
- Generation workflow → Subject data: loads subjects
- Generation workflow → Syllabus and materials: generates and reads
- Syllabus and materials → Katedra REST API: sends REST requests
- Content viewing and history → Content export: exports content
- Generation workflow → Subscription state: refreshes usage
- Plan and checkout UI → Subscription hook: uses plan state
- Subscription hook → Subscription state: derives permissions
- Subscription state → Subscription requests: requests billing
- Subscription requests → Katedra REST API: sends REST requests
- User administration → User data: manages users
- User data → User requests: requests user data
- User requests → Katedra REST API: sends REST requests