# munyeshya/klab-tech-upskill-coding-challenge-2026 architecture

> Architecture diagram of the GitHub repository munyeshya/klab-tech-upskill-coding-challenge-2026, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-23). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/munyeshya/klab-tech-upskill-coding-challenge-2026
- Repository: https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026

## Overview

Intego is a private task-management application: users register or sign in, then view and manage their own tasks through a React workspace backed by a Django REST API and MySQL. The task workflow includes listing, status filtering, debounced search, pagination, create/edit, status changes, and deletion; JWT authentication and profile access are a separate supporting domain. The frontend excerpt centers these interactions in App.jsx, while backend routing, models, and task views provide the sampled implementation. Some README-described screens and account endpoints were not sampled, so their detailed internal wiring is omitted.

Main entry points: [`backend/tasks/views.py`](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/tasks/views.py) (Task API and query), [`backend/config/urls.py`](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/config/urls.py) (API URL routing), [`backend/accounts/urls.py`](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/accounts/urls.py) (Account endpoints), [`backend/accounts/views.py`](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/accounts/views.py) (Registration and profile API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["React workspace"]
  node_react_entry["React entry<br/>[main.jsx]"]
  node_workspace["Workspace and task actions<br/>[App.jsx]"]
  node_auth_ui["Registration and login<br/>[App.jsx]"]
end

subgraph group_identity["Accounts and identity"]
  node_django_routes["API URL routing<br/>[urls.py]"]
  node_account_routes["Account endpoints<br/>[urls.py]"]
  node_account_views["Registration and profile API<br/>[views.py]"]
  node_account_serializers["User serialization<br/>[serializers.py]"]
  node_jwt["JWT authentication<br/>[urls.py]"]
  node_user_model["User records<br/>[models.py]"]
end

subgraph group_tasks["Task management"]
  node_task_routes["Task endpoints<br/>[urls.py]"]
  node_task_views["Task API and query<br/>[views.py]"]
  node_task_serializer["Task validation<br/>[serializers.py]"]
  node_pagination["Task pagination<br/>[pagination.py]"]
  node_task_model["Task records<br/>[models.py]"]
end

subgraph group_storage["Persistence"]
  node_mysql[("MySQL database")]
end

node_user(("Workspace user"))

node_user -->|"opens"| node_react_entry
node_react_entry -->|"renders"| node_workspace
node_user -->|"manages tasks"| node_workspace
node_user -->|"registers or signs in"| node_auth_ui
node_auth_ui -->|"sends auth requests"| node_django_routes
node_workspace -->|"sends task and profile requests"| node_django_routes
node_django_routes -->|"dispatches auth"| node_account_routes
node_django_routes -->|"dispatches tasks"| node_task_routes
node_account_routes -->|"routes account API"| node_account_views
node_account_routes -->|"routes token API"| node_jwt
node_account_views -->|"validates user data"| node_account_serializers
node_account_views -->|"creates or reads users"| node_user_model
node_task_routes -->|"routes task API"| node_task_views
node_task_views -->|"validates task data"| node_task_serializer
node_task_views -->|"paginates results"| node_pagination
node_task_views -->|"filters and changes tasks"| node_task_model
node_task_model -->|"persists records"| node_mysql
node_user_model -->|"persists accounts"| node_mysql

click node_react_entry "https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/frontend/src/main.jsx"
click node_workspace "https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/frontend/src/App.jsx"
click node_auth_ui "https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/frontend/src/App.jsx"
click node_django_routes "https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/config/urls.py"
click node_account_routes "https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/accounts/urls.py"
click node_account_views "https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/accounts/views.py"
click node_account_serializers "https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/accounts/serializers.py"
click node_jwt "https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/accounts/urls.py"
click node_task_routes "https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/tasks/urls.py"
click node_task_views "https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/tasks/views.py"
click node_task_serializer "https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/tasks/serializers.py"
click node_pagination "https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/tasks/pagination.py"
click node_task_model "https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/tasks/models.py"
click node_user_model "https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/accounts/models.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_react_entry,node_workspace,node_auth_ui,node_user toneBlue
class node_django_routes,node_account_routes,node_account_views,node_account_serializers,node_jwt,node_user_model toneAmber
class node_task_routes,node_task_views,node_task_serializer,node_pagination,node_task_model toneMint
class node_mysql toneRose
```

## Components

### React workspace

- [React entry](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/frontend/src/main.jsx): `frontend/src/main.jsx`
- [Workspace and task actions](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Registration and login](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`

### Accounts and identity

- [API URL routing](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/config/urls.py): `backend/config/urls.py`
- [Account endpoints](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/accounts/urls.py): `backend/accounts/urls.py`
- [Registration and profile API](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/accounts/views.py): `backend/accounts/views.py`
- [User serialization](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/accounts/serializers.py): `backend/accounts/serializers.py`
- [JWT authentication](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/accounts/urls.py): `backend/accounts/urls.py`
- [User records](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/accounts/models.py): `backend/accounts/models.py`

### Task management

- [Task endpoints](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/tasks/urls.py): `backend/tasks/urls.py`
- [Task API and query](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/tasks/views.py): `backend/tasks/views.py`
- [Task validation](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/tasks/serializers.py): `backend/tasks/serializers.py`
- [Task pagination](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/tasks/pagination.py): `backend/tasks/pagination.py`
- [Task records](https://github.com/munyeshya/klab-tech-upskill-coding-challenge-2026/blob/main/backend/tasks/models.py): `backend/tasks/models.py`

### Persistence

- **MySQL database**

### Other components

- **Workspace user**

## Connections

- Workspace user → React entry: opens
- React entry → Workspace and task actions: renders
- Workspace user → Workspace and task actions: manages tasks
- Workspace user → Registration and login: registers or signs in
- Registration and login → API URL routing: sends auth requests
- Workspace and task actions → API URL routing: sends task and profile requests
- API URL routing → Account endpoints: dispatches auth
- API URL routing → Task endpoints: dispatches tasks
- Account endpoints → Registration and profile API: routes account API
- Account endpoints → JWT authentication: routes token API
- Registration and profile API → User serialization: validates user data
- Registration and profile API → User records: creates or reads users
- Task endpoints → Task API and query: routes task API
- Task API and query → Task validation: validates task data
- Task API and query → Task pagination: paginates results
- Task API and query → Task records: filters and changes tasks
- Task records → MySQL database: persists records
- User records → MySQL database: persists accounts