# zel-jpeg/skillbridge architecture

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

- Interactive diagram: https://gitdiagram.com/zel-jpeg/skillbridge
- Repository: https://github.com/zel-jpeg/skillbridge

## Overview

SkillBridge is an assessment-based OJT placement decision-support system. Students complete assessments and review competency evidence; instructors and coordinators manage enrollment, assessments, partner catalogs, and placement decisions; administrators maintain shared institutional data and review analytics. Django owns authorization, grading, recommendations, validation, and persistence, while the React client presents role-specific workflows. The README documents the major stages and integrations; sampled source confirms selected client data handling and competency/NLP dependencies, but not every backend route or UI-to-endpoint call.

Main entry points: [`skillbridge-frontend/src/App.jsx`](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-frontend/src/App.jsx) (Role-based application), [`skillbridge-backend/api/views.py`](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/views.py) (Django API), [`skillbridge-frontend/src/hooks/useApi.js`](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-frontend/src/hooks/useApi.js) (API and query client), [`skillbridge-backend/api/combined_competency.py`](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/combined_competency.py) (Competency evidence)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_app["Role-based application<br/>[App.jsx]"]
  node_clientdata["API and query client<br/>[useApi.js]"]
end

subgraph group_assessment["Assessment workflows"]
  node_assess["Assessment taking"]
  node_author["Assessment authoring"]
  node_enroll["Batch enrollment"]
end

subgraph group_placement["Competency and placement"]
  node_results["Competency evidence"]
  node_matching["Position matching"]
  node_taxonomy["Skill taxonomy<br/>[skill_taxonomy.py]"]
  node_decisions["Placement decisions"]
  node_catalog["Partner and position catalog<br/>[organization.py]"]
end

subgraph group_operations["Institutional operations"]
  node_institutions["Institute and program management<br/>[organization.py]"]
  node_analytics["Reports and analytics<br/>[analytics.py]"]
  node_notifications["Notifications and email<br/>[email_outbox.py]"]
end

subgraph group_platform["API and persistence"]
  node_api["Django API<br/>[views.py]"]
  node_models[("Domain records<br/>[models.py]")]
  node_sse["Live change events<br/>[change_events.py]"]
  node_postgres[("PostgreSQL")]
  node_google["Google OAuth"]
  node_supabase["Supabase services"]
  node_brevo["Brevo email"]
end

node_student(("Student"))
node_staff(("Instructor / coordinator"))
node_admin(("Administrator"))

node_student -->|"uses"| node_app
node_staff -->|"uses"| node_app
node_admin -->|"uses"| node_app
node_app -->|"loads data"| node_clientdata
node_clientdata -->|"calls API"| node_api
node_api -->|"persists records"| node_models
node_models -->|"stores data"| node_postgres
node_app -->|"routes to"| node_assess
node_staff -->|"authors assessments"| node_author
node_staff -->|"imports enrollment"| node_enroll
node_api -.->|"computes evidence"| node_results
node_results -->|"reads records"| node_models
node_results -->|"uses matching"| node_matching
node_matching -.->|"uses taxonomy"| node_taxonomy
node_staff -->|"maintains catalog"| node_catalog
node_staff -->|"reviews placements"| node_decisions
node_matching -.->|"ranks positions"| node_decisions
node_admin -->|"manages programs"| node_institutions
node_admin -->|"reviews reports"| node_analytics
node_api -.->|"serves analytics"| node_analytics
node_api -.->|"publishes changes"| node_sse
node_clientdata -.->|"revalidates queries"| node_sse
node_api -->|"queues notices"| node_notifications
node_notifications -.->|"delivers email"| node_brevo
node_app -.->|"signs in with"| node_google
node_app -.->|"optional services"| node_supabase

