# nithish-git04/fullstackwebapp architecture

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

- Interactive diagram: https://gitdiagram.com/nithish-git04/fullstackwebapp
- Repository: https://github.com/nithish-git04/fullstackwebapp

## Overview

This repository implements student, course, and enrollment management with authentication, exposed through a FastAPI backend and two browser clients. The React workflow routes users to protected list and detail pages, where query/mutation hooks communicate with the API; the backend registers separate auth and domain routers. The sampled source confirms enrollment requests and React routing, but does not show backend router internals or most page-to-component wiring, so those links are kept conservative.

Main entry points: [`frontend-react/src/App.jsx`](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/App.jsx) (App routing), [`backend/main.py`](https://github.com/nithish-git04/fullstackwebapp/blob/main/backend/main.py) (FastAPI app), [`frontend-react/src/api.jsx`](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/api.jsx) (API client), [`frontend-vanillaJS/main.js`](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-vanillaJS/main.js) (Vanilla entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_react["React client"]
  node_app["App routing<br/>[App.jsx]"]
  node_authstate["Auth state<br/>[AuthContext.jsx]"]
  node_login["Login and signup<br/>[LoginPage.jsx]"]
  node_studentpages["Student pages<br/>[StudentsPage.jsx]"]
  node_coursepages["Course pages<br/>[CoursesPage.jsx]"]
  node_enrollmentpage["Enrollment page"]
  node_details["Detail pages"]
  node_managers["Record managers<br/>[StudentManager.jsx]"]
  node_lists["Record lists<br/>[StudentList.jsx]"]
  node_hooks["Data hooks<br/>[useEnrollments.js]"]
  node_createenrollment["Create enrollment"]
  node_apihelper["API client<br/>[api.jsx]"]
end

subgraph group_api["Backend API"]
  node_backend["FastAPI app<br/>[main.py]"]
  node_authrouter["Auth routes<br/>[auth.py]"]
  node_studentrouter["Student routes<br/>[students.py]"]
  node_courserouter["Course routes<br/>[courses.py]"]
  node_enrollmentrouter["Enrollment routes<br/>[enrollments.py]"]
  node_models["Domain models<br/>[models.py]"]
  node_databases[("Database setup<br/>[databases.py]")]
end

subgraph group_vanilla["Vanilla client"]
  node_vanillamain["Vanilla entry<br/>[main.js]"]
  node_vanillaauth["Vanilla auth<br/>[auth.js]"]
end

node_user(("User"))

node_user -->|"uses"| node_app
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_studentpages
node_app -->|"routes to"| node_coursepages
node_app -->|"routes to"| node_enrollmentpage
node_app -->|"routes to"| node_details
node_app -->|"reads auth"| node_authstate
node_hooks -->|"requests through"| node_apihelper
node_createenrollment -->|"posts through"| node_apihelper
node_apihelper -->|"sends requests"| node_backend
node_backend -->|"registers"| node_authrouter
node_backend -->|"registers"| node_studentrouter
node_backend -->|"registers"| node_courserouter
node_backend -->|"registers"| node_enrollmentrouter
node_vanillamain -->|"accepts input"| node_user
node_vanillamain -->|"calls"| node_vanillaauth

click node_app "https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/App.jsx"
click node_authstate "https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/AuthContext.jsx"
click node_login "https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/Page/LoginPage.jsx"
click node_studentpages "https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/Page/StudentsPage.jsx"
click node_coursepages "https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/Page/CoursesPage.jsx"
click node_enrollmentpage "https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/Page/EnrollmentsPage.jsx"
click node_details "https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/Detail_Page/StudentDetailPage.jsx"
click node_managers "https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/Manager/StudentManager.jsx"
click node_lists "https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/List/StudentList.jsx"
click node_hooks "https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/Hooks/useEnrollments.js"
click node_createenrollment "https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/Hooks/useCreateEnrollment.js"
click node_apihelper "https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/api.jsx"
click node_backend "https://github.com/nithish-git04/fullstackwebapp/blob/main/backend/main.py"
click node_authrouter "https://github.com/nithish-git04/fullstackwebapp/blob/main/backend/routers/auth.py"
click node_studentrouter "https://github.com/nithish-git04/fullstackwebapp/blob/main/backend/routers/students.py"
click node_courserouter "https://github.com/nithish-git04/fullstackwebapp/blob/main/backend/routers/courses.py"
click node_enrollmentrouter "https://github.com/nithish-git04/fullstackwebapp/blob/main/backend/routers/enrollments.py"
click node_models "https://github.com/nithish-git04/fullstackwebapp/blob/main/backend/models.py"
click node_databases "https://github.com/nithish-git04/fullstackwebapp/blob/main/backend/databases.py"
click node_vanillamain "https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-vanillaJS/main.js"
click node_vanillaauth "https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-vanillaJS/auth.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_authstate,node_login,node_studentpages,node_coursepages,node_enrollmentpage,node_details,node_managers,node_lists,node_hooks,node_createenrollment,node_apihelper,node_user toneBlue
class node_backend,node_authrouter,node_studentrouter,node_courserouter,node_enrollmentrouter,node_models,node_databases toneAmber
class node_vanillamain,node_vanillaauth toneMint
```

## Components

### React client

- [App routing](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/App.jsx): `frontend-react/src/App.jsx`
- [Auth state](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/AuthContext.jsx): `frontend-react/src/AuthContext.jsx`
- [Login and signup](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/Page/LoginPage.jsx): `frontend-react/src/Page/LoginPage.jsx`
- [Student pages](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/Page/StudentsPage.jsx): `frontend-react/src/Page/StudentsPage.jsx`
- [Course pages](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/Page/CoursesPage.jsx): `frontend-react/src/Page/CoursesPage.jsx`
- [Enrollment page](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/Page/EnrollmentsPage.jsx): `frontend-react/src/Page/EnrollmentsPage.jsx`
- [Detail pages](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/Detail_Page/StudentDetailPage.jsx): `frontend-react/src/Detail_Page/StudentDetailPage.jsx`
- [Record managers](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/Manager/StudentManager.jsx): `frontend-react/src/Manager/StudentManager.jsx`
- [Record lists](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/List/StudentList.jsx): `frontend-react/src/List/StudentList.jsx`
- [Data hooks](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/Hooks/useEnrollments.js): `frontend-react/src/Hooks/useEnrollments.js`
- [Create enrollment](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/Hooks/useCreateEnrollment.js): `frontend-react/src/Hooks/useCreateEnrollment.js`
- [API client](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-react/src/api.jsx): `frontend-react/src/api.jsx`

### Backend API

- [FastAPI app](https://github.com/nithish-git04/fullstackwebapp/blob/main/backend/main.py): `backend/main.py`
- [Auth routes](https://github.com/nithish-git04/fullstackwebapp/blob/main/backend/routers/auth.py): `backend/routers/auth.py`
- [Student routes](https://github.com/nithish-git04/fullstackwebapp/blob/main/backend/routers/students.py): `backend/routers/students.py`
- [Course routes](https://github.com/nithish-git04/fullstackwebapp/blob/main/backend/routers/courses.py): `backend/routers/courses.py`
- [Enrollment routes](https://github.com/nithish-git04/fullstackwebapp/blob/main/backend/routers/enrollments.py): `backend/routers/enrollments.py`
- [Domain models](https://github.com/nithish-git04/fullstackwebapp/blob/main/backend/models.py): `backend/models.py`
- [Database setup](https://github.com/nithish-git04/fullstackwebapp/blob/main/backend/databases.py): `backend/databases.py`

### Vanilla client

- [Vanilla entry](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-vanillaJS/main.js): `frontend-vanillaJS/main.js`
- [Vanilla auth](https://github.com/nithish-git04/fullstackwebapp/blob/main/frontend-vanillaJS/auth.js): `frontend-vanillaJS/auth.js`

### Other components

- **User**

## Connections

- User → App routing: uses
- App routing → Login and signup: routes to
- App routing → Student pages: routes to
- App routing → Course pages: routes to
- App routing → Enrollment page: routes to
- App routing → Detail pages: routes to
- App routing → Auth state: reads auth
- Data hooks → API client: requests through
- Create enrollment → API client: posts through
- API client → FastAPI app: sends requests
- FastAPI app → Auth routes: registers
- FastAPI app → Student routes: registers
- FastAPI app → Course routes: registers
- FastAPI app → Enrollment routes: registers
- Vanilla entry → User: accepts input
- Vanilla entry → Vanilla auth: calls