# qassimaltarhouni/unibot-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/qassimaltarhouni/unibot-frontend
- Repository: https://github.com/qassimaltarhouni/unibot-frontend

## Overview

UniBot Frontend is a Next.js application for student-facing chatbot access and administrative management of institutions and analytics. Users can enter through the public landing page, authenticate or register, then use the chatbot; administrators use dashboard pages to manage institutions and view metrics. API requests are centralized in a mutation hook, while chat uses a socket connection. The README also documents UI-kit examples and form patterns. Relationships reflect the sampled source and index; unsampled route internals are represented without inferred call edges.

Main entry points: [`src/Hooks/useMutateApi.ts`](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/Hooks/useMutateApi.ts) (API mutation hook), [`src/context/AuthContext.tsx`](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/context/AuthContext.tsx) (Session state), [`src/app/dashboard/layout.tsx`](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/dashboard/layout.tsx) (Dashboard shell), [`src/app/(auth)/login/page.tsx`](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/(auth)/login/page.tsx) (Login)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entry and chat"]
  node_landing["Public landing<br/>[page.tsx]"]
  node_chat_ui["Chat widget<br/>[Chatbot.tsx]"]
  node_chat_route["Chat page<br/>[page.tsx]"]
  node_chat_api["Chat API<br/>[chat.ts]"]
end

subgraph group_identity["Authentication"]
  node_login["Login<br/>[page.tsx]"]
  node_registration["Registration<br/>[page.tsx]"]
  node_password_reset["Password reset<br/>[page.tsx]"]
  node_auth_state["Session state<br/>[AuthContext.tsx]"]
  node_route_guard["Route guard<br/>[ProtectedRoute.tsx]"]
end

subgraph group_admin["Administration"]
  node_dashboard["Dashboard overview<br/>[page.tsx]"]
  node_institution_add["Add institution<br/>[page.tsx]"]
  node_institution_edit["Edit institution<br/>[page.tsx]"]
  node_institution_list["Institution list<br/>[page.tsx]"]
  node_analytics["Analytics<br/>[page.tsx]"]
  node_dashboard_shell["Dashboard shell<br/>[layout.tsx]"]
end

subgraph group_shared["Shared services"]
  node_api_hook["API mutation hook<br/>[useMutateApi.ts]"]
  node_theme_context["Theme provider<br/>[ThemeContext.tsx]"]
  node_theme["MUI theme<br/>[theme.ts]"]
  node_colors["Color palette<br/>[GlobalColors.ts]"]
  node_app_root["App root<br/>[layout.tsx]"]
  node_ui_colors["Color showcase<br/>[page.tsx]"]
  node_ui_forms["Form example<br/>[page.tsx]"]
  node_ui_socket["Socket example<br/>[page.tsx]"]
end

node_visitor(("Visitor"))
node_socket_service{{"Chat socket service"}}
node_backend{{"UniBot backend"}}

node_visitor -->|"visits"| node_landing
node_landing -->|"renders"| node_chat_ui
node_chat_ui -->|"connects to"| node_socket_service
node_visitor -->|"signs in"| node_login
node_visitor -->|"registers"| node_registration
node_login -->|"submits through"| node_api_hook
node_registration -->|"submits through"| node_api_hook
node_auth_state -->|"checks sessions"| node_api_hook
node_login -->|"uses session"| node_auth_state
node_route_guard -->|"checks access"| node_auth_state
node_api_hook -->|"sends requests"| node_backend
node_dashboard_shell -->|"uses session"| node_auth_state
node_dashboard_shell -->|"uses theme"| node_theme_context
node_dashboard_shell -->|"requests data"| node_api_hook
node_dashboard -->|"requests data"| node_api_hook
node_institution_add -->|"submits through"| node_api_hook
node_institution_edit -->|"submits through"| node_api_hook
node_institution_list -->|"requests data"| node_api_hook
node_theme_context -->|"creates theme"| node_theme
node_theme -->|"uses palette"| node_colors
node_app_root -->|"provides context"| node_auth_state
node_app_root -->|"provides theme"| node_theme_context
node_ui_forms -->|"demonstrates use"| node_api_hook

