# ayushsrivastava1818/webdev-project-1043-1048- architecture

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

- Interactive diagram: https://gitdiagram.com/ayushsrivastava1818/webdev-project-1043-1048-
- Repository: https://github.com/ayushsrivastava1818/webdev-project-1043-1048-

## Overview

SchoolHub combines public school information and admissions with a student portal for attendance and exam results. Visitors navigate the React site to read school pages, search notices, or submit enquiries; students log in and view their portal data. The frontend service layer communicates with Flask, which queries PostgreSQL. README documents the broader features and three-tier flow; sampled source confirms selected routes and calls, but not every backend handler implementation.

Main entry points: [`frontend/src/services/api.js`](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/services/api.js) (Frontend API Service), [`frontend/src/App.jsx`](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/App.jsx) (React Router App), [`frontend/src/pages/Home.jsx`](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/Home.jsx) (Home Page), [`frontend/src/pages/Notices.jsx`](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/Notices.jsx) (Notice Board)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public School Website"]
  node_app["React Router App<br/>[App.jsx]"]
  node_navbar["Navigation Drawer<br/>[Navbar.jsx]"]
  node_footer["School Footer<br/>[Footer.jsx]"]
  node_home["Home Page<br/>[Home.jsx]"]
  node_about["About Page<br/>[About.jsx]"]
  node_academics["Academics Page<br/>[Academics.jsx]"]
  node_facilities["Facilities Page<br/>[Facilities.jsx]"]
  node_facilitycard["Facility Card<br/>[FacilityCard.jsx]"]
  node_notices["Notice Board<br/>[Notices.jsx]"]
  node_noticecard["Notice Card<br/>[NoticeCard.jsx]"]
  node_contact["Contact and Admissions<br/>[Contact.jsx]"]
end

subgraph group_portal["Student Portal"]
  node_login["Student Login<br/>[StudentLogin.jsx]"]
  node_dashboard["Student Dashboard"]
end

subgraph group_services["Application Services"]
  node_clientapi["Frontend API Service<br/>[api.js]"]
  node_flask["Flask REST API<br/>[app.py]"]
  node_noticeapi["Notice Endpoints<br/>[app.py]"]
  node_contactapi["Enquiry Endpoint<br/>[app.py]"]
  node_authapi["Login Endpoint<br/>[app.py]"]
  node_profileapi["Profile Endpoint<br/>[app.py]"]
  node_resultsapi["Results Endpoint<br/>[app.py]"]
  node_attendanceapi["Attendance Endpoint<br/>[app.py]"]
end

subgraph group_data["Persistence"]
  node_dbmodule["Database Access<br/>[database.py]"]
  node_postgres[("SchoolHub Database")]
end

node_visitor(("Visitor or Student"))

node_visitor -->|"uses"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_footer
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_about
node_app -->|"routes to"| node_academics
node_app -->|"routes to"| node_facilities
node_app -->|"routes to"| node_notices
node_app -->|"routes to"| node_contact
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_dashboard
node_facilities -->|"renders"| node_facilitycard
node_home -->|"fetches latest notices"| node_clientapi
node_home -->|"renders"| node_noticecard
node_notices -->|"fetches notices"| node_clientapi
node_notices -->|"renders"| node_noticecard
node_contact -->|"submits enquiry"| node_clientapi
node_login -->|"authenticates"| node_clientapi
node_dashboard -->|"loads portal data"| node_clientapi
node_clientapi -->|"HTTP JSON"| node_flask
node_clientapi -->|"requests notices"| node_noticeapi
node_clientapi -->|"posts enquiry"| node_contactapi
node_clientapi -->|"posts credentials"| node_authapi
node_clientapi -->|"requests profile"| node_profileapi
node_clientapi -->|"requests results"| node_resultsapi
node_clientapi -->|"requests attendance"| node_attendanceapi
node_flask -->|"gets connection"| node_dbmodule
node_dbmodule -->|"queries"| node_postgres

