# srjnnn/school-management architecture

> Architecture diagram of the GitHub repository srjnnn/school-management, 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/srjnnn/school-management
- Repository: https://github.com/srjnnn/school-management

## Overview

This is a browser-based school administration portal built from custom elements. A user enters through the app shell; saved authentication is validated before the app selects a home or login page. Within the portal, the sidebar dispatches users to school-management areas, whose pages fetch or submit data through the API client. The tree and excerpts support attendance, student and teacher management, timetables, class notes, bus details, feedback, and support/settings areas. Several page implementations and the backend contract were not sampled, so their internal wiring is not inferred.

Main entry points: [`src/components/views/Sidebar/index.js`](https://github.com/srjnnn/school-management/blob/main/src/components/views/Sidebar/index.js) (Sidebar navigation), [`src/utils/api.js`](https://github.com/srjnnn/school-management/blob/main/src/utils/api.js) (API client), [`src/App.js`](https://github.com/srjnnn/school-management/blob/main/src/App.js) (App shell), [`src/services/AuthService.js`](https://github.com/srjnnn/school-management/blob/main/src/services/AuthService.js) (Authentication)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry"]
  node_app["App bootstrap<br/>[index.js]"]
  node_app_component["App shell<br/>[App.js]"]
end

subgraph group_navigation["Shell navigation"]
  node_router["Route map<br/>[router.js]"]
  node_home["Home and shell<br/>[index.js]"]
  node_sidebar["Sidebar navigation<br/>[index.js]"]
end

subgraph group_school["School operations"]
  node_dashboard["Dashboard<br/>[index.js]"]
  node_students["Student records<br/>[index.js]"]
  node_teachers["Teacher records<br/>[index.js]"]
  node_attendance["Attendance<br/>[index.js]"]
  node_timetable["Timetable<br/>[index.js]"]
  node_table_view["Timetable editor<br/>[index.js]"]
  node_new_timetable["Create timetable<br/>[index.js]"]
  node_notes["Class notes<br/>[index.js]"]
  node_bus["Bus details<br/>[index.js]"]
  node_feedback["Feedback<br/>[index.js]"]
  node_support["Settings and help<br/>[index.js]"]
end

subgraph group_services["Services"]
  node_auth["Authentication<br/>[AuthService.js]"]
  node_localdb["Local storage wrapper<br/>[LocalDB.js]"]
  node_api["API client<br/>[api.js]"]
end

node_user(("User"))
node_browser_storage[("Browser storage")]
node_server{{"Backend API"}}

node_user -->|"opens"| node_app
node_app -->|"creates"| node_app_component
node_app_component -->|"checks login"| node_auth
node_auth -->|"reads token"| node_localdb
node_auth -->|"validates token"| node_api
node_auth -->|"stores session"| node_browser_storage
node_localdb -->|"reads/writes"| node_browser_storage
node_app_component -->|"selects route"| node_router
node_app_component -->|"loads home"| node_home
node_router -->|"maps page"| node_home
node_home -->|"renders navigation"| node_sidebar
node_sidebar -->|"loads page"| node_dashboard
node_sidebar -->|"loads page"| node_students
node_sidebar -->|"loads page"| node_teachers
node_sidebar -->|"loads page"| node_attendance
node_sidebar -->|"loads page"| node_timetable
node_sidebar -->|"loads page"| node_notes
node_sidebar -->|"loads page"| node_bus
node_sidebar -->|"loads page"| node_feedback
node_sidebar -->|"loads page"| node_support
node_students -->|"fetches/updates"| node_api
node_teachers -->|"fetches/updates"| node_api
node_attendance -->|"fetches/updates"| node_api
node_table_view -->|"fetches/updates"| node_api
node_new_timetable -->|"embeds editor"| node_table_view
node_new_timetable -->|"submits timetable"| node_api
node_api -->|"sends requests"| node_server

click node_app "https://github.com/srjnnn/school-management/blob/main/src/index.js"
click node_app_component "https://github.com/srjnnn/school-management/blob/main/src/App.js"
click node_auth "https://github.com/srjnnn/school-management/blob/main/src/services/AuthService.js"
click node_localdb "https://github.com/srjnnn/school-management/blob/main/src/services/LocalDB.js"
click node_router "https://github.com/srjnnn/school-management/blob/main/src/router.js"
click node_home "https://github.com/srjnnn/school-management/blob/main/src/components/pages/HomePage/index.js"
click node_sidebar "https://github.com/srjnnn/school-management/blob/main/src/components/views/Sidebar/index.js"
click node_dashboard "https://github.com/srjnnn/school-management/blob/main/src/components/pages/Dashboard/index.js"
click node_students "https://github.com/srjnnn/school-management/blob/main/src/components/pages/StudentsPages/index.js"
click node_teachers "https://github.com/srjnnn/school-management/blob/main/src/components/pages/Teachers/index.js"
click node_attendance "https://github.com/srjnnn/school-management/blob/main/src/components/pages/attendencePage/index.js"
click node_timetable "https://github.com/srjnnn/school-management/blob/main/src/components/pages/Timetable/index.js"
click node_table_view "https://github.com/srjnnn/school-management/blob/main/src/components/views/table/index.js"
click node_new_timetable "https://github.com/srjnnn/school-management/blob/main/src/components/views/newTImetable/index.js"
click node_notes "https://github.com/srjnnn/school-management/blob/main/src/components/pages/classNotesPage/index.js"
click node_bus "https://github.com/srjnnn/school-management/blob/main/src/components/pages/busDetailsPage/index.js"
click node_feedback "https://github.com/srjnnn/school-management/blob/main/src/components/pages/feedback/index.js"
click node_support "https://github.com/srjnnn/school-management/blob/main/src/components/pages/settingsPage/index.js"
click node_api "https://github.com/srjnnn/school-management/blob/main/src/utils/api.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_app,node_app_component,node_user toneBlue
class node_router,node_home,node_sidebar,node_browser_storage toneAmber
class node_dashboard,node_students,node_teachers,node_attendance,node_timetable,node_table_view,node_new_timetable,node_notes,node_bus,node_feedback,node_support,node_server toneMint
class node_auth,node_localdb,node_api toneRose
```

## Components

### App entry

- [App bootstrap](https://github.com/srjnnn/school-management/blob/main/src/index.js): `src/index.js`
- [App shell](https://github.com/srjnnn/school-management/blob/main/src/App.js): `src/App.js`

### Shell navigation

- [Route map](https://github.com/srjnnn/school-management/blob/main/src/router.js): `src/router.js`
- [Home and shell](https://github.com/srjnnn/school-management/blob/main/src/components/pages/HomePage/index.js): `src/components/pages/HomePage/index.js`
- [Sidebar navigation](https://github.com/srjnnn/school-management/blob/main/src/components/views/Sidebar/index.js): `src/components/views/Sidebar/index.js`

### School operations

- [Dashboard](https://github.com/srjnnn/school-management/blob/main/src/components/pages/Dashboard/index.js): `src/components/pages/Dashboard/index.js`
- [Student records](https://github.com/srjnnn/school-management/blob/main/src/components/pages/StudentsPages/index.js): `src/components/pages/StudentsPages/index.js`
- [Teacher records](https://github.com/srjnnn/school-management/blob/main/src/components/pages/Teachers/index.js): `src/components/pages/Teachers/index.js`
- [Attendance](https://github.com/srjnnn/school-management/blob/main/src/components/pages/attendencePage/index.js): `src/components/pages/attendencePage/index.js`
- [Timetable](https://github.com/srjnnn/school-management/blob/main/src/components/pages/Timetable/index.js): `src/components/pages/Timetable/index.js`
- [Timetable editor](https://github.com/srjnnn/school-management/blob/main/src/components/views/table/index.js): `src/components/views/table/index.js`
- [Create timetable](https://github.com/srjnnn/school-management/blob/main/src/components/views/newTImetable/index.js): `src/components/views/newTImetable/index.js`
- [Class notes](https://github.com/srjnnn/school-management/blob/main/src/components/pages/classNotesPage/index.js): `src/components/pages/classNotesPage/index.js`
- [Bus details](https://github.com/srjnnn/school-management/blob/main/src/components/pages/busDetailsPage/index.js): `src/components/pages/busDetailsPage/index.js`
- [Feedback](https://github.com/srjnnn/school-management/blob/main/src/components/pages/feedback/index.js): `src/components/pages/feedback/index.js`
- [Settings and help](https://github.com/srjnnn/school-management/blob/main/src/components/pages/settingsPage/index.js): `src/components/pages/settingsPage/index.js`

### Services

- [Authentication](https://github.com/srjnnn/school-management/blob/main/src/services/AuthService.js): `src/services/AuthService.js`
- [Local storage wrapper](https://github.com/srjnnn/school-management/blob/main/src/services/LocalDB.js): `src/services/LocalDB.js`
- [API client](https://github.com/srjnnn/school-management/blob/main/src/utils/api.js): `src/utils/api.js`

### Other components

- **User**
- **Browser storage**
- **Backend API**

## Connections

- User → App bootstrap: opens
- App bootstrap → App shell: creates
- App shell → Authentication: checks login
- Authentication → Local storage wrapper: reads token
- Authentication → API client: validates token
- Authentication → Browser storage: stores session
- Local storage wrapper → Browser storage: reads/writes
- App shell → Route map: selects route
- App shell → Home and shell: loads home
- Route map → Home and shell: maps page
- Home and shell → Sidebar navigation: renders navigation
- Sidebar navigation → Dashboard: loads page
- Sidebar navigation → Student records: loads page
- Sidebar navigation → Teacher records: loads page
- Sidebar navigation → Attendance: loads page
- Sidebar navigation → Timetable: loads page
- Sidebar navigation → Class notes: loads page
- Sidebar navigation → Bus details: loads page
- Sidebar navigation → Feedback: loads page
- Sidebar navigation → Settings and help: loads page
- Student records → API client: fetches/updates
- Teacher records → API client: fetches/updates
- Attendance → API client: fetches/updates
- Timetable editor → API client: fetches/updates
- Create timetable → Timetable editor: embeds editor
- Create timetable → API client: submits timetable
- API client → Backend API: sends requests