# nhatpham12/visitalk architecture

> Architecture diagram of the GitHub repository nhatpham12/visitalk, 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/nhatpham12/visitalk
- Repository: https://github.com/nhatpham12/visitalk

## Overview

VISITALK combines a React sign-language learning and translation experience with an Express/MySQL backend and a Python gesture-inference process. The main user flow is webcam capture and feature submission for prediction, followed by translated text; users can also study lessons, while admins manage accounts, lessons, and reports. The README documents landmark extraction, gesture stabilization, and reporting details not present in the sampled source, so those are represented at the documented subsystem level. Several route/controller implementations were not sampled; their paths and broad capabilities follow the repository tree and README.

Main entry points: [`backend/index.js`](https://github.com/nhatpham12/visitalk/blob/main/backend/index.js) (Express API), [`frontend/src/App.jsx`](https://github.com/nhatpham12/visitalk/blob/main/frontend/src/App.jsx) (App routing), [`frontend/src/services/api.js`](https://github.com/nhatpham12/visitalk/blob/main/frontend/src/services/api.js) (API client), [`backend/controllers/auth.controllers.js`](https://github.com/nhatpham12/visitalk/blob/main/backend/controllers/auth.controllers.js) (Auth and sessions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["React client"]
  node_app["App routing<br/>[App.jsx]"]
  node_translate["Live translation<br/>[Translate.jsx]"]
  node_learning_ui["Learning pages<br/>[Learning.jsx]"]
  node_admin_ui["Admin dashboard<br/>[Admin.jsx]"]
  node_lesson_admin_ui["Lesson management<br/>[LessonsControl.jsx]"]
  node_habit_ui["Habit tracker<br/>[HabitTracker.jsx]"]
  node_api_client["API client<br/>[api.js]"]
end

subgraph group_identity["Identity and accounts"]
  node_auth_context["Auth context<br/>[authContext.jsx]"]
  node_auth_routes["Auth routes<br/>[auth.routes.js]"]
  node_auth_logic["Auth and sessions"]
  node_users_routes["User administration<br/>[users.routes.js]"]
  node_users_model["User records<br/>[users.model.js]"]
  node_sessions_model["Session records"]
end

subgraph group_learning["Learning and habits"]
  node_lessons_routes["Lesson API<br/>[lessons.routes.js]"]
  node_lessons_model["Lesson records<br/>[lessons.model.js]"]
  node_access_routes["Lesson access tracking<br/>[accessTo.routes.js]"]
  node_habits_routes["Habit API<br/>[habits.routes.js]"]
  node_habits_controller["Habit operations"]
  node_habits_model["Habit records<br/>[habits.model.js]"]
end

subgraph group_server["Backend services"]
  node_backend["Express API<br/>[index.js]"]
  node_report_routes["Reports API<br/>[report.routes.js]"]
  node_report_controller["Reporting"]
  node_mysql[("MySQL database")]
end

subgraph group_inference["Gesture inference"]
  node_predict_routes["Prediction endpoint<br/>[predict.routes.js]"]
  node_python_predict["Python inference<br/>[predict_server.py]"]
  node_model_file["Gesture model"]
end

node_user(("Learner"))
node_admin(("Administrator"))

node_user -->|"uses"| node_app
node_admin -->|"uses"| node_app
node_app -->|"provides auth"| node_auth_context
node_app -->|"routes to"| node_translate
node_app -->|"routes to"| node_learning_ui
node_app -->|"routes to"| node_admin_ui
node_app -->|"routes to"| node_lesson_admin_ui
node_app -->|"routes to"| node_habit_ui
node_translate -->|"submits features"| node_api_client
node_learning_ui -->|"requests lessons"| node_api_client
node_admin_ui -->|"manages users"| node_api_client
node_lesson_admin_ui -->|"manages lessons"| node_api_client
node_habit_ui -->|"manages habits"| node_api_client
node_api_client -->|"calls API"| node_backend
node_backend -->|"mounts routes"| node_auth_routes
node_backend -->|"mounts routes"| node_users_routes
node_backend -->|"mounts routes"| node_lessons_routes
node_backend -->|"mounts routes"| node_access_routes
node_backend -->|"mounts routes"| node_habits_routes
node_backend -->|"mounts routes"| node_report_routes
node_backend -->|"mounts routes"| node_predict_routes
node_auth_routes -->|"dispatches auth"| node_auth_logic
node_auth_logic -->|"reads and writes"| node_users_model
node_auth_logic -->|"creates sessions"| node_sessions_model
node_users_routes -->|"reads and writes"| node_users_model
node_lessons_routes -->|"reads and writes"| node_lessons_model
node_access_routes -->|"records access"| node_mysql
node_habits_routes -->|"dispatches"| node_habits_controller
node_habits_controller -->|"reads and writes"| node_habits_model
node_report_routes -->|"dispatches"| node_report_controller
node_report_controller -->|"queries statistics"| node_mysql
node_users_model -->|"queries"| node_mysql
node_sessions_model -->|"queries"| node_mysql
node_lessons_model -->|"queries"| node_mysql
node_habits_model -->|"queries"| node_mysql
node_predict_routes -->|"sends features"| node_python_predict
node_python_predict -->|"loads model"| node_model_file
node_python_predict -->|"returns prediction"| node_predict_routes

click node_app "https://github.com/nhatpham12/visitalk/blob/main/frontend/src/App.jsx"
click node_translate "https://github.com/nhatpham12/visitalk/blob/main/frontend/src/pages/Translate.jsx"
click node_learning_ui "https://github.com/nhatpham12/visitalk/blob/main/frontend/src/pages/Learning.jsx"
click node_admin_ui "https://github.com/nhatpham12/visitalk/blob/main/frontend/src/pages/Admin.jsx"
click node_lesson_admin_ui "https://github.com/nhatpham12/visitalk/blob/main/frontend/src/pages/LessonsControl.jsx"
click node_habit_ui "https://github.com/nhatpham12/visitalk/blob/main/frontend/src/pages/HabitTracker.jsx"
click node_auth_context "https://github.com/nhatpham12/visitalk/blob/main/frontend/src/context/authContext.jsx"
click node_api_client "https://github.com/nhatpham12/visitalk/blob/main/frontend/src/services/api.js"
click node_backend "https://github.com/nhatpham12/visitalk/blob/main/backend/index.js"
click node_auth_routes "https://github.com/nhatpham12/visitalk/blob/main/backend/routes/auth.routes.js"
click node_auth_logic "https://github.com/nhatpham12/visitalk/blob/main/backend/controllers/auth.controllers.js"
click node_users_routes "https://github.com/nhatpham12/visitalk/blob/main/backend/routes/users.routes.js"
click node_users_model "https://github.com/nhatpham12/visitalk/blob/main/backend/models/users.model.js"
click node_sessions_model "https://github.com/nhatpham12/visitalk/blob/main/backend/models/userSessions.model.js"
click node_lessons_routes "https://github.com/nhatpham12/visitalk/blob/main/backend/routes/lessons.routes.js"
click node_lessons_model "https://github.com/nhatpham12/visitalk/blob/main/backend/models/lessons.model.js"
click node_access_routes "https://github.com/nhatpham12/visitalk/blob/main/backend/routes/accessTo.routes.js"
click node_habits_routes "https://github.com/nhatpham12/visitalk/blob/main/backend/routes/habits.routes.js"
click node_habits_controller "https://github.com/nhatpham12/visitalk/blob/main/backend/controllers/habits.controllers.js"
click node_habits_model "https://github.com/nhatpham12/visitalk/blob/main/backend/models/habits.model.js"
click node_report_routes "https://github.com/nhatpham12/visitalk/blob/main/backend/routes/report.routes.js"
click node_report_controller "https://github.com/nhatpham12/visitalk/blob/main/backend/controllers/report.controllers.js"
click node_predict_routes "https://github.com/nhatpham12/visitalk/blob/main/backend/routes/predict.routes.js"
click node_python_predict "https://github.com/nhatpham12/visitalk/blob/main/backend/predict_server.py"

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_translate,node_learning_ui,node_admin_ui,node_lesson_admin_ui,node_habit_ui,node_api_client toneBlue
class node_auth_context,node_auth_routes,node_auth_logic,node_users_routes,node_users_model,node_sessions_model toneAmber
class node_lessons_routes,node_lessons_model,node_access_routes,node_habits_routes,node_habits_controller,node_habits_model toneMint
class node_backend,node_report_routes,node_report_controller,node_mysql toneRose
class node_predict_routes,node_python_predict,node_model_file,node_user,node_admin toneIndigo
```

## Components

### React client

- [App routing](https://github.com/nhatpham12/visitalk/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Live translation](https://github.com/nhatpham12/visitalk/blob/main/frontend/src/pages/Translate.jsx): `frontend/src/pages/Translate.jsx`
- [Learning pages](https://github.com/nhatpham12/visitalk/blob/main/frontend/src/pages/Learning.jsx): `frontend/src/pages/Learning.jsx`
- [Admin dashboard](https://github.com/nhatpham12/visitalk/blob/main/frontend/src/pages/Admin.jsx): `frontend/src/pages/Admin.jsx`
- [Lesson management](https://github.com/nhatpham12/visitalk/blob/main/frontend/src/pages/LessonsControl.jsx): `frontend/src/pages/LessonsControl.jsx`
- [Habit tracker](https://github.com/nhatpham12/visitalk/blob/main/frontend/src/pages/HabitTracker.jsx): `frontend/src/pages/HabitTracker.jsx`
- [API client](https://github.com/nhatpham12/visitalk/blob/main/frontend/src/services/api.js): `frontend/src/services/api.js`

### Identity and accounts

- [Auth context](https://github.com/nhatpham12/visitalk/blob/main/frontend/src/context/authContext.jsx): `frontend/src/context/authContext.jsx`
- [Auth routes](https://github.com/nhatpham12/visitalk/blob/main/backend/routes/auth.routes.js): `backend/routes/auth.routes.js`
- [Auth and sessions](https://github.com/nhatpham12/visitalk/blob/main/backend/controllers/auth.controllers.js): `backend/controllers/auth.controllers.js`
- [User administration](https://github.com/nhatpham12/visitalk/blob/main/backend/routes/users.routes.js): `backend/routes/users.routes.js`
- [User records](https://github.com/nhatpham12/visitalk/blob/main/backend/models/users.model.js): `backend/models/users.model.js`
- [Session records](https://github.com/nhatpham12/visitalk/blob/main/backend/models/userSessions.model.js): `backend/models/userSessions.model.js`

### Learning and habits

- [Lesson API](https://github.com/nhatpham12/visitalk/blob/main/backend/routes/lessons.routes.js): `backend/routes/lessons.routes.js`
- [Lesson records](https://github.com/nhatpham12/visitalk/blob/main/backend/models/lessons.model.js): `backend/models/lessons.model.js`
- [Lesson access tracking](https://github.com/nhatpham12/visitalk/blob/main/backend/routes/accessTo.routes.js): `backend/routes/accessTo.routes.js`
- [Habit API](https://github.com/nhatpham12/visitalk/blob/main/backend/routes/habits.routes.js): `backend/routes/habits.routes.js`
- [Habit operations](https://github.com/nhatpham12/visitalk/blob/main/backend/controllers/habits.controllers.js): `backend/controllers/habits.controllers.js`
- [Habit records](https://github.com/nhatpham12/visitalk/blob/main/backend/models/habits.model.js): `backend/models/habits.model.js`

### Backend services

- [Express API](https://github.com/nhatpham12/visitalk/blob/main/backend/index.js): `backend/index.js`
- [Reports API](https://github.com/nhatpham12/visitalk/blob/main/backend/routes/report.routes.js): `backend/routes/report.routes.js`
- [Reporting](https://github.com/nhatpham12/visitalk/blob/main/backend/controllers/report.controllers.js): `backend/controllers/report.controllers.js`
- **MySQL database**

### Gesture inference

- [Prediction endpoint](https://github.com/nhatpham12/visitalk/blob/main/backend/routes/predict.routes.js): `backend/routes/predict.routes.js`
- [Python inference](https://github.com/nhatpham12/visitalk/blob/main/backend/predict_server.py): `backend/predict_server.py`
- **Gesture model**

### Other components

- **Learner**
- **Administrator**

## Connections

- Learner → App routing: uses
- Administrator → App routing: uses
- App routing → Auth context: provides auth
- App routing → Live translation: routes to
- App routing → Learning pages: routes to
- App routing → Admin dashboard: routes to
- App routing → Lesson management: routes to
- App routing → Habit tracker: routes to
- Live translation → API client: submits features
- Learning pages → API client: requests lessons
- Admin dashboard → API client: manages users
- Lesson management → API client: manages lessons
- Habit tracker → API client: manages habits
- API client → Express API: calls API
- Express API → Auth routes: mounts routes
- Express API → User administration: mounts routes
- Express API → Lesson API: mounts routes
- Express API → Lesson access tracking: mounts routes
- Express API → Habit API: mounts routes
- Express API → Reports API: mounts routes
- Express API → Prediction endpoint: mounts routes
- Auth routes → Auth and sessions: dispatches auth
- Auth and sessions → User records: reads and writes
- Auth and sessions → Session records: creates sessions
- User administration → User records: reads and writes
- Lesson API → Lesson records: reads and writes
- Lesson access tracking → MySQL database: records access
- Habit API → Habit operations: dispatches
- Habit operations → Habit records: reads and writes
- Reports API → Reporting: dispatches
- Reporting → MySQL database: queries statistics
- User records → MySQL database: queries
- Session records → MySQL database: queries
- Lesson records → MySQL database: queries
- Habit records → MySQL database: queries
- Prediction endpoint → Python inference: sends features
- Python inference → Gesture model: loads model
- Python inference → Prediction endpoint: returns prediction