click node_app "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/App.jsx"
click node_navbar "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/components/Navbar.jsx"
click node_footer "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/components/Footer.jsx"
click node_home "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/Home.jsx"
click node_about "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/About.jsx"
click node_academics "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/Academics.jsx"
click node_facilities "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/Facilities.jsx"
click node_facilitycard "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/components/FacilityCard.jsx"
click node_notices "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/Notices.jsx"
click node_noticecard "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/components/NoticeCard.jsx"
click node_contact "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/Contact.jsx"
click node_login "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/StudentLogin.jsx"
click node_dashboard "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/StudentDashboard.jsx"
click node_clientapi "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/services/api.js"
click node_flask "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/backend/app.py"
click node_noticeapi "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/backend/app.py"
click node_contactapi "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/backend/app.py"
click node_authapi "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/backend/app.py"
click node_profileapi "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/backend/app.py"
click node_resultsapi "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/backend/app.py"
click node_attendanceapi "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/backend/app.py"
click node_dbmodule "https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/backend/database.py"

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_navbar,node_footer,node_home,node_about,node_academics,node_facilities,node_facilitycard,node_notices,node_noticecard,node_contact toneBlue
class node_login,node_dashboard toneAmber
class node_clientapi,node_flask,node_noticeapi,node_contactapi,node_authapi,node_profileapi,node_resultsapi,node_attendanceapi toneMint
class node_dbmodule,node_postgres toneRose
class node_visitor toneIndigo
```

## Components

### Public School Website

- [React Router App](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Navigation Drawer](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/components/Navbar.jsx): `frontend/src/components/Navbar.jsx`
- [School Footer](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/components/Footer.jsx): `frontend/src/components/Footer.jsx`
- [Home Page](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/Home.jsx): `frontend/src/pages/Home.jsx`
- [About Page](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/About.jsx): `frontend/src/pages/About.jsx`
- [Academics Page](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/Academics.jsx): `frontend/src/pages/Academics.jsx`
- [Facilities Page](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/Facilities.jsx): `frontend/src/pages/Facilities.jsx`
- [Facility Card](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/components/FacilityCard.jsx): `frontend/src/components/FacilityCard.jsx`
- [Notice Board](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/Notices.jsx): `frontend/src/pages/Notices.jsx`
- [Notice Card](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/components/NoticeCard.jsx): `frontend/src/components/NoticeCard.jsx`
- [Contact and Admissions](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/Contact.jsx): `frontend/src/pages/Contact.jsx`

### Student Portal

- [Student Login](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/StudentLogin.jsx): `frontend/src/pages/StudentLogin.jsx`
- [Student Dashboard](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/pages/StudentDashboard.jsx): `frontend/src/pages/StudentDashboard.jsx`

### Application Services

- [Frontend API Service](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/frontend/src/services/api.js): `frontend/src/services/api.js`
- [Flask REST API](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/backend/app.py): `backend/app.py`
- [Notice Endpoints](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/backend/app.py): `backend/app.py`
- [Enquiry Endpoint](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/backend/app.py): `backend/app.py`
- [Login Endpoint](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/backend/app.py): `backend/app.py`
- [Profile Endpoint](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/backend/app.py): `backend/app.py`
- [Results Endpoint](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/backend/app.py): `backend/app.py`
- [Attendance Endpoint](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/backend/app.py): `backend/app.py`

### Persistence

- [Database Access](https://github.com/ayushsrivastava1818/webdev-project-1043-1048-/blob/main/backend/database.py): `backend/database.py`
- **SchoolHub Database**

### Other components

- **Visitor or Student**

## Connections

- Visitor or Student → React Router App: uses (evidence: `README.md`)
- React Router App → Navigation Drawer: renders (evidence: `frontend/src/App.jsx`)
- React Router App → School Footer: renders (evidence: `frontend/src/App.jsx`)
- React Router App → Home Page: routes to (evidence: `frontend/src/App.jsx`)
- React Router App → About Page: routes to (evidence: `frontend/src/App.jsx`)
- React Router App → Academics Page: routes to (evidence: `frontend/src/App.jsx`)
- React Router App → Facilities Page: routes to (evidence: `frontend/src/App.jsx`)
- React Router App → Notice Board: routes to (evidence: `frontend/src/App.jsx`)
- React Router App → Contact and Admissions: routes to (evidence: `frontend/src/App.jsx`)
- React Router App → Student Login: routes to (evidence: `frontend/src/App.jsx`)
- React Router App → Student Dashboard: routes to (evidence: `frontend/src/App.jsx`)
- Facilities Page → Facility Card: renders (evidence: `frontend/src/pages/Facilities.jsx`)
- Home Page → Frontend API Service: fetches latest notices (evidence: `frontend/src/pages/Home.jsx`)
- Home Page → Notice Card: renders (evidence: `frontend/src/pages/Home.jsx`)
- Notice Board → Frontend API Service: fetches notices (evidence: `frontend/src/pages/Notices.jsx`)
- Notice Board → Notice Card: renders (evidence: `frontend/src/pages/Notices.jsx`)
- Contact and Admissions → Frontend API Service: submits enquiry (evidence: `frontend/src/pages/Contact.jsx`)
- Student Login → Frontend API Service: authenticates (evidence: `frontend/src/pages/StudentLogin.jsx`)
- Student Dashboard → Frontend API Service: loads portal data (evidence: `frontend/src/pages/StudentDashboard.jsx`)
- Frontend API Service → Flask REST API: HTTP JSON (evidence: `README.md`)
- Frontend API Service → Notice Endpoints: requests notices (evidence: `frontend/src/services/api.js`)
- Frontend API Service → Enquiry Endpoint: posts enquiry (evidence: `frontend/src/services/api.js`)
- Frontend API Service → Login Endpoint: posts credentials (evidence: `frontend/src/services/api.js`)
- Frontend API Service → Profile Endpoint: requests profile (evidence: `frontend/src/services/api.js`)
- Frontend API Service → Results Endpoint: requests results (evidence: `frontend/src/services/api.js`)
- Frontend API Service → Attendance Endpoint: requests attendance (evidence: `frontend/src/services/api.js`)
- Flask REST API → Database Access: gets connection (evidence: `backend/app.py`)
- Database Access → SchoolHub Database: queries (evidence: `README.md`)