# letra4107-web/linaw-web architecture

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

- Interactive diagram: https://gitdiagram.com/letra4107-web/linaw-web
- Repository: https://github.com/letra4107-web/linaw-web

## Overview

LinawLetra is a Filipino reading-support web platform linking student learning to family, teacher, and administrator tools. The main learner journey is role-authenticated entry into student pages, where students practice and assess reading; progress, streaks, XP, and badges support continued learning. Teachers manage students and PDF drills, including review before publication, while parents view child settings and progress and administrators manage accounts and operations. The browser uses Supabase Auth and an Express API backed by Supabase. The README documents additional capabilities whose internal wiring is not shown in the sampled source.

Main entry points: [`src/App.tsx`](https://github.com/letra4107-web/linaw-web/blob/main/src/App.tsx) (App router), [`src/lib/api.ts`](https://github.com/letra4107-web/linaw-web/blob/main/src/lib/api.ts) (API client), [`src/lib/auth/AuthContext.tsx`](https://github.com/letra4107-web/linaw-web/blob/main/src/lib/auth/AuthContext.tsx) (Auth and role), [`src/routes/StudentArea.tsx`](https://github.com/letra4107-web/linaw-web/blob/main/src/routes/StudentArea.tsx) (Student routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser application"]
  node_app["App router<br/>[App.tsx]"]
  node_auth["Auth and role<br/>[AuthContext.tsx]"]
  node_api["API client<br/>[api.ts]"]
  node_notifications["Notifications"]
end

subgraph group_learning["Student learning"]
  node_studentarea["Student routes<br/>[StudentArea.tsx]"]
  node_studentpages["Learning pages"]
  node_practice["Practice tools"]
end

subgraph group_community["Family and teaching"]
  node_teacherarea["Teacher routes<br/>[TeacherArea.tsx]"]
  node_teacherpages["Teacher tools"]
  node_drillreview["PDF drill review<br/>[PdfDrillReview.tsx]"]
  node_parentarea["Parent routes<br/>[ParentArea.tsx]"]
  node_parentpages["Parent tools"]
  node_adminarea["Admin routes<br/>[AdminArea.tsx]"]
  node_adminpages["Admin tools"]
end

subgraph group_backend["API and services"]
  node_express["Express API<br/>[server.js]"]
  node_roleapi["Role API routes"]
  node_ttsapi["TTS endpoint<br/>[tts.js]"]
end

subgraph group_platform["External platform"]
  node_supabaseclient["Supabase client<br/>[supabaseClient.ts]"]
  node_supabase[("Supabase services")]
  node_browser_speech["Browser speech"]
  node_elevenlabs["ElevenLabs TTS"]
end

node_student(("Student"))
node_teacher(("Teacher"))
node_parent(("Parent"))
node_admin(("Administrator"))

node_student -->|"opens app"| node_app
node_teacher -->|"opens app"| node_app
node_parent -->|"opens app"| node_app
node_admin -->|"opens app"| node_app
node_app -->|"routes"| node_studentarea
node_app -->|"routes"| node_teacherarea
node_app -->|"routes"| node_parentarea
node_app -->|"routes"| node_adminarea
node_studentarea -->|"renders"| node_studentpages
node_studentpages -->|"uses"| node_practice
node_studentarea -->|"checks identity"| node_auth
node_teacherarea -->|"renders"| node_teacherpages
node_teacherpages -->|"uses"| node_drillreview
node_parentarea -->|"renders"| node_parentpages
node_adminarea -->|"renders"| node_adminpages
node_auth -->|"authenticates"| node_supabaseclient
node_auth -->|"posts login event"| node_api
node_notifications -->|"fetches and updates"| node_api
node_notifications -->|"subscribes to changes"| node_supabaseclient
node_studentpages -->|"requests data"| node_api
node_teacherpages -->|"requests data"| node_api
node_parentpages -->|"requests data"| node_api
node_adminpages -->|"requests data"| node_api
node_drillreview -->|"saves and publishes"| node_api
node_api -->|"sends requests"| node_express
node_express -->|"dispatches"| node_roleapi
node_roleapi -->|"reads and writes"| node_supabase
node_ttsapi -.->|"requests speech"| node_elevenlabs
node_practice -.->|"uses recognition"| node_browser_speech
node_supabaseclient -->|"connects"| node_supabase

click node_app "https://github.com/letra4107-web/linaw-web/blob/main/src/App.tsx"
click node_auth "https://github.com/letra4107-web/linaw-web/blob/main/src/lib/auth/AuthContext.tsx"
click node_studentarea "https://github.com/letra4107-web/linaw-web/blob/main/src/routes/StudentArea.tsx"
click node_studentpages "https://github.com/letra4107-web/linaw-web/tree/main/src/pages/student"
click node_practice "https://github.com/letra4107-web/linaw-web/tree/main/src/components"
click node_teacherarea "https://github.com/letra4107-web/linaw-web/blob/main/src/routes/TeacherArea.tsx"
click node_teacherpages "https://github.com/letra4107-web/linaw-web/tree/main/src/pages/teacher"
click node_drillreview "https://github.com/letra4107-web/linaw-web/blob/main/src/components/teacher/PdfDrillReview.tsx"
click node_parentarea "https://github.com/letra4107-web/linaw-web/blob/main/src/routes/ParentArea.tsx"
click node_parentpages "https://github.com/letra4107-web/linaw-web/tree/main/src/pages/parent"
click node_adminarea "https://github.com/letra4107-web/linaw-web/blob/main/src/routes/AdminArea.tsx"
click node_adminpages "https://github.com/letra4107-web/linaw-web/tree/main/src/pages/admin"
click node_api "https://github.com/letra4107-web/linaw-web/blob/main/src/lib/api.ts"
click node_notifications "https://github.com/letra4107-web/linaw-web/blob/main/src/lib/useNotifications.ts"
click node_express "https://github.com/letra4107-web/linaw-web/blob/main/server/server.js"
click node_roleapi "https://github.com/letra4107-web/linaw-web/tree/main/server/routes"
click node_ttsapi "https://github.com/letra4107-web/linaw-web/blob/main/server/routes/tts.js"
click node_supabaseclient "https://github.com/letra4107-web/linaw-web/blob/main/src/lib/supabaseClient.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_app,node_auth,node_api,node_notifications toneBlue
class node_studentarea,node_studentpages,node_practice toneAmber
class node_teacherarea,node_teacherpages,node_drillreview,node_parentarea,node_parentpages,node_adminarea,node_adminpages toneMint
class node_express,node_roleapi,node_ttsapi toneRose
class node_supabaseclient,node_supabase,node_browser_speech,node_elevenlabs,node_student,node_teacher,node_parent,node_admin toneIndigo
```

## Components

### Browser application

- [App router](https://github.com/letra4107-web/linaw-web/blob/main/src/App.tsx): `src/App.tsx`
- [Auth and role](https://github.com/letra4107-web/linaw-web/blob/main/src/lib/auth/AuthContext.tsx): `src/lib/auth/AuthContext.tsx`
- [API client](https://github.com/letra4107-web/linaw-web/blob/main/src/lib/api.ts): `src/lib/api.ts`
- [Notifications](https://github.com/letra4107-web/linaw-web/blob/main/src/lib/useNotifications.ts): `src/lib/useNotifications.ts`

### Student learning

- [Student routes](https://github.com/letra4107-web/linaw-web/blob/main/src/routes/StudentArea.tsx): `src/routes/StudentArea.tsx`
- [Learning pages](https://github.com/letra4107-web/linaw-web/tree/main/src/pages/student): `src/pages/student`
- [Practice tools](https://github.com/letra4107-web/linaw-web/tree/main/src/components): `src/components`

### Family and teaching

- [Teacher routes](https://github.com/letra4107-web/linaw-web/blob/main/src/routes/TeacherArea.tsx): `src/routes/TeacherArea.tsx`
- [Teacher tools](https://github.com/letra4107-web/linaw-web/tree/main/src/pages/teacher): `src/pages/teacher`
- [PDF drill review](https://github.com/letra4107-web/linaw-web/blob/main/src/components/teacher/PdfDrillReview.tsx): `src/components/teacher/PdfDrillReview.tsx`
- [Parent routes](https://github.com/letra4107-web/linaw-web/blob/main/src/routes/ParentArea.tsx): `src/routes/ParentArea.tsx`
- [Parent tools](https://github.com/letra4107-web/linaw-web/tree/main/src/pages/parent): `src/pages/parent`
- [Admin routes](https://github.com/letra4107-web/linaw-web/blob/main/src/routes/AdminArea.tsx): `src/routes/AdminArea.tsx`
- [Admin tools](https://github.com/letra4107-web/linaw-web/tree/main/src/pages/admin): `src/pages/admin`

### API and services

- [Express API](https://github.com/letra4107-web/linaw-web/blob/main/server/server.js): `server/server.js`
- [Role API routes](https://github.com/letra4107-web/linaw-web/tree/main/server/routes): `server/routes`
- [TTS endpoint](https://github.com/letra4107-web/linaw-web/blob/main/server/routes/tts.js): `server/routes/tts.js`

### External platform

- [Supabase client](https://github.com/letra4107-web/linaw-web/blob/main/src/lib/supabaseClient.ts): `src/lib/supabaseClient.ts`
- **Supabase services**
- **Browser speech**
- **ElevenLabs TTS**

### Other components

- **Student**
- **Teacher**
- **Parent**
- **Administrator**

## Connections

- Student → App router: opens app
- Teacher → App router: opens app
- Parent → App router: opens app
- Administrator → App router: opens app
- App router → Student routes: routes
- App router → Teacher routes: routes
- App router → Parent routes: routes
- App router → Admin routes: routes
- Student routes → Learning pages: renders
- Learning pages → Practice tools: uses
- Student routes → Auth and role: checks identity
- Teacher routes → Teacher tools: renders
- Teacher tools → PDF drill review: uses
- Parent routes → Parent tools: renders
- Admin routes → Admin tools: renders
- Auth and role → Supabase client: authenticates
- Auth and role → API client: posts login event
- Notifications → API client: fetches and updates
- Notifications → Supabase client: subscribes to changes
- Learning pages → API client: requests data
- Teacher tools → API client: requests data
- Parent tools → API client: requests data
- Admin tools → API client: requests data
- PDF drill review → API client: saves and publishes
- API client → Express API: sends requests
- Express API → Role API routes: dispatches
- Role API routes → Supabase services: reads and writes
- TTS endpoint → ElevenLabs TTS: requests speech
- Practice tools → Browser speech: uses recognition
- Supabase client → Supabase services: connects