# suruchi1199/visualiseit_frontend architecture

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

- Interactive diagram: https://gitdiagram.com/suruchi1199/visualiseit_frontend
- Repository: https://github.com/suruchi1199/visualiseit_frontend

## Overview

EduVision is a React learning interface with account access, class and subject browsing, lesson detail pages, and interactive math visualizations. The apparent learner journey is sign in, choose a class, browse its subjects and chapters or topics, then view learning content or graphing tools. Authentication state is persisted in browser storage, while authentication, catalog, and settings code targets an external API. Page-level data wiring and several routes’ implementations were not sampled, so those connections are not asserted here.

Main entry points: [`src/App.js`](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/App.js) (Route App), [`src/context/AuthContext.jsx`](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/context/AuthContext.jsx) (Auth Context), [`src/pages/Settings.jsx`](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/Settings.jsx) (Settings), [`src/pages/Home.jsx`](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/Home.jsx) (Home and Auth Forms)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App Navigation"]
  node_app["Route App<br/>[App.js]"]
  node_home["Home and Auth Forms<br/>[Home.jsx]"]
  node_profile_menu["Profile Menu<br/>[ProfileMenu.jsx]"]
end

subgraph group_identity["Account and Settings"]
  node_auth_context["Auth Context<br/>[AuthContext.jsx]"]
  node_settings["Settings<br/>[Settings.jsx]"]
  node_browser_storage[("Browser Local Storage")]
end

subgraph group_learning["Learning Content"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_classes["Classes<br/>[Classes.jsx]"]
  node_subjects["Subject List<br/>[Subjects.jsx]"]
  node_subject_detail["Subject Detail<br/>[SubjectDetail.jsx]"]
  node_chapter_detail["Chapter Detail<br/>[ChapterDetail.jsx]"]
  node_topic_detail["Topic Detail<br/>[TopicDetail.jsx]"]
  node_class_concept["Class Concepts<br/>[ClassConcept.jsx]"]
  node_content_api["Content API Client<br/>[api.js]"]
end

subgraph group_visuals["Interactive Math"]
  node_visual_display["Visualization Display"]
  node_graph_plot["Graph Plotting<br/>[Graphplotting.jsx]"]
  node_visual_registry["Visualization Registry"]
  node_class9["Class 9 Visualizers"]
end

node_learner(("Learner"))
node_backend_api["Backend API"]

node_learner -->|"opens"| node_app
node_app -->|"routes"| node_home
node_app -->|"routes"| node_dashboard
node_app -->|"routes"| node_classes
node_app -->|"routes"| node_subjects
node_app -->|"routes"| node_subject_detail
node_app -->|"routes"| node_chapter_detail
node_app -->|"routes"| node_topic_detail
node_app -->|"routes"| node_graph_plot
node_app -->|"routes"| node_settings
node_app -->|"provides"| node_auth_context
node_home -->|"signs in"| node_auth_context
node_profile_menu -->|"logs out"| node_auth_context
node_settings -->|"updates profile"| node_auth_context
node_auth_context -->|"reads and writes"| node_browser_storage
node_auth_context -->|"auth requests"| node_backend_api
node_settings -->|"account requests"| node_backend_api
node_content_api -->|"content requests"| node_backend_api
node_app -->|"loads visualizer"| node_class9
node_chapter_detail -.->|"relationship unclear"| node_visual_display

click node_app "https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/App.js"
click node_home "https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/Home.jsx"
click node_dashboard "https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/Dashboard.jsx"
click node_classes "https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/Classes.jsx"
click node_subjects "https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/Subjects.jsx"
click node_subject_detail "https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/SubjectDetail.jsx"
click node_chapter_detail "https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/ChapterDetail.jsx"
click node_topic_detail "https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/TopicDetail.jsx"
click node_class_concept "https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/ClassConcept.jsx"
click node_visual_display "https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/components/VisualizationDisplay.jsx"
click node_graph_plot "https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/Graphplotting.jsx"
click node_visual_registry "https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/data/visualizationRegistry.js"
click node_class9 "https://github.com/suruchi1199/visualiseit_frontend/tree/main/src/class9"
click node_auth_context "https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/context/AuthContext.jsx"
click node_settings "https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/Settings.jsx"
click node_profile_menu "https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/components/ProfileMenu.jsx"
click node_content_api "https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/data/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_home,node_profile_menu toneBlue
class node_auth_context,node_settings,node_browser_storage toneAmber
class node_dashboard,node_classes,node_subjects,node_subject_detail,node_chapter_detail,node_topic_detail,node_class_concept,node_content_api,node_backend_api toneMint
class node_visual_display,node_graph_plot,node_visual_registry,node_class9 toneRose
class node_learner toneIndigo
```

## Components

### App Navigation

- [Route App](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/App.js): `src/App.js`
- [Home and Auth Forms](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Profile Menu](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/components/ProfileMenu.jsx): `src/components/ProfileMenu.jsx`

### Account and Settings

- [Auth Context](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Settings](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/Settings.jsx): `src/pages/Settings.jsx`
- **Browser Local Storage**

### Learning Content

- [Dashboard](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/Dashboard.jsx): `src/pages/Dashboard.jsx`
- [Classes](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/Classes.jsx): `src/pages/Classes.jsx`
- [Subject List](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/Subjects.jsx): `src/pages/Subjects.jsx`
- [Subject Detail](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/SubjectDetail.jsx): `src/pages/SubjectDetail.jsx`
- [Chapter Detail](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/ChapterDetail.jsx): `src/pages/ChapterDetail.jsx`
- [Topic Detail](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/TopicDetail.jsx): `src/pages/TopicDetail.jsx`
- [Class Concepts](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/ClassConcept.jsx): `src/pages/ClassConcept.jsx`
- [Content API Client](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/data/api.js): `src/data/api.js`

### Interactive Math

- [Visualization Display](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/components/VisualizationDisplay.jsx): `src/components/VisualizationDisplay.jsx`
- [Graph Plotting](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/pages/Graphplotting.jsx): `src/pages/Graphplotting.jsx`
- [Visualization Registry](https://github.com/suruchi1199/visualiseit_frontend/blob/main/src/data/visualizationRegistry.js): `src/data/visualizationRegistry.js`
- [Class 9 Visualizers](https://github.com/suruchi1199/visualiseit_frontend/tree/main/src/class9): `src/class9`

### Other components

- **Learner**
- **Backend API**

## Connections

- Learner → Route App: opens
- Route App → Home and Auth Forms: routes
- Route App → Dashboard: routes
- Route App → Classes: routes
- Route App → Subject List: routes
- Route App → Subject Detail: routes
- Route App → Chapter Detail: routes
- Route App → Topic Detail: routes
- Route App → Graph Plotting: routes
- Route App → Settings: routes
- Route App → Auth Context: provides
- Home and Auth Forms → Auth Context: signs in
- Profile Menu → Auth Context: logs out
- Settings → Auth Context: updates profile
- Auth Context → Browser Local Storage: reads and writes
- Auth Context → Backend API: auth requests
- Settings → Backend API: account requests
- Content API Client → Backend API: content requests
- Route App → Class 9 Visualizers: loads visualizer
- Chapter Detail → Visualization Display: relationship unclear