# ke-jo-i/queueease-mobileapp architecture

> Architecture diagram of the GitHub repository ke-jo-i/queueease-mobileapp, 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/ke-jo-i/queueease-mobileapp
- Repository: https://github.com/ke-jo-i/queueease-mobileapp

## Overview

QueueEase is an Expo/React Native registrar queue prototype. Students sign in, choose a service, receive a window-routed ticket, and view or cancel eligible tickets; staff sign in, assign a window, call and resolve tickets, and review history. Queue and session state are in-memory, while appearance preference is persisted locally. The graph retains the documented live-status and portal capabilities, but their exact wiring is not shown in the excerpts. Relationships are cited only where visible in source or README documentation.

Main entry points: [`src/contexts/queue.tsx`](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/contexts/queue.tsx) (Queue state), [`src/contexts/session.tsx`](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/contexts/session.tsx) (Session state), [`src/app/staff/profile.tsx`](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/staff/profile.tsx) (Staff profile and assignment), [`src/app/index.tsx`](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/index.tsx) (Portal choice)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_student["Student queue"]
  node_student_home["Student home<br/>[home.tsx]"]
  node_service_confirm["Service confirmation"]
  node_window_map["Service-window mapping<br/>[service-windows.ts]"]
  node_student_tickets["Tickets and history<br/>[tickets.tsx]"]
  node_student_alerts["Ticket alerts<br/>[alerts.tsx]"]
  node_live_status["Live status view<br/>[live-status.tsx]"]
  node_student_profile["Student profile<br/>[profile.tsx]"]
end

subgraph group_staff["Staff operations"]
  node_staff_queue["Queue operations<br/>[dashboard.tsx]"]
  node_queue_list["Queue list<br/>[queue-list.tsx]"]
  node_staff_history["Staff history<br/>[history.tsx]"]
  node_staff_profile["Staff profile and assignment<br/>[profile.tsx]"]
end

subgraph group_state["Application state"]
  node_session_state["Session state<br/>[session.tsx]"]
  node_queue_state["Queue state<br/>[queue.tsx]"]
  node_appearance_state["Appearance preference<br/>[appearance.tsx]"]
end

subgraph group_entry["Portal and routing"]
  node_portal_choice["Portal choice<br/>[index.tsx]"]
  node_student_login["Student login<br/>[login.tsx]"]
  node_staff_login["Staff login<br/>[login.tsx]"]
  node_explore["Explore content<br/>[explore.tsx]"]
end

subgraph group_presentation["Appearance and UI"]
  node_app_theme["App palette<br/>[app-colors.ts]"]
  node_theme_hooks["Theme hooks<br/>[use-app-theme.ts]"]
  node_base_theme["Base theme<br/>[theme.ts]"]
  node_themed_components["Themed components<br/>[themed-text.tsx]"]
  node_dark_mode["Dark-mode control"]
end

node_student(("Student"))
node_staff_actor(("Registrar staff"))

node_student -->|"chooses portal"| node_portal_choice
node_staff_actor -->|"chooses portal"| node_portal_choice
node_portal_choice -.->|"opens student"| node_student_login
node_portal_choice -.->|"opens staff"| node_staff_login
node_student_login -->|"signs in"| node_session_state
node_staff_login -->|"signs in"| node_session_state
node_student -->|"views services"| node_student_home
node_student_home -->|"selects service"| node_service_confirm
node_service_confirm -->|"gets window"| node_window_map
node_service_confirm -->|"books ticket"| node_queue_state
node_student -->|"views ticket"| node_student_tickets
node_student_tickets -->|"reads or cancels"| node_queue_state
node_student_alerts -->|"reads alerts"| node_queue_state
node_student -->|"checks status"| node_live_status
node_student_profile -->|"reads session"| node_session_state
node_staff_actor -->|"sets assignment"| node_staff_profile
node_staff_profile -->|"reads session"| node_session_state
node_staff_profile -->|"sets window"| node_queue_state
node_staff_actor -->|"works queue"| node_staff_queue
node_staff_queue -->|"calls and resolves"| node_queue_state
node_queue_list -->|"reads queue"| node_queue_state
node_staff_history -->|"reads history"| node_queue_state
node_queue_state -->|"scopes tickets"| node_session_state
node_student_profile -->|"offers setting"| node_dark_mode
node_staff_profile -->|"offers setting"| node_dark_mode
node_dark_mode -->|"changes preference"| node_appearance_state
node_appearance_state -->|"selects palette"| node_app_theme
node_theme_hooks -->|"reads appearance"| node_appearance_state
node_theme_hooks -->|"selects colors"| node_app_theme
node_themed_components -->|"uses theme"| node_base_theme
node_explore -->|"renders content"| node_themed_components