click node_landing "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/page.tsx"
click node_chat_ui "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/UI/Chatbot.tsx"
click node_chat_route "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/chatbot/page.tsx"
click node_chat_api "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/pages/api/chat.ts"
click node_login "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/(auth)/login/page.tsx"
click node_registration "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/(auth)/register/page.tsx"
click node_password_reset "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/(auth)/reset-password/page.tsx"
click node_auth_state "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/context/AuthContext.tsx"
click node_route_guard "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/components/ProtectedRoute.tsx"
click node_dashboard "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/dashboard/page.tsx"
click node_institution_add "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/dashboard/(institution)/add-institution/page.tsx"
click node_institution_edit "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/dashboard/(institution)/edit-institution/%5Bid%5D/page.tsx"
click node_institution_list "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/dashboard/(institution)/institutions/page.tsx"
click node_analytics "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/dashboard/analytics/page.tsx"
click node_dashboard_shell "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/dashboard/layout.tsx"
click node_api_hook "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/Hooks/useMutateApi.ts"
click node_theme_context "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/context/ThemeContext.tsx"
click node_theme "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/Style/theme.ts"
click node_colors "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/Style/GlobalColors.ts"
click node_app_root "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/layout.tsx"
click node_ui_colors "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/(ui-kit)/colors-mui-components/page.tsx"
click node_ui_forms "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/(ui-kit)/form-usage/page.tsx"
click node_ui_socket "https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/(ui-kit)/socket-example/page.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_landing,node_chat_ui,node_chat_route,node_chat_api toneBlue
class node_login,node_registration,node_password_reset,node_auth_state,node_route_guard toneAmber
class node_dashboard,node_institution_add,node_institution_edit,node_institution_list,node_analytics,node_dashboard_shell toneMint
class node_api_hook,node_theme_context,node_theme,node_colors,node_app_root,node_ui_colors,node_ui_forms,node_ui_socket toneRose
class node_visitor,node_socket_service,node_backend toneIndigo
```

## Components

### Entry and chat

- [Public landing](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Chat widget](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/UI/Chatbot.tsx): `src/UI/Chatbot.tsx`
- [Chat page](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/chatbot/page.tsx): `src/app/chatbot/page.tsx`
- [Chat API](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/pages/api/chat.ts): `src/pages/api/chat.ts`

### Authentication

- [Login](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/(auth)/login/page.tsx): `src/app/(auth)/login/page.tsx`
- [Registration](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/(auth)/register/page.tsx): `src/app/(auth)/register/page.tsx`
- [Password reset](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/(auth)/reset-password/page.tsx): `src/app/(auth)/reset-password/page.tsx`
- [Session state](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/context/AuthContext.tsx): `src/context/AuthContext.tsx`
- [Route guard](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/components/ProtectedRoute.tsx): `src/components/ProtectedRoute.tsx`

### Administration

- [Dashboard overview](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/dashboard/page.tsx): `src/app/dashboard/page.tsx`
- [Add institution](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/dashboard/(institution)/add-institution/page.tsx): `src/app/dashboard/(institution)/add-institution/page.tsx`
- [Edit institution](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/dashboard/(institution)/edit-institution/%5Bid%5D/page.tsx): `src/app/dashboard/(institution)/edit-institution/[id]/page.tsx`
- [Institution list](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/dashboard/(institution)/institutions/page.tsx): `src/app/dashboard/(institution)/institutions/page.tsx`
- [Analytics](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/dashboard/analytics/page.tsx): `src/app/dashboard/analytics/page.tsx`
- [Dashboard shell](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/dashboard/layout.tsx): `src/app/dashboard/layout.tsx`

### Shared services

- [API mutation hook](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/Hooks/useMutateApi.ts): `src/Hooks/useMutateApi.ts`
- [Theme provider](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/context/ThemeContext.tsx): `src/context/ThemeContext.tsx`
- [MUI theme](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/Style/theme.ts): `src/Style/theme.ts`
- [Color palette](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/Style/GlobalColors.ts): `src/Style/GlobalColors.ts`
- [App root](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/layout.tsx): `src/app/layout.tsx`
- [Color showcase](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/(ui-kit)/colors-mui-components/page.tsx): `src/app/(ui-kit)/colors-mui-components/page.tsx`
- [Form example](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/(ui-kit)/form-usage/page.tsx): `src/app/(ui-kit)/form-usage/page.tsx`
- [Socket example](https://github.com/qassimaltarhouni/unibot-frontend/blob/main/src/app/(ui-kit)/socket-example/page.tsx): `src/app/(ui-kit)/socket-example/page.tsx`

### Other components

- **Visitor**
- **Chat socket service**
- **UniBot backend**

## Connections

- Visitor → Public landing: visits (evidence: `src/app/page.tsx`)
- Public landing → Chat widget: renders
- Chat widget → Chat socket service: connects to (evidence: `src/UI/Chatbot.tsx`)
- Visitor → Login: signs in (evidence: `src/app/(auth)/login/page.tsx`)
- Visitor → Registration: registers (evidence: `src/app/(auth)/register/page.tsx`)
- Login → API mutation hook: submits through (evidence: `src/app/(auth)/login/page.tsx`)
- Registration → API mutation hook: submits through (evidence: `src/app/(auth)/register/page.tsx`)
- Session state → API mutation hook: checks sessions (evidence: `src/context/AuthContext.tsx`)
- Login → Session state: uses session (evidence: `src/app/(auth)/login/page.tsx`)
- Route guard → Session state: checks access (evidence: `src/components/ProtectedRoute.tsx`)
- API mutation hook → UniBot backend: sends requests (evidence: `src/Hooks/useMutateApi.ts`)
- Dashboard shell → Session state: uses session (evidence: `src/app/dashboard/layout.tsx`)
- Dashboard shell → Theme provider: uses theme (evidence: `src/app/dashboard/layout.tsx`)
- Dashboard shell → API mutation hook: requests data (evidence: `src/app/dashboard/layout.tsx`)
- Dashboard overview → API mutation hook: requests data (evidence: `src/app/dashboard/page.tsx`)
- Add institution → API mutation hook: submits through (evidence: `src/app/dashboard/(institution)/add-institution/page.tsx`)
- Edit institution → API mutation hook: submits through (evidence: `src/app/dashboard/(institution)/edit-institution/[id]/page.tsx`)
- Institution list → API mutation hook: requests data (evidence: `src/app/dashboard/(institution)/institutions/page.tsx`)
- Theme provider → MUI theme: creates theme (evidence: `src/context/ThemeContext.tsx`)
- MUI theme → Color palette: uses palette (evidence: `src/Style/theme.ts`)
- App root → Session state: provides context (evidence: `src/app/layout.tsx`)
- App root → Theme provider: provides theme (evidence: `src/app/layout.tsx`)
- Form example → API mutation hook: demonstrates use (evidence: `src/app/(ui-kit)/form-usage/page.tsx`)