# kmla-online/kmla-online-s- architecture

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

## Overview

KMLA Online is a student community PWA combining social features with school-life tools. Students enter through the app gate and shared shell, then use routes for community, messaging, notifications, profiles, and utilities; administrators have separate management routes. The feature tree shows distinct UI, data, and model layers, while the README identifies Supabase as the backend. Source excerpts are limited, so links between feature data modules and backend services are not asserted where their calls were not shown.

Main entry points: [`app/routes/app/layout.tsx`](https://github.com/kmla-online/kmla-online-s-/blob/main/app/routes/app/layout.tsx) (App shell), [`app/routes/app/gate.tsx`](https://github.com/kmla-online/kmla-online-s-/blob/main/app/routes/app/gate.tsx) (App gate), [`app/features/meal/components`](https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/meal/components) (School meals), [`app/features/timetable/components`](https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/timetable/components) (Timetable)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry"]
  node_gate["App gate<br/>[gate.tsx]"]
  node_shell["App shell<br/>[layout.tsx]"]
end

subgraph group_community["Community"]
  node_posts["Posts and feed"]
  node_groups["Groups"]
  node_messaging["Messaging"]
  node_stories["Stories"]
  node_notifications["Notifications"]
end

subgraph group_school["School tools"]
  node_meal["School meals"]
  node_timetable["Timetable"]
  node_utilities["School utilities"]
  node_support["Support"]
end

subgraph group_people["Accounts and admin"]
  node_profiles["Profiles"]
  node_search["Search"]
  node_auth["Authentication"]
  node_admin["Administration"]
end

subgraph group_platform["Shared services"]
  node_supabase["Supabase<br/>[client.ts]"]
  node_querycache["Query cache<br/>[query-client.ts]"]
  node_userstorage["User-scoped storage"]
end

node_student(("Student"))
node_neis["NEIS service"]

node_student -->|"opens app"| node_gate
node_gate -->|"admits user"| node_shell
node_shell -->|"routes to"| node_posts
node_shell -->|"routes to"| node_groups
node_shell -->|"routes to"| node_messaging
node_shell -->|"routes to"| node_stories
node_shell -->|"routes to"| node_notifications
node_shell -->|"routes to"| node_profiles
node_shell -->|"routes to"| node_search
node_shell -->|"routes to"| node_meal
node_shell -->|"routes to"| node_timetable
node_shell -->|"routes to"| node_utilities
node_shell -->|"routes to"| node_support
node_shell -->|"routes to"| node_admin
node_student -->|"signs in"| node_auth
node_meal -.->|"fetches menu"| node_neis
node_timetable -->|"caches display"| node_userstorage
node_shell -->|"provides cache"| node_querycache

click node_gate "https://github.com/kmla-online/kmla-online-s-/blob/main/app/routes/app/gate.tsx"
click node_shell "https://github.com/kmla-online/kmla-online-s-/blob/main/app/routes/app/layout.tsx"
click node_posts "https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/posts/components"
click node_groups "https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/groups/components"
click node_messaging "https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/messaging/components"
click node_stories "https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/stories/components"
click node_notifications "https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/notifications/components"
click node_profiles "https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/profiles/components"
click node_search "https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/search/components"
click node_auth "https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/auth/components"
click node_admin "https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/admin/components"
click node_meal "https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/meal/components"
click node_timetable "https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/timetable/components"
click node_utilities "https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/school-utilities/components"
click node_support "https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/support/components"
click node_supabase "https://github.com/kmla-online/kmla-online-s-/blob/main/app/shared/supabase/client.ts"
click node_querycache "https://github.com/kmla-online/kmla-online-s-/blob/main/app/shared/lib/query-client.ts"
click node_userstorage "https://github.com/kmla-online/kmla-online-s-/blob/main/app/shared/lib/user-scoped-storage.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_gate,node_shell toneBlue
class node_posts,node_groups,node_messaging,node_stories,node_notifications toneAmber
class node_meal,node_timetable,node_utilities,node_support toneMint
class node_profiles,node_search,node_auth,node_admin toneRose
class node_supabase,node_querycache,node_userstorage,node_student,node_neis toneIndigo
```

## Components

### App entry

- [App gate](https://github.com/kmla-online/kmla-online-s-/blob/main/app/routes/app/gate.tsx): `app/routes/app/gate.tsx`
- [App shell](https://github.com/kmla-online/kmla-online-s-/blob/main/app/routes/app/layout.tsx): `app/routes/app/layout.tsx`

### Community

- [Posts and feed](https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/posts/components): `app/features/posts/components`
- [Groups](https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/groups/components): `app/features/groups/components`
- [Messaging](https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/messaging/components): `app/features/messaging/components`
- [Stories](https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/stories/components): `app/features/stories/components`
- [Notifications](https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/notifications/components): `app/features/notifications/components`

### School tools

- [School meals](https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/meal/components): `app/features/meal/components`
- [Timetable](https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/timetable/components): `app/features/timetable/components`
- [School utilities](https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/school-utilities/components): `app/features/school-utilities/components`
- [Support](https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/support/components): `app/features/support/components`

### Accounts and admin

- [Profiles](https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/profiles/components): `app/features/profiles/components`
- [Search](https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/search/components): `app/features/search/components`
- [Authentication](https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/auth/components): `app/features/auth/components`
- [Administration](https://github.com/kmla-online/kmla-online-s-/tree/main/app/features/admin/components): `app/features/admin/components`

### Shared services

- [Supabase](https://github.com/kmla-online/kmla-online-s-/blob/main/app/shared/supabase/client.ts): `app/shared/supabase/client.ts`
- [Query cache](https://github.com/kmla-online/kmla-online-s-/blob/main/app/shared/lib/query-client.ts): `app/shared/lib/query-client.ts`
- [User-scoped storage](https://github.com/kmla-online/kmla-online-s-/blob/main/app/shared/lib/user-scoped-storage.ts): `app/shared/lib/user-scoped-storage.ts`

### Other components

- **Student**
- **NEIS service**

## Connections

- Student → App gate: opens app
- App gate → App shell: admits user
- App shell → Posts and feed: routes to
- App shell → Groups: routes to
- App shell → Messaging: routes to
- App shell → Stories: routes to
- App shell → Notifications: routes to
- App shell → Profiles: routes to
- App shell → Search: routes to
- App shell → School meals: routes to
- App shell → Timetable: routes to
- App shell → School utilities: routes to
- App shell → Support: routes to
- App shell → Administration: routes to
- Student → Authentication: signs in
- School meals → NEIS service: fetches menu
- Timetable → User-scoped storage: caches display
- App shell → Query cache: provides cache