How anush-kar/dyslexilearn works
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: App.jsx Route Dispatcher · AlphabetPage.jsx Alphabet Practice · Learn.jsx Learning Hub · WordsPage.jsx Word Practice
Components 22
App Navigation
- Route Dispatcher
src/App.jsx - Learning Hub
src/pages/Learn.jsx - Navigation Bar
src/components/Navbar.jsx
Learning Practice
- Alphabet Practice
src/pages/AlphabetPage.jsx - Drawing Canvas
src/components/DrawingCanvas.jsx - Image Uploader
src/components/FileUploader.jsx - Learning Verification API
- Word Practice
src/pages/WordsPage.jsx - Sentence Practice
src/pages/SentencesPage.jsx - Word Display
src/components/Word.jsx - Sentence Display
src/components/Sentence.jsx - Speech Actions
src/components/SpeechAction.jsx - Quiz
src/pages/QuizPage.jsx - Question View
src/components/Question.jsx - Quiz Result
src/components/Result.jsx
Learner Support
- Chat Assistant
src/pages/ChatPage.jsx - OpenAI Chat API
Account and Progress
- Home Page
src/pages/Home.jsx - Login Page
src/pages/Login.jsx - Signup Page
src/pages/Signup.jsx - Progress Dashboard
src/pages/ProgressPage.jsx
Other components
- Learner
Connections 32
- Learner → Route Dispatcher: opens app
- Route Dispatcher → Home Page: routes to
src/App.jsx - Route Dispatcher → Login Page: routes to
src/App.jsx - Route Dispatcher → Signup Page: routes to
src/App.jsx - Route Dispatcher → Learning Hub: routes to
src/App.jsx - Route Dispatcher → Alphabet Practice: routes to
src/App.jsx - Route Dispatcher → Word Practice: routes to
src/App.jsx - Route Dispatcher → Sentence Practice: routes to
src/App.jsx - Route Dispatcher → Quiz: routes to
src/App.jsx - Route Dispatcher → Progress Dashboard: routes to
src/App.jsx - Route Dispatcher → Chat Assistant: routes to
src/App.jsx - Learner → Learning Hub: chooses practice
- Learning Hub → Navigation Bar: renders
src/pages/Learn.jsx - Learning Hub → Alphabet Practice: navigates to
src/pages/Learn.jsx - Learning Hub → Word Practice: navigates to
src/pages/Learn.jsx - Learning Hub → Sentence Practice: navigates to
src/pages/Learn.jsx - Alphabet Practice → Drawing Canvas: renders
src/pages/AlphabetPage.jsx - Alphabet Practice → Image Uploader: renders
src/pages/AlphabetPage.jsx - Drawing Canvas → Alphabet Practice: submits drawing
src/components/DrawingCanvas.jsx - Image Uploader → Alphabet Practice: provides image
src/pages/AlphabetPage.jsx - Alphabet Practice → Learning Verification API: posts image
src/pages/AlphabetPage.jsx - Alphabet Practice → Learner: shows result
src/pages/AlphabetPage.jsx - Word Practice → Navigation Bar: renders
src/pages/WordsPage.jsx - Word Practice → Word Display: renders
src/pages/WordsPage.jsx - Sentence Practice → Navigation Bar: renders
src/pages/SentencesPage.jsx - Sentence Practice → Sentence Display: renders
src/pages/SentencesPage.jsx - Word Display → Speech Actions: uses
src/components/Word.jsx - Sentence Display → Speech Actions: uses
src/components/Sentence.jsx - Quiz → Question View: renders
src/pages/QuizPage.jsx - Quiz → Quiz Result: renders
src/pages/QuizPage.jsx - Chat Assistant → OpenAI Chat API: posts messages
src/pages/ChatPage.jsx - Learner → Chat Assistant: sends message