# technowebtech/school-managment-saas-project-fe architecture

> Architecture diagram of the GitHub repository technowebtech/school-managment-saas-project-fe, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/technowebtech/school-managment-saas-project-fe
- Repository: https://github.com/technowebtech/school-managment-saas-project-fe

## Overview

#### Purpose and Runtime
This is a Vite-served React single-page frontend for a broad school/institution management platform. It covers operational modules (academics, admissions, finance, HR), public/marketing surfaces, and platform/tenant administration. No backend, database, deployment manifests, or service implementation is present; APIs, sockets, payments, and public endpoints are client integration boundaries.

Paths: `src/main.jsx`, `src/App.jsx`, `vite.config.js`, `src/lib/api.js`

#### Application Bootstrap and Route Composition
`src/main.jsx` mounts the React application. `App.jsx` is the primary composition and navigation entry point, with route definitions centralized in `routes.config.js`. Feature directories expose module-level route/page composition through their `index.jsx` files; this permits one SPA shell to dispatch into a large module catalog.

Paths: `src/main.jsx`, `src/App.jsx`, `src/routes.config.js`

#### Shell, Navigation, and Cross-Cutting UI
The authenticated application shell is built around `Layout.jsx`, navigation groups, command palette/search, notifications, and reusable page/form primitives. `NavGroups.jsx` and `searchIndex.js` define discoverability metadata independently from feature page implementations. Shared `CrudPage`, `ModulePage`, and `DynamicForm` components provide a common presentation pattern across modules.

Paths: `src/components/Layout.jsx`, `src/data/NavGroups.jsx`, `src/components/CrudPage.jsx`

#### Session, Authorization, and Global State
React contexts provide app-wide boundaries for authentication, theme, confirmation/prompt modals, loading/preloader state, and notifications. Authentication-aware routing/rendering is supported by auth pages and access-denied UI; user administration and RBAC are separate operational features.

Paths: `src/context/AuthContext.jsx`, `src/components/AccessDenied.jsx`, `src/features/users/RolePermissions.jsx`

#### Domain Feature Modules
`src/features` is the principal domain boundary. Most modules are isolated route/page bundles, commonly with dashboards, reports, settings, and transactional workflows. High-detail domains include academics, admissions, accounting, assessment, students, and AI. Their module `index.jsx` files are the integration seam to the route layer, while feature-specific pages own the workflows.

Paths: `src/features/academics/index.jsx`, `src/features/admission/index.jsx`, `src/features/accounting/index.jsx`

#### Specialized Interactive Flows
Assessment contains test delivery, paper building, media, proctoring, and exam-security concerns; student pages include profile-specific routing. Public and marketing feature sets form distinct unauthenticated/site-facing surfaces rather than extensions of the administrative shell.

Paths: `src/features/assessment/TestRunner.jsx`, `src/features/assessment/useExamSecurity.js`, `src/features/publicSite/index.jsx`

#### Multi-Tenant Platform Administration and Integrations
Platform administration models tenant-level controls such as subscriptions, domains, feature flags, branding, localization, limits, clusters, and secrets. Browser-side integration adapters provide API/public API access, WebSocket connectivity, payment-provider definitions, downloads, tenant-subdomain resolution, and master-data/resource hooks. External service contracts are not visible in this repository.

Paths: `src/features/platform/PlatformLayout.jsx`, `src/features/platform/Tenants.jsx`, `src/lib/socket.js`

Main entry points: [`src/routes.config.js`](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/routes.config.js) (Route catalog), [`src/lib/api.js`](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/lib/api.js) (API boundary), [`src/components/Layout.jsx`](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/components/Layout.jsx) (Authenticated layout), [`src/App.jsx`](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/App.jsx) (App composition)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_bootstrap["SPA Composition"]
  node_vite{{"Vite dev server<br/>build runtime<br/>[vite.config.js]"}}
  node_main["React mount<br/>bootstrap<br/>[main.jsx]"]
  node_app["App composition<br/>SPA root<br/>[App.jsx]"]
  node_routes["Route catalog<br/>routing config<br/>[routes.config.js]"]
end