click node_app "https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-frontend/src/App.jsx"
click node_clientdata "https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-frontend/src/hooks/useApi.js"
click node_assess "https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-frontend/src/pages/student/StudentAssessment.jsx"
click node_author "https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-frontend/src/hooks/instructor/useInstructorUpload.js"
click node_enroll "https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/enrollment_import.py"
click node_results "https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/combined_competency.py"
click node_matching "https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/recommendation_nlp.py"
click node_taxonomy "https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/skill_taxonomy.py"
click node_decisions "https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/placement_allocator.py"
click node_catalog "https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/organization.py"
click node_institutions "https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/organization.py"
click node_analytics "https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/analytics.py"
click node_notifications "https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/email_outbox.py"
click node_api "https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/views.py"
click node_models "https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/models.py"
click node_sse "https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/change_events.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_clientdata toneBlue
class node_assess,node_author,node_enroll toneAmber
class node_results,node_matching,node_taxonomy,node_decisions,node_catalog toneMint
class node_institutions,node_analytics,node_notifications toneRose
class node_api,node_models,node_sse,node_postgres,node_google,node_supabase,node_brevo,node_student,node_staff,node_admin toneIndigo
```

## Components

### Web client

- [Role-based application](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-frontend/src/App.jsx): `skillbridge-frontend/src/App.jsx`
- [API and query client](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-frontend/src/hooks/useApi.js): `skillbridge-frontend/src/hooks/useApi.js`

### Assessment workflows

- [Assessment taking](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-frontend/src/pages/student/StudentAssessment.jsx): `skillbridge-frontend/src/pages/student/StudentAssessment.jsx`
- [Assessment authoring](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-frontend/src/hooks/instructor/useInstructorUpload.js): `skillbridge-frontend/src/hooks/instructor/useInstructorUpload.js`
- [Batch enrollment](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/enrollment_import.py): `skillbridge-backend/api/enrollment_import.py`

### Competency and placement

- [Competency evidence](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/combined_competency.py): `skillbridge-backend/api/combined_competency.py`
- [Position matching](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/recommendation_nlp.py): `skillbridge-backend/api/recommendation_nlp.py`
- [Skill taxonomy](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/skill_taxonomy.py): `skillbridge-backend/api/skill_taxonomy.py`
- [Placement decisions](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/placement_allocator.py): `skillbridge-backend/api/placement_allocator.py`
- [Partner and position catalog](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/organization.py): `skillbridge-backend/api/organization.py`

### Institutional operations

- [Institute and program management](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/organization.py): `skillbridge-backend/api/organization.py`
- [Reports and analytics](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/analytics.py): `skillbridge-backend/api/analytics.py`
- [Notifications and email](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/email_outbox.py): `skillbridge-backend/api/email_outbox.py`

### API and persistence

- [Django API](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/views.py): `skillbridge-backend/api/views.py`
- [Domain records](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/models.py): `skillbridge-backend/api/models.py`
- [Live change events](https://github.com/zel-jpeg/skillbridge/blob/main/skillbridge-backend/api/change_events.py): `skillbridge-backend/api/change_events.py`
- **PostgreSQL**
- **Google OAuth**
- **Supabase services**
- **Brevo email**

### Other components

- **Student**
- **Instructor / coordinator**
- **Administrator**

## Connections

- Student → Role-based application: uses (evidence: `README.md`)
- Instructor / coordinator → Role-based application: uses (evidence: `README.md`)
- Administrator → Role-based application: uses (evidence: `README.md`)
- Role-based application → API and query client: loads data (evidence: `skillbridge-frontend/src/App.jsx`)
- API and query client → Django API: calls API (evidence: `README.md`)
- Django API → Domain records: persists records (evidence: `README.md`)
- Domain records → PostgreSQL: stores data (evidence: `README.md`)
- Role-based application → Assessment taking: routes to (evidence: `skillbridge-frontend/src/App.jsx`)
- Instructor / coordinator → Assessment authoring: authors assessments (evidence: `README.md`)
- Instructor / coordinator → Batch enrollment: imports enrollment (evidence: `README.md`)
- Django API → Competency evidence: computes evidence
- Competency evidence → Domain records: reads records (evidence: `skillbridge-backend/api/combined_competency.py`)
- Competency evidence → Position matching: uses matching (evidence: `skillbridge-backend/api/combined_competency.py`)
- Position matching → Skill taxonomy: uses taxonomy
- Instructor / coordinator → Partner and position catalog: maintains catalog (evidence: `README.md`)
- Instructor / coordinator → Placement decisions: reviews placements (evidence: `README.md`)
- Position matching → Placement decisions: ranks positions
- Administrator → Institute and program management: manages programs (evidence: `README.md`)
- Administrator → Reports and analytics: reviews reports (evidence: `README.md`)
- Django API → Reports and analytics: serves analytics
- Django API → Live change events: publishes changes
- API and query client → Live change events: revalidates queries
- Django API → Notifications and email: queues notices (evidence: `README.md`)
- Notifications and email → Brevo email: delivers email (evidence: `README.md`)
- Role-based application → Google OAuth: signs in with (evidence: `README.md`)
- Role-based application → Supabase services: optional services (evidence: `README.md`)