click node_portal_choice "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/index.tsx"
click node_student_login "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/login.tsx"
click node_staff_login "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/staff/login.tsx"
click node_student_home "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/(student)/home.tsx"
click node_service_confirm "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/confirm-service.tsx"
click node_window_map "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/constants/service-windows.ts"
click node_student_tickets "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/(student)/tickets.tsx"
click node_student_alerts "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/(student)/alerts.tsx"
click node_live_status "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/live-status.tsx"
click node_student_profile "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/(student)/profile.tsx"
click node_staff_queue "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/staff/dashboard.tsx"
click node_queue_list "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/staff/queue-list.tsx"
click node_staff_history "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/staff/history.tsx"
click node_staff_profile "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/staff/profile.tsx"
click node_session_state "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/contexts/session.tsx"
click node_queue_state "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/contexts/queue.tsx"
click node_appearance_state "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/contexts/appearance.tsx"
click node_app_theme "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/constants/app-colors.ts"
click node_theme_hooks "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/hooks/use-app-theme.ts"
click node_base_theme "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/constants/theme.ts"
click node_themed_components "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/components/themed-text.tsx"
click node_dark_mode "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/components/dark-mode-toggle.tsx"
click node_explore "https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/explore.tsx"

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_student_home,node_service_confirm,node_window_map,node_student_tickets,node_student_alerts,node_live_status,node_student_profile toneBlue
class node_staff_queue,node_queue_list,node_staff_history,node_staff_profile toneAmber
class node_session_state,node_queue_state,node_appearance_state toneMint
class node_portal_choice,node_student_login,node_staff_login,node_explore toneRose
class node_app_theme,node_theme_hooks,node_base_theme,node_themed_components,node_dark_mode,node_student,node_staff_actor toneIndigo
```

## Components

### Student queue

- [Student home](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/(student)/home.tsx): `src/app/(student)/home.tsx`
- [Service confirmation](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/confirm-service.tsx): `src/app/confirm-service.tsx`
- [Service-window mapping](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/constants/service-windows.ts): `src/constants/service-windows.ts`
- [Tickets and history](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/(student)/tickets.tsx): `src/app/(student)/tickets.tsx`
- [Ticket alerts](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/(student)/alerts.tsx): `src/app/(student)/alerts.tsx`
- [Live status view](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/live-status.tsx): `src/app/live-status.tsx`
- [Student profile](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/(student)/profile.tsx): `src/app/(student)/profile.tsx`

### Staff operations

- [Queue operations](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/staff/dashboard.tsx): `src/app/staff/dashboard.tsx`
- [Queue list](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/staff/queue-list.tsx): `src/app/staff/queue-list.tsx`
- [Staff history](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/staff/history.tsx): `src/app/staff/history.tsx`
- [Staff profile and assignment](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/staff/profile.tsx): `src/app/staff/profile.tsx`

### Application state

- [Session state](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/contexts/session.tsx): `src/contexts/session.tsx`
- [Queue state](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/contexts/queue.tsx): `src/contexts/queue.tsx`
- [Appearance preference](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/contexts/appearance.tsx): `src/contexts/appearance.tsx`

### Portal and routing

- [Portal choice](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/index.tsx): `src/app/index.tsx`
- [Student login](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/login.tsx): `src/app/login.tsx`
- [Staff login](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/staff/login.tsx): `src/app/staff/login.tsx`
- [Explore content](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/app/explore.tsx): `src/app/explore.tsx`

### Appearance and UI

- [App palette](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/constants/app-colors.ts): `src/constants/app-colors.ts`
- [Theme hooks](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/hooks/use-app-theme.ts): `src/hooks/use-app-theme.ts`
- [Base theme](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/constants/theme.ts): `src/constants/theme.ts`
- [Themed components](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/components/themed-text.tsx): `src/components/themed-text.tsx`
- [Dark-mode control](https://github.com/ke-jo-i/queueease-mobileapp/blob/main/src/components/dark-mode-toggle.tsx): `src/components/dark-mode-toggle.tsx`

### Other components

- **Student**
- **Registrar staff**

## Connections

- Student → Portal choice: chooses portal (evidence: `README.md`)
- Registrar staff → Portal choice: chooses portal (evidence: `README.md`)
- Portal choice → Student login: opens student
- Portal choice → Staff login: opens staff
- Student login → Session state: signs in (evidence: `src/app/login.tsx`)
- Staff login → Session state: signs in (evidence: `src/app/staff/login.tsx`)
- Student → Student home: views services (evidence: `README.md`)
- Student home → Service confirmation: selects service (evidence: `README.md`)
- Service confirmation → Service-window mapping: gets window (evidence: `src/app/confirm-service.tsx`)
- Service confirmation → Queue state: books ticket (evidence: `src/app/confirm-service.tsx`)
- Student → Tickets and history: views ticket (evidence: `README.md`)
- Tickets and history → Queue state: reads or cancels (evidence: `src/app/(student)/tickets.tsx`)
- Ticket alerts → Queue state: reads alerts (evidence: `src/app/(student)/alerts.tsx`)
- Student → Live status view: checks status (evidence: `README.md`)
- Student profile → Session state: reads session (evidence: `src/app/(student)/profile.tsx`)
- Registrar staff → Staff profile and assignment: sets assignment (evidence: `README.md`)
- Staff profile and assignment → Session state: reads session (evidence: `src/app/staff/profile.tsx`)
- Staff profile and assignment → Queue state: sets window (evidence: `src/app/staff/profile.tsx`)
- Registrar staff → Queue operations: works queue (evidence: `README.md`)
- Queue operations → Queue state: calls and resolves (evidence: `src/app/staff/dashboard.tsx`)
- Queue list → Queue state: reads queue (evidence: `src/app/staff/queue-list.tsx`)
- Staff history → Queue state: reads history (evidence: `src/app/staff/history.tsx`)
- Queue state → Session state: scopes tickets (evidence: `src/contexts/queue.tsx`)
- Student profile → Dark-mode control: offers setting (evidence: `src/app/(student)/profile.tsx`)
- Staff profile and assignment → Dark-mode control: offers setting (evidence: `src/app/staff/profile.tsx`)
- Dark-mode control → Appearance preference: changes preference (evidence: `src/components/dark-mode-toggle.tsx`)
- Appearance preference → App palette: selects palette (evidence: `src/hooks/use-app-theme.ts`)
- Theme hooks → Appearance preference: reads appearance (evidence: `src/hooks/use-app-theme.ts`)
- Theme hooks → App palette: selects colors (evidence: `src/hooks/use-app-theme.ts`)
- Themed components → Base theme: uses theme (evidence: `src/components/themed-text.tsx`)
- Explore content → Themed components: renders content (evidence: `src/app/explore.tsx`)