# anush-kar/dyslexilearn architecture

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

- Interactive diagram: https://gitdiagram.com/anush-kar/dyslexilearn
- Repository: https://github.com/anush-kar/dyslexilearn

## Overview

Dyslexilearn is a React learning app for dyslexia practice, with alphabet, word, sentence, quiz, progress, and chat areas. The principal workflow is learners entering the learning hub, choosing a practice area, and completing exercises; alphabet work supports drawing or uploading an image for backend verification, while word and sentence views include speech actions. Routing and several component relationships are visible in excerpts; other capabilities are identified from the tree and SOURCE INDEX. Authentication and progress behavior are not fully shown, so their backend or persistence relationships are omitted.

Main entry points: [`src/App.jsx`](https://github.com/anush-kar/dyslexilearn/blob/main/src/App.jsx) (Route Dispatcher), [`src/pages/AlphabetPage.jsx`](https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/AlphabetPage.jsx) (Alphabet Practice), [`src/pages/Learn.jsx`](https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/Learn.jsx) (Learning Hub), [`src/pages/WordsPage.jsx`](https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/WordsPage.jsx) (Word Practice)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App Navigation"]
  node_app["Route Dispatcher<br/>[App.jsx]"]
  node_learn["Learning Hub<br/>[Learn.jsx]"]
  node_navbar["Navigation Bar<br/>[Navbar.jsx]"]
end

subgraph group_practice["Learning Practice"]
  node_alphabet["Alphabet Practice<br/>[AlphabetPage.jsx]"]
  node_canvas["Drawing Canvas<br/>[DrawingCanvas.jsx]"]
  node_uploader["Image Uploader<br/>[FileUploader.jsx]"]
  node_verify["Learning Verification API"]
  node_words["Word Practice<br/>[WordsPage.jsx]"]
  node_sentences["Sentence Practice<br/>[SentencesPage.jsx]"]
  node_word["Word Display<br/>[Word.jsx]"]
  node_sentence["Sentence Display<br/>[Sentence.jsx]"]
  node_speech["Speech Actions<br/>[SpeechAction.jsx]"]
  node_quiz["Quiz<br/>[QuizPage.jsx]"]
  node_question["Question View<br/>[Question.jsx]"]
  node_result["Quiz Result<br/>[Result.jsx]"]
end

subgraph group_support["Learner Support"]
  node_chat["Chat Assistant<br/>[ChatPage.jsx]"]
  node_openai["OpenAI Chat API"]
end

subgraph group_account["Account and Progress"]
  node_home["Home Page<br/>[Home.jsx]"]
  node_login["Login Page<br/>[Login.jsx]"]
  node_signup["Signup Page<br/>[Signup.jsx]"]
  node_progress["Progress Dashboard<br/>[ProgressPage.jsx]"]
end

node_learner(("Learner"))

node_learner -->|"opens app"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_signup
node_app -->|"routes to"| node_learn
node_app -->|"routes to"| node_alphabet
node_app -->|"routes to"| node_words
node_app -->|"routes to"| node_sentences
node_app -->|"routes to"| node_quiz
node_app -->|"routes to"| node_progress
node_app -->|"routes to"| node_chat
node_learner -.->|"chooses practice"| node_learn
node_learn -->|"renders"| node_navbar
node_learn -->|"navigates to"| node_alphabet
node_learn -->|"navigates to"| node_words
node_learn -->|"navigates to"| node_sentences
node_alphabet -->|"renders"| node_canvas
node_alphabet -->|"renders"| node_uploader
node_canvas -->|"submits drawing"| node_alphabet
node_uploader -->|"provides image"| node_alphabet
node_alphabet -->|"posts image"| node_verify
node_alphabet -->|"shows result"| node_learner
node_words -->|"renders"| node_navbar
node_words -->|"renders"| node_word
node_sentences -->|"renders"| node_navbar
node_sentences -->|"renders"| node_sentence
node_word -->|"uses"| node_speech
node_sentence -->|"uses"| node_speech
node_quiz -->|"renders"| node_question
node_quiz -->|"renders"| node_result
node_chat -->|"posts messages"| node_openai
node_learner -.->|"sends message"| node_chat

click node_app "https://github.com/anush-kar/dyslexilearn/blob/main/src/App.jsx"
click node_learn "https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/Learn.jsx"
click node_navbar "https://github.com/anush-kar/dyslexilearn/blob/main/src/components/Navbar.jsx"
click node_alphabet "https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/AlphabetPage.jsx"
click node_canvas "https://github.com/anush-kar/dyslexilearn/blob/main/src/components/DrawingCanvas.jsx"
click node_uploader "https://github.com/anush-kar/dyslexilearn/blob/main/src/components/FileUploader.jsx"
click node_words "https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/WordsPage.jsx"
click node_sentences "https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/SentencesPage.jsx"
click node_word "https://github.com/anush-kar/dyslexilearn/blob/main/src/components/Word.jsx"
click node_sentence "https://github.com/anush-kar/dyslexilearn/blob/main/src/components/Sentence.jsx"
click node_speech "https://github.com/anush-kar/dyslexilearn/blob/main/src/components/SpeechAction.jsx"
click node_quiz "https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/QuizPage.jsx"
click node_question "https://github.com/anush-kar/dyslexilearn/blob/main/src/components/Question.jsx"
click node_result "https://github.com/anush-kar/dyslexilearn/blob/main/src/components/Result.jsx"
click node_chat "https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/ChatPage.jsx"
click node_home "https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/Home.jsx"
click node_login "https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/Login.jsx"
click node_signup "https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/Signup.jsx"
click node_progress "https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/ProgressPage.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_learn,node_navbar toneBlue
class node_alphabet,node_canvas,node_uploader,node_verify,node_words,node_sentences,node_word,node_sentence,node_speech,node_quiz,node_question,node_result toneAmber
class node_chat,node_openai toneMint
class node_home,node_login,node_signup,node_progress toneRose
class node_learner toneIndigo
```

## Components

### App Navigation

- [Route Dispatcher](https://github.com/anush-kar/dyslexilearn/blob/main/src/App.jsx): `src/App.jsx`
- [Learning Hub](https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/Learn.jsx): `src/pages/Learn.jsx`
- [Navigation Bar](https://github.com/anush-kar/dyslexilearn/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`

### Learning Practice

- [Alphabet Practice](https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/AlphabetPage.jsx): `src/pages/AlphabetPage.jsx`
- [Drawing Canvas](https://github.com/anush-kar/dyslexilearn/blob/main/src/components/DrawingCanvas.jsx): `src/components/DrawingCanvas.jsx`
- [Image Uploader](https://github.com/anush-kar/dyslexilearn/blob/main/src/components/FileUploader.jsx): `src/components/FileUploader.jsx`
- **Learning Verification API**
- [Word Practice](https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/WordsPage.jsx): `src/pages/WordsPage.jsx`
- [Sentence Practice](https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/SentencesPage.jsx): `src/pages/SentencesPage.jsx`
- [Word Display](https://github.com/anush-kar/dyslexilearn/blob/main/src/components/Word.jsx): `src/components/Word.jsx`
- [Sentence Display](https://github.com/anush-kar/dyslexilearn/blob/main/src/components/Sentence.jsx): `src/components/Sentence.jsx`
- [Speech Actions](https://github.com/anush-kar/dyslexilearn/blob/main/src/components/SpeechAction.jsx): `src/components/SpeechAction.jsx`
- [Quiz](https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/QuizPage.jsx): `src/pages/QuizPage.jsx`
- [Question View](https://github.com/anush-kar/dyslexilearn/blob/main/src/components/Question.jsx): `src/components/Question.jsx`
- [Quiz Result](https://github.com/anush-kar/dyslexilearn/blob/main/src/components/Result.jsx): `src/components/Result.jsx`

### Learner Support

- [Chat Assistant](https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/ChatPage.jsx): `src/pages/ChatPage.jsx`
- **OpenAI Chat API**

### Account and Progress

- [Home Page](https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Login Page](https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Signup Page](https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/Signup.jsx): `src/pages/Signup.jsx`
- [Progress Dashboard](https://github.com/anush-kar/dyslexilearn/blob/main/src/pages/ProgressPage.jsx): `src/pages/ProgressPage.jsx`

### Other components

- **Learner**

## Connections

- Learner → Route Dispatcher: opens app
- Route Dispatcher → Home Page: routes to (evidence: `src/App.jsx`)
- Route Dispatcher → Login Page: routes to (evidence: `src/App.jsx`)
- Route Dispatcher → Signup Page: routes to (evidence: `src/App.jsx`)
- Route Dispatcher → Learning Hub: routes to (evidence: `src/App.jsx`)
- Route Dispatcher → Alphabet Practice: routes to (evidence: `src/App.jsx`)
- Route Dispatcher → Word Practice: routes to (evidence: `src/App.jsx`)
- Route Dispatcher → Sentence Practice: routes to (evidence: `src/App.jsx`)
- Route Dispatcher → Quiz: routes to (evidence: `src/App.jsx`)
- Route Dispatcher → Progress Dashboard: routes to (evidence: `src/App.jsx`)
- Route Dispatcher → Chat Assistant: routes to (evidence: `src/App.jsx`)
- Learner → Learning Hub: chooses practice
- Learning Hub → Navigation Bar: renders (evidence: `src/pages/Learn.jsx`)
- Learning Hub → Alphabet Practice: navigates to (evidence: `src/pages/Learn.jsx`)
- Learning Hub → Word Practice: navigates to (evidence: `src/pages/Learn.jsx`)
- Learning Hub → Sentence Practice: navigates to (evidence: `src/pages/Learn.jsx`)
- Alphabet Practice → Drawing Canvas: renders (evidence: `src/pages/AlphabetPage.jsx`)
- Alphabet Practice → Image Uploader: renders (evidence: `src/pages/AlphabetPage.jsx`)
- Drawing Canvas → Alphabet Practice: submits drawing (evidence: `src/components/DrawingCanvas.jsx`)
- Image Uploader → Alphabet Practice: provides image (evidence: `src/pages/AlphabetPage.jsx`)
- Alphabet Practice → Learning Verification API: posts image (evidence: `src/pages/AlphabetPage.jsx`)
- Alphabet Practice → Learner: shows result (evidence: `src/pages/AlphabetPage.jsx`)
- Word Practice → Navigation Bar: renders (evidence: `src/pages/WordsPage.jsx`)
- Word Practice → Word Display: renders (evidence: `src/pages/WordsPage.jsx`)
- Sentence Practice → Navigation Bar: renders (evidence: `src/pages/SentencesPage.jsx`)
- Sentence Practice → Sentence Display: renders (evidence: `src/pages/SentencesPage.jsx`)
- Word Display → Speech Actions: uses (evidence: `src/components/Word.jsx`)
- Sentence Display → Speech Actions: uses (evidence: `src/components/Sentence.jsx`)
- Quiz → Question View: renders (evidence: `src/pages/QuizPage.jsx`)
- Quiz → Quiz Result: renders (evidence: `src/pages/QuizPage.jsx`)
- Chat Assistant → OpenAI Chat API: posts messages (evidence: `src/pages/ChatPage.jsx`)
- Learner → Chat Assistant: sends message