# ystem-lms/react architecture

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

- Interactive diagram: https://gitdiagram.com/ystem-lms/react
- Repository: https://github.com/ystem-lms/react

## Overview

Y STEM and Chess is an educational platform for students, families, and mentors, combining chess learning and play with STEM tutoring and mentoring. The principal flow is a learner using the React application to select lessons or puzzles, with lesson progress and account activity served by the middleware API and stored in MongoDB. Separate real-time services support mentor/student chess sessions and Stockfish analysis. The README documents the service roles; sampled code confirms the route shell, lesson API calls, Stockfish socket hookup, and middleware mounts, but not every feature’s internal wiring.

Main entry points: [`middlewareNode/src/server.js`](https://github.com/ystem-lms/react/blob/main/middlewareNode/src/server.js) (Middleware API), [`react-ystemandchess/src/AppRoutes.tsx`](https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/AppRoutes.tsx) (App routes), [`react-ystemandchess/src/App.tsx`](https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/App.tsx) (React app), [`react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/Lesson-overlay.tsx`](https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/Lesson-overlay.tsx) (Chess lessons)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Learning application"]
  node_app["React app<br/>[App.tsx]"]
  node_routes["App routes<br/>[AppRoutes.tsx]"]
  node_lessons["Chess lessons<br/>[Lesson-overlay.tsx]"]
  node_puzzles["Chess puzzles<br/>[Puzzles.tsx]"]
  node_profiles["Learner profiles"]
  node_analyticsui["Analytics views"]
  node_chatui["Chat widget<br/>[ChatWidget.tsx]"]
  node_lessonmanager["Lesson progress"]
  node_stockclient["Engine socket hook"]
end

subgraph group_api["Platform API"]
  node_middleware["Middleware API<br/>[server.js]"]
  node_auth["Authentication<br/>[auth.js]"]
  node_learningapi["Lessons and puzzles API<br/>[lessons.js]"]
  node_engagement["Engagement APIs<br/>[activities.js]"]
  node_analytics["Analytics API<br/>[analytics.js]"]
  node_chat["Chat service<br/>[chatService.js]"]
  node_meetings["Meetings API<br/>[meetings.js]"]
end

subgraph group_live["Chess services"]
  node_chessserver["Game server<br/>[index.js]"]
  node_gamemanager["Game sessions<br/>[GameManager.js]"]
  node_stockserver["Stockfish server<br/>[index.js]"]
  node_stockmanager["Engine sessions"]
end

subgraph group_state["Platform data"]
  node_mongo[("MongoDB<br/>[db.js]")]
end

node_learner(("Student or mentor"))
node_engine{{"Stockfish engine"}}

node_learner -->|"uses"| node_app
node_app -->|"renders"| node_routes
node_routes -->|"routes to"| node_lessons
node_routes -->|"routes to"| node_puzzles
node_routes -->|"routes to"| node_profiles
node_routes -->|"routes to"| node_analyticsui
node_app -->|"displays"| node_chatui
node_lessons -->|"tracks via"| node_lessonmanager
node_lessonmanager -->|"requests lessons"| node_middleware
node_middleware -->|"dispatches"| node_learningapi
node_middleware -->|"dispatches"| node_auth
node_middleware -->|"dispatches"| node_engagement
node_middleware -->|"dispatches"| node_analytics
node_middleware -->|"dispatches"| node_meetings
node_middleware -->|"dispatches"| node_chat
node_middleware -->|"connects"| node_mongo
node_stockclient -->|"opens socket"| node_stockserver
node_stockserver -->|"dispatches"| node_stockmanager
node_stockmanager -->|"spawns and queries"| node_engine
node_chessserver -->|"registers handlers"| node_gamemanager
node_learner -->|"plays live chess"| node_chessserver

click node_app "https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/App.tsx"
click node_routes "https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/AppRoutes.tsx"
click node_lessons "https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/Lesson-overlay.tsx"
click node_puzzles "https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/features/puzzles/Puzzles.tsx"
click node_profiles "https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/features/student/student-profile/NewStudentProfile.tsx"
click node_analyticsui "https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/Pages/Analytics/AnalyticsLayout.tsx"
click node_chatui "https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/components/ChatWidget/ChatWidget.tsx"
click node_lessonmanager "https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/hooks/useLessonManager.ts"
click node_stockclient "https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/hooks/useSocketChessEngine.ts"
click node_middleware "https://github.com/ystem-lms/react/blob/main/middlewareNode/src/server.js"
click node_auth "https://github.com/ystem-lms/react/blob/main/middlewareNode/src/routes/auth.js"
click node_learningapi "https://github.com/ystem-lms/react/blob/main/middlewareNode/src/routes/lessons.js"
click node_engagement "https://github.com/ystem-lms/react/blob/main/middlewareNode/src/routes/activities.js"
click node_analytics "https://github.com/ystem-lms/react/blob/main/middlewareNode/src/routes/analytics.js"
click node_chat "https://github.com/ystem-lms/react/blob/main/middlewareNode/src/utils/chatService.js"
click node_meetings "https://github.com/ystem-lms/react/blob/main/middlewareNode/src/controllers/meetings.js"
click node_mongo "https://github.com/ystem-lms/react/blob/main/middlewareNode/src/config/db.js"
click node_chessserver "https://github.com/ystem-lms/react/blob/main/chessServer/src/index.js"
click node_gamemanager "https://github.com/ystem-lms/react/blob/main/chessServer/src/managers/GameManager.js"
click node_stockserver "https://github.com/ystem-lms/react/blob/main/stockfishServer/src/index.js"
click node_stockmanager "https://github.com/ystem-lms/react/blob/main/stockfishServer/src/managers/StockfishManager.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_routes,node_lessons,node_puzzles,node_profiles,node_analyticsui,node_chatui,node_lessonmanager,node_stockclient toneBlue
class node_middleware,node_auth,node_learningapi,node_engagement,node_analytics,node_chat,node_meetings toneAmber
class node_chessserver,node_gamemanager,node_stockserver,node_stockmanager toneMint
class node_mongo toneRose
class node_learner,node_engine toneIndigo
```

## Components

### Learning application

- [React app](https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/App.tsx): `react-ystemandchess/src/App.tsx`
- [App routes](https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/AppRoutes.tsx): `react-ystemandchess/src/AppRoutes.tsx`
- [Chess lessons](https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/Lesson-overlay.tsx): `react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/Lesson-overlay.tsx`
- [Chess puzzles](https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/features/puzzles/Puzzles.tsx): `react-ystemandchess/src/features/puzzles/Puzzles.tsx`
- [Learner profiles](https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/features/student/student-profile/NewStudentProfile.tsx): `react-ystemandchess/src/features/student/student-profile/NewStudentProfile.tsx`
- [Analytics views](https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/Pages/Analytics/AnalyticsLayout.tsx): `react-ystemandchess/src/Pages/Analytics/AnalyticsLayout.tsx`
- [Chat widget](https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/components/ChatWidget/ChatWidget.tsx): `react-ystemandchess/src/components/ChatWidget/ChatWidget.tsx`
- [Lesson progress](https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/hooks/useLessonManager.ts): `react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/hooks/useLessonManager.ts`
- [Engine socket hook](https://github.com/ystem-lms/react/blob/main/react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/hooks/useSocketChessEngine.ts): `react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/hooks/useSocketChessEngine.ts`

### Platform API

- [Middleware API](https://github.com/ystem-lms/react/blob/main/middlewareNode/src/server.js): `middlewareNode/src/server.js`
- [Authentication](https://github.com/ystem-lms/react/blob/main/middlewareNode/src/routes/auth.js): `middlewareNode/src/routes/auth.js`
- [Lessons and puzzles API](https://github.com/ystem-lms/react/blob/main/middlewareNode/src/routes/lessons.js): `middlewareNode/src/routes/lessons.js`
- [Engagement APIs](https://github.com/ystem-lms/react/blob/main/middlewareNode/src/routes/activities.js): `middlewareNode/src/routes/activities.js`
- [Analytics API](https://github.com/ystem-lms/react/blob/main/middlewareNode/src/routes/analytics.js): `middlewareNode/src/routes/analytics.js`
- [Chat service](https://github.com/ystem-lms/react/blob/main/middlewareNode/src/utils/chatService.js): `middlewareNode/src/utils/chatService.js`
- [Meetings API](https://github.com/ystem-lms/react/blob/main/middlewareNode/src/controllers/meetings.js): `middlewareNode/src/controllers/meetings.js`

### Chess services

- [Game server](https://github.com/ystem-lms/react/blob/main/chessServer/src/index.js): `chessServer/src/index.js`
- [Game sessions](https://github.com/ystem-lms/react/blob/main/chessServer/src/managers/GameManager.js): `chessServer/src/managers/GameManager.js`
- [Stockfish server](https://github.com/ystem-lms/react/blob/main/stockfishServer/src/index.js): `stockfishServer/src/index.js`
- [Engine sessions](https://github.com/ystem-lms/react/blob/main/stockfishServer/src/managers/StockfishManager.js): `stockfishServer/src/managers/StockfishManager.js`

### Platform data

- [MongoDB](https://github.com/ystem-lms/react/blob/main/middlewareNode/src/config/db.js): `middlewareNode/src/config/db.js`

### Other components

- **Student or mentor**
- **Stockfish engine**

## Connections

- Student or mentor → React app: uses
- React app → App routes: renders
- App routes → Chess lessons: routes to
- App routes → Chess puzzles: routes to
- App routes → Learner profiles: routes to
- App routes → Analytics views: routes to
- React app → Chat widget: displays
- Chess lessons → Lesson progress: tracks via
- Lesson progress → Middleware API: requests lessons
- Middleware API → Lessons and puzzles API: dispatches
- Middleware API → Authentication: dispatches
- Middleware API → Engagement APIs: dispatches
- Middleware API → Analytics API: dispatches
- Middleware API → Meetings API: dispatches
- Middleware API → Chat service: dispatches
- Middleware API → MongoDB: connects
- Engine socket hook → Stockfish server: opens socket
- Stockfish server → Engine sessions: dispatches
- Engine sessions → Stockfish engine: spawns and queries
- Game server → Game sessions: registers handlers
- Student or mentor → Game server: plays live chess