subgraph group_shell["Application Shell"]
  node_auth["Auth session context<br/>global state<br/>[AuthContext.jsx]"]
  node_layout["Authenticated layout<br/>application shell<br/>[Layout.jsx]"]
  node_navigation["Navigation metadata<br/>discoverability<br/>[NavGroups.jsx]"]
  node_shared_ui["CRUD and form primitives<br/>shared UI<br/>[CrudPage.jsx]"]
  node_access_denied["Access denied UI<br/>authorization UI<br/>[AccessDenied.jsx]"]
end

subgraph group_domains["Domain Modules"]
  node_academics["Academics module<br/>feature routes<br/>[index.jsx]"]
  node_admission["Admissions module<br/>feature routes<br/>[index.jsx]"]
  node_accounting["Accounting module<br/>feature routes<br/>[index.jsx]"]
  node_other_domains["Other operational modules<br/>feature catalog"]
  node_assessment["Assessment delivery<br/>interactive workflow<br/>[TestRunner.jsx]"]
  node_exam_security["Exam security<br/>assessment guard<br/>[useExamSecurity.js]"]
  node_public_site["Public and marketing site<br/>unauthenticated surface<br/>[index.jsx]"]
end

subgraph group_platform["Platform &amp; Integrations"]
  node_platform_admin["Platform administration<br/>tenant administration<br/>[PlatformLayout.jsx]"]
  node_tenant_management["Tenant management<br/>platform workflow<br/>[Tenants.jsx]"]
  node_api{{"API boundary<br/>client adapter<br/>[api.js]"}}
  node_socket{{"WebSocket boundary<br/>client adapter<br/>[socket.js]"}}
  node_external_services{{"External services<br/>integration contracts"}}
end

node_vite -->|"serves"| node_main
node_main -->|"mounts"| node_app
node_app -->|"loads"| node_routes
node_app -->|"uses"| node_auth
node_routes -->|"authenticated routes"| node_layout
node_routes -->|"public routes"| node_public_site
node_auth -->|"session state"| node_layout
node_auth -->|"denies access"| node_access_denied
node_layout -->|"renders"| node_navigation
node_layout -->|"shares UI pattern"| node_shared_ui
node_routes -->|"dispatches"| node_academics
node_routes -->|"dispatches"| node_admission
node_routes -->|"dispatches"| node_accounting
node_routes -->|"dispatches"| node_other_domains
node_routes -->|"dispatches"| node_assessment
node_assessment -->|"protects delivery"| node_exam_security
node_routes -->|"dispatches"| node_platform_admin
node_platform_admin -->|"manages"| node_tenant_management
node_academics -.->|"client requests"| node_api
node_admission -.->|"client requests"| node_api
node_accounting -.->|"client requests"| node_api
node_other_domains -.->|"client requests"| node_api
node_platform_admin -.->|"client requests"| node_api
node_assessment -.->|"real-time events"| node_socket
node_api -.->|"HTTP contracts"| node_external_services
node_socket -.->|"real-time contracts"| node_external_services

click node_vite "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/vite.config.js"
click node_main "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/main.jsx"
click node_app "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/App.jsx"
click node_routes "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/routes.config.js"
click node_auth "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/context/AuthContext.jsx"
click node_layout "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/components/Layout.jsx"
click node_navigation "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/data/NavGroups.jsx"
click node_shared_ui "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/components/CrudPage.jsx"
click node_access_denied "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/components/AccessDenied.jsx"
click node_academics "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/features/academics/index.jsx"
click node_admission "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/features/admission/index.jsx"
click node_accounting "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/features/accounting/index.jsx"
click node_assessment "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/features/assessment/TestRunner.jsx"
click node_exam_security "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/features/assessment/useExamSecurity.js"
click node_public_site "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/features/publicSite/index.jsx"
click node_platform_admin "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/features/platform/PlatformLayout.jsx"
click node_tenant_management "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/features/platform/Tenants.jsx"
click node_api "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/lib/api.js"
click node_socket "https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/lib/socket.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_vite,node_main,node_app,node_routes toneBlue
class node_auth,node_layout,node_navigation,node_shared_ui,node_access_denied toneAmber
class node_academics,node_admission,node_accounting,node_other_domains,node_assessment,node_exam_security,node_public_site toneMint
class node_platform_admin,node_tenant_management,node_api,node_socket,node_external_services toneRose
```

## Components

### SPA Composition

- [Vite dev server](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/vite.config.js): build runtime · Serves the React SPA. · `vite.config.js`
- [React mount](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/main.jsx): bootstrap · `src/main.jsx`
- [App composition](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/App.jsx): SPA root · `src/App.jsx`
- [Route catalog](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/routes.config.js): routing config · Central route definitions dispatch into feature bundles. · `src/routes.config.js`

### Application Shell

- [Auth session context](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/context/AuthContext.jsx): global state · Provides authentication-aware application state. · `src/context/AuthContext.jsx`
- [Authenticated layout](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/components/Layout.jsx): application shell · Hosts navigation and shared authenticated UI. · `src/components/Layout.jsx`
- [Navigation metadata](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/data/NavGroups.jsx): discoverability · Navigation groups and search metadata are maintained apart from pages. · `src/data/NavGroups.jsx`
- [CRUD and form primitives](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/components/CrudPage.jsx): shared UI · Common module page, CRUD, and dynamic-form presentation pattern. · `src/components/CrudPage.jsx`
- [Access denied UI](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/components/AccessDenied.jsx): authorization UI · `src/components/AccessDenied.jsx`

### Domain Modules

- [Academics module](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/features/academics/index.jsx): feature routes · `src/features/academics/index.jsx`
- [Admissions module](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/features/admission/index.jsx): feature routes · `src/features/admission/index.jsx`
- [Accounting module](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/features/accounting/index.jsx): feature routes · `src/features/accounting/index.jsx`
- **Other operational modules**: feature catalog · Includes students, HR, reports, settings, and related workflows.
- [Assessment delivery](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/features/assessment/TestRunner.jsx): interactive workflow · Test delivery, paper building, media, and proctoring flows. · `src/features/assessment/TestRunner.jsx`
- [Exam security](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/features/assessment/useExamSecurity.js): assessment guard · `src/features/assessment/useExamSecurity.js`
- [Public and marketing site](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/features/publicSite/index.jsx): unauthenticated surface · Separate site-facing feature composition. · `src/features/publicSite/index.jsx`

### Platform & Integrations

- [Platform administration](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/features/platform/PlatformLayout.jsx): tenant administration · Tenant subscriptions, domains, flags, branding, limits, clusters, and secrets. · `src/features/platform/PlatformLayout.jsx`
- [Tenant management](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/features/platform/Tenants.jsx): platform workflow · `src/features/platform/Tenants.jsx`
- [API boundary](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/lib/api.js): client adapter · Browser-side contract to unavailable backend and public APIs. · `src/lib/api.js`
- [WebSocket boundary](https://github.com/technowebtech/school-managment-saas-project-fe/blob/main/src/lib/socket.js): client adapter · Browser-side real-time integration boundary. · `src/lib/socket.js`
- **External services**: integration contracts · Payment, public endpoint, and backend contracts are outside this repository.

## Connections

- Vite dev server → React mount: serves
- React mount → App composition: mounts
- App composition → Route catalog: loads
- App composition → Auth session context: uses
- Route catalog → Authenticated layout: authenticated routes
- Route catalog → Public and marketing site: public routes
- Auth session context → Authenticated layout: session state
- Auth session context → Access denied UI: denies access
- Authenticated layout → Navigation metadata: renders
- Authenticated layout → CRUD and form primitives: shares UI pattern
- Route catalog → Academics module: dispatches
- Route catalog → Admissions module: dispatches
- Route catalog → Accounting module: dispatches
- Route catalog → Other operational modules: dispatches
- Route catalog → Assessment delivery: dispatches
- Assessment delivery → Exam security: protects delivery
- Route catalog → Platform administration: dispatches
- Platform administration → Tenant management: manages
- Academics module → API boundary: client requests
- Admissions module → API boundary: client requests
- Accounting module → API boundary: client requests
- Other operational modules → API boundary: client requests
- Platform administration → API boundary: client requests
- Assessment delivery → WebSocket boundary: real-time events
- API boundary → External services: HTTP contracts
- WebSocket boundary → External services: real-time contracts