# wenuanhappy/ct-platform-v2 architecture

> Architecture diagram of the GitHub repository wenuanhappy/ct-platform-v2, 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/wenuanhappy/ct-platform-v2
- Repository: https://github.com/wenuanhappy/ct-platform-v2

## Overview

This is a Vue 3 and Spring Boot interactive learning platform for computational-thinking concepts. A learner registers or logs in, then browses the dashboard and opens one of eight interactive learning modules; account and profile actions use authenticated APIs. The backend handles authentication, user profiles, and module catalog data, with user records persisted in MySQL. Module descriptions are supplied by the backend, while the interactive simulations are frontend components. The graph follows documented capabilities; several frontend and persistence connections are based on the README and tree because their implementations were not sampled.

Main entry points: [`frontend/src/router/index.js`](https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/router/index.js) (Application routes), [`frontend/src/utils/request.js`](https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/utils/request.js) (HTTP request client), [`frontend/src/stores/auth.js`](https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/stores/auth.js) (Authentication state), [`frontend/src/App.vue`](https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/App.vue) (Vue application)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Learning frontend"]
  node_app["Vue application<br/>[App.vue]"]
  node_router["Application routes<br/>[index.js]"]
  node_dashboard["Learning dashboard<br/>[DashboardView.vue]"]
  node_modulepage["Module page<br/>[ModuleView.vue]"]
  node_simulations["Eight learning simulations"]
  node_moduleapi["Module API<br/>[module.js]"]
end

subgraph group_account["Account experience"]
  node_login["Login and registration<br/>[LoginView.vue]"]
  node_register["Registration page<br/>[RegisterView.vue]"]
  node_profile["Profile page<br/>[ProfileView.vue]"]
  node_authstore["Authentication state<br/>[auth.js]"]
  node_authapi["Authentication API<br/>[auth.js]"]
  node_userapi["User API<br/>[user.js]"]
  node_http["HTTP request client<br/>[request.js]"]
end

subgraph group_backend["Backend services"]
  node_authcontroller["Authentication endpoints"]
  node_usercontroller["User endpoints"]
  node_modulecontroller["Module endpoints"]
  node_authservice["Authentication logic"]
  node_userservice["Profile logic"]
  node_moduleservice["Module catalog"]
  node_jwt["JWT handling<br/>[JwtUtil.java]"]
end

subgraph group_persistence["Persistence"]
  node_usermapper["User data mapper<br/>[UserMapper.java]"]
  node_mysql[("MySQL database")]
end

node_learner(("Learner"))

node_learner -->|"uses"| node_app
node_app -->|"renders routes"| node_router
node_router -->|"routes"| node_login
node_router -->|"routes"| node_register
node_router -->|"routes"| node_dashboard
node_router -->|"routes"| node_modulepage
node_router -->|"routes"| node_profile
node_app -->|"initializes state"| node_authstore
node_login -->|"submits credentials"| node_authstore
node_register -->|"registers account"| node_authstore
node_profile -->|"updates profile"| node_userapi
node_authstore -->|"requests authentication"| node_authapi
node_authstore -->|"loads user"| node_userapi
node_authapi -->|"sends requests"| node_http
node_userapi -->|"sends requests"| node_http
node_dashboard -->|"loads catalog"| node_moduleapi
node_modulepage -->|"loads module details"| node_moduleapi
node_moduleapi -->|"sends requests"| node_http
node_modulepage -->|"loads simulator"| node_simulations
node_http -->|"HTTP requests"| node_authcontroller
node_http -->|"HTTP requests"| node_usercontroller
node_http -->|"HTTP requests"| node_modulecontroller
node_authcontroller -->|"delegates"| node_authservice
node_usercontroller -->|"delegates"| node_userservice
node_modulecontroller -->|"delegates"| node_moduleservice
node_authservice -->|"reads and writes users"| node_usermapper
node_authservice -->|"creates and validates tokens"| node_jwt
node_userservice -->|"reads and updates users"| node_usermapper
node_usermapper -->|"queries records"| node_mysql

click node_app "https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/App.vue"
click node_router "https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/router/index.js"
click node_dashboard "https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/views/DashboardView.vue"
click node_modulepage "https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/views/ModuleView.vue"
click node_simulations "https://github.com/wenuanhappy/ct-platform-v2/tree/main/frontend/src/views/modules"
click node_moduleapi "https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/api/module.js"
click node_login "https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/views/LoginView.vue"
click node_register "https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/views/RegisterView.vue"
click node_profile "https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/views/ProfileView.vue"
click node_authstore "https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/stores/auth.js"
click node_authapi "https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/api/auth.js"
click node_userapi "https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/api/user.js"
click node_http "https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/utils/request.js"
click node_authcontroller "https://github.com/wenuanhappy/ct-platform-v2/blob/main/backend/src/main/java/com/ctplatform/controller/AuthController.java"
click node_usercontroller "https://github.com/wenuanhappy/ct-platform-v2/blob/main/backend/src/main/java/com/ctplatform/controller/UserController.java"
click node_modulecontroller "https://github.com/wenuanhappy/ct-platform-v2/blob/main/backend/src/main/java/com/ctplatform/controller/ModuleController.java"
click node_authservice "https://github.com/wenuanhappy/ct-platform-v2/blob/main/backend/src/main/java/com/ctplatform/service/impl/AuthServiceImpl.java"
click node_userservice "https://github.com/wenuanhappy/ct-platform-v2/blob/main/backend/src/main/java/com/ctplatform/service/impl/UserServiceImpl.java"
click node_moduleservice "https://github.com/wenuanhappy/ct-platform-v2/blob/main/backend/src/main/java/com/ctplatform/service/impl/ModuleServiceImpl.java"
click node_jwt "https://github.com/wenuanhappy/ct-platform-v2/blob/main/backend/src/main/java/com/ctplatform/util/JwtUtil.java"
click node_usermapper "https://github.com/wenuanhappy/ct-platform-v2/blob/main/backend/src/main/java/com/ctplatform/mapper/UserMapper.java"

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_router,node_dashboard,node_modulepage,node_simulations,node_moduleapi toneBlue
class node_login,node_register,node_profile,node_authstore,node_authapi,node_userapi,node_http toneAmber
class node_authcontroller,node_usercontroller,node_modulecontroller,node_authservice,node_userservice,node_moduleservice,node_jwt toneMint
class node_usermapper,node_mysql toneRose
class node_learner toneIndigo
```

## Components

### Learning frontend

- [Vue application](https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/App.vue): `frontend/src/App.vue`
- [Application routes](https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/router/index.js): `frontend/src/router/index.js`
- [Learning dashboard](https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/views/DashboardView.vue): `frontend/src/views/DashboardView.vue`
- [Module page](https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/views/ModuleView.vue): `frontend/src/views/ModuleView.vue`
- [Eight learning simulations](https://github.com/wenuanhappy/ct-platform-v2/tree/main/frontend/src/views/modules): `frontend/src/views/modules`
- [Module API](https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/api/module.js): `frontend/src/api/module.js`

### Account experience

- [Login and registration](https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/views/LoginView.vue): `frontend/src/views/LoginView.vue`
- [Registration page](https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/views/RegisterView.vue): `frontend/src/views/RegisterView.vue`
- [Profile page](https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/views/ProfileView.vue): `frontend/src/views/ProfileView.vue`
- [Authentication state](https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/stores/auth.js): `frontend/src/stores/auth.js`
- [Authentication API](https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/api/auth.js): `frontend/src/api/auth.js`
- [User API](https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/api/user.js): `frontend/src/api/user.js`
- [HTTP request client](https://github.com/wenuanhappy/ct-platform-v2/blob/main/frontend/src/utils/request.js): `frontend/src/utils/request.js`

### Backend services

- [Authentication endpoints](https://github.com/wenuanhappy/ct-platform-v2/blob/main/backend/src/main/java/com/ctplatform/controller/AuthController.java): `backend/src/main/java/com/ctplatform/controller/AuthController.java`
- [User endpoints](https://github.com/wenuanhappy/ct-platform-v2/blob/main/backend/src/main/java/com/ctplatform/controller/UserController.java): `backend/src/main/java/com/ctplatform/controller/UserController.java`
- [Module endpoints](https://github.com/wenuanhappy/ct-platform-v2/blob/main/backend/src/main/java/com/ctplatform/controller/ModuleController.java): `backend/src/main/java/com/ctplatform/controller/ModuleController.java`
- [Authentication logic](https://github.com/wenuanhappy/ct-platform-v2/blob/main/backend/src/main/java/com/ctplatform/service/impl/AuthServiceImpl.java): `backend/src/main/java/com/ctplatform/service/impl/AuthServiceImpl.java`
- [Profile logic](https://github.com/wenuanhappy/ct-platform-v2/blob/main/backend/src/main/java/com/ctplatform/service/impl/UserServiceImpl.java): `backend/src/main/java/com/ctplatform/service/impl/UserServiceImpl.java`
- [Module catalog](https://github.com/wenuanhappy/ct-platform-v2/blob/main/backend/src/main/java/com/ctplatform/service/impl/ModuleServiceImpl.java): `backend/src/main/java/com/ctplatform/service/impl/ModuleServiceImpl.java`
- [JWT handling](https://github.com/wenuanhappy/ct-platform-v2/blob/main/backend/src/main/java/com/ctplatform/util/JwtUtil.java): `backend/src/main/java/com/ctplatform/util/JwtUtil.java`

### Persistence

- [User data mapper](https://github.com/wenuanhappy/ct-platform-v2/blob/main/backend/src/main/java/com/ctplatform/mapper/UserMapper.java): `backend/src/main/java/com/ctplatform/mapper/UserMapper.java`
- **MySQL database**

### Other components

- **Learner**

## Connections

- Learner → Vue application: uses
- Vue application → Application routes: renders routes
- Application routes → Login and registration: routes
- Application routes → Registration page: routes
- Application routes → Learning dashboard: routes
- Application routes → Module page: routes
- Application routes → Profile page: routes
- Vue application → Authentication state: initializes state
- Login and registration → Authentication state: submits credentials
- Registration page → Authentication state: registers account
- Profile page → User API: updates profile
- Authentication state → Authentication API: requests authentication
- Authentication state → User API: loads user
- Authentication API → HTTP request client: sends requests
- User API → HTTP request client: sends requests
- Learning dashboard → Module API: loads catalog
- Module page → Module API: loads module details
- Module API → HTTP request client: sends requests
- Module page → Eight learning simulations: loads simulator
- HTTP request client → Authentication endpoints: HTTP requests
- HTTP request client → User endpoints: HTTP requests
- HTTP request client → Module endpoints: HTTP requests
- Authentication endpoints → Authentication logic: delegates
- User endpoints → Profile logic: delegates
- Module endpoints → Module catalog: delegates
- Authentication logic → User data mapper: reads and writes users
- Authentication logic → JWT handling: creates and validates tokens
- Profile logic → User data mapper: reads and updates users
- User data mapper → MySQL database: queries records