# abby06-b/eduapp_react architecture

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

- Interactive diagram: https://gitdiagram.com/abby06-b/eduapp_react
- Repository: https://github.com/abby06-b/eduapp_react

## Overview

EduLearn AI is a browser-based study dashboard for managing learning notes, reviewing generated study material, and creating concept videos. The principal flow is student login, note upload, backend upload with locally generated study data, then review through the dashboard or analytics. The app also synchronizes reel records from a hosted backend and offers JSON-to-MP4 generation with browser speech playback. The README describes only a Vite template; capabilities here are inferred from the sampled React source, so unsampled page internals and backend behavior are not represented.

Main entry points: [`src/App.jsx`](https://github.com/abby06-b/eduapp_react/blob/main/src/App.jsx) (Dashboard app), [`src/pages/Upload.jsx`](https://github.com/abby06-b/eduapp_react/blob/main/src/pages/Upload.jsx) (Note upload), [`src/pages/JsonToMp4.jsx`](https://github.com/abby06-b/eduapp_react/blob/main/src/pages/JsonToMp4.jsx) (JSON-to-MP4), [`src/utils/studyGenerator.js`](https://github.com/abby06-b/eduapp_react/blob/main/src/utils/studyGenerator.js) (Study data generator)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_app["Dashboard app<br/>[App.jsx]"]
  node_login["Login<br/>[Login.jsx]"]
  node_sidebar["Sidebar navigation<br/>[Sidebar.jsx]"]
end

subgraph group_study["Study content"]
  node_home["Home and study review<br/>[Home.jsx]"]
  node_upload["Note upload<br/>[Upload.jsx]"]
  node_generator["Study data generator<br/>[studyGenerator.js]"]
  node_notes[("In-memory notes<br/>[App.jsx]")]
end

subgraph group_learning["Learning tools"]
  node_video["JSON-to-MP4<br/>[JsonToMp4.jsx]"]
  node_analytics["Analytics<br/>[Analytics.jsx]"]
  node_leaderboard["Leaderboard<br/>[Leaderboard.jsx]"]
end

subgraph group_services["External services"]
  node_backend[("EduLearn backend")]
  node_speech["Browser speech synthesis"]
end

node_student(("Student"))

node_student -->|"opens"| node_app
node_app -->|"renders when signed out"| node_login
node_login -->|"submits login result"| node_app
node_app -->|"renders navigation"| node_sidebar
node_sidebar -->|"selects view"| node_app
node_app -->|"renders with notes"| node_home
node_app -->|"renders with notes"| node_upload
node_app -->|"renders video tool"| node_video
node_app -->|"renders with notes"| node_analytics
node_app -->|"renders rankings"| node_leaderboard
node_app -->|"fetches reels"| node_backend
node_backend -->|"returns reel records"| node_app
node_app -->|"generates reel study data"| node_generator
node_generator -->|"provides generated content"| node_notes
node_app -->|"initializes and updates"| node_notes
node_notes -->|"supplies study notes"| node_home
node_home -->|"shows summaries and quizzes"| node_student
node_upload -->|"uploads files"| node_backend
node_upload -->|"generates study data"| node_generator
node_upload -->|"adds uploaded notes"| node_notes
node_video -->|"generates study data"| node_generator
node_video -->|"adds generated video note"| node_notes
node_video -->|"speaks narration"| node_speech
node_notes -->|"supplies note metrics"| node_analytics

click node_app "https://github.com/abby06-b/eduapp_react/blob/main/src/App.jsx"
click node_login "https://github.com/abby06-b/eduapp_react/blob/main/src/pages/Login.jsx"
click node_sidebar "https://github.com/abby06-b/eduapp_react/blob/main/src/components/Sidebar.jsx"
click node_home "https://github.com/abby06-b/eduapp_react/blob/main/src/pages/Home.jsx"
click node_upload "https://github.com/abby06-b/eduapp_react/blob/main/src/pages/Upload.jsx"
click node_generator "https://github.com/abby06-b/eduapp_react/blob/main/src/utils/studyGenerator.js"
click node_notes "https://github.com/abby06-b/eduapp_react/blob/main/src/App.jsx"
click node_video "https://github.com/abby06-b/eduapp_react/blob/main/src/pages/JsonToMp4.jsx"
click node_analytics "https://github.com/abby06-b/eduapp_react/blob/main/src/pages/Analytics.jsx"
click node_leaderboard "https://github.com/abby06-b/eduapp_react/blob/main/src/pages/Leaderboard.jsx"

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_login,node_sidebar toneBlue
class node_home,node_upload,node_generator,node_notes toneAmber
class node_video,node_analytics,node_leaderboard toneMint
class node_backend,node_speech toneRose
class node_student toneIndigo
```

## Components

### App shell

- [Dashboard app](https://github.com/abby06-b/eduapp_react/blob/main/src/App.jsx): `src/App.jsx`
- [Login](https://github.com/abby06-b/eduapp_react/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Sidebar navigation](https://github.com/abby06-b/eduapp_react/blob/main/src/components/Sidebar.jsx): `src/components/Sidebar.jsx`

### Study content

- [Home and study review](https://github.com/abby06-b/eduapp_react/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Note upload](https://github.com/abby06-b/eduapp_react/blob/main/src/pages/Upload.jsx): `src/pages/Upload.jsx`
- [Study data generator](https://github.com/abby06-b/eduapp_react/blob/main/src/utils/studyGenerator.js): `src/utils/studyGenerator.js`
- [In-memory notes](https://github.com/abby06-b/eduapp_react/blob/main/src/App.jsx): `src/App.jsx`

### Learning tools

- [JSON-to-MP4](https://github.com/abby06-b/eduapp_react/blob/main/src/pages/JsonToMp4.jsx): `src/pages/JsonToMp4.jsx`
- [Analytics](https://github.com/abby06-b/eduapp_react/blob/main/src/pages/Analytics.jsx): `src/pages/Analytics.jsx`
- [Leaderboard](https://github.com/abby06-b/eduapp_react/blob/main/src/pages/Leaderboard.jsx): `src/pages/Leaderboard.jsx`

### External services

- **EduLearn backend**
- **Browser speech synthesis**

### Other components

- **Student**

## Connections

- Student → Dashboard app: opens
- Dashboard app → Login: renders when signed out
- Login → Dashboard app: submits login result
- Dashboard app → Sidebar navigation: renders navigation
- Sidebar navigation → Dashboard app: selects view
- Dashboard app → Home and study review: renders with notes
- Dashboard app → Note upload: renders with notes
- Dashboard app → JSON-to-MP4: renders video tool
- Dashboard app → Analytics: renders with notes
- Dashboard app → Leaderboard: renders rankings
- Dashboard app → EduLearn backend: fetches reels
- EduLearn backend → Dashboard app: returns reel records
- Dashboard app → Study data generator: generates reel study data
- Study data generator → In-memory notes: provides generated content
- Dashboard app → In-memory notes: initializes and updates
- In-memory notes → Home and study review: supplies study notes
- Home and study review → Student: shows summaries and quizzes
- Note upload → EduLearn backend: uploads files
- Note upload → Study data generator: generates study data
- Note upload → In-memory notes: adds uploaded notes
- JSON-to-MP4 → Study data generator: generates study data
- JSON-to-MP4 → In-memory notes: adds generated video note
- JSON-to-MP4 → Browser speech synthesis: speaks narration
- In-memory notes → Analytics: supplies note metrics