# kxhor/skill-swap architecture

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

- Interactive diagram: https://gitdiagram.com/kxhor/skill-swap
- Repository: https://github.com/kxhor/skill-swap

## Overview

Skill Swap is a mutual skill-learning platform: users create profiles and list skills, discover compatible partners, propose and manage exchanges, then communicate and schedule sessions; completed swaps can receive feedback. The React client uses REST and Socket.IO to reach a Flask backend, which applies domain logic and persists relational data. Admin moderation, AI matching, image hosting, and calendar scheduling are documented capabilities. Some route and socket internals were not sampled, so uncertain subsystem wiring is omitted.

Main entry points: [`frontend/src/lib/api.ts`](https://github.com/kxhor/skill-swap/blob/master/frontend/src/lib/api.ts) (HTTP API client), [`backend/app/__init__.py`](https://github.com/kxhor/skill-swap/blob/master/backend/app/__init__.py) (Flask application), [`frontend/src/App.tsx`](https://github.com/kxhor/skill-swap/blob/master/frontend/src/App.tsx) (Application shell), [`frontend/src/context/SocketContext.tsx`](https://github.com/kxhor/skill-swap/blob/master/frontend/src/context/SocketContext.tsx) (Socket client state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_app["Application shell<br/>[App.tsx]"]
  node_socketui["Socket client state<br/>[SocketContext.tsx]"]
  node_api["HTTP API client<br/>[api.ts]"]
end

subgraph group_identity["Identity and profiles"]
  node_authui["Auth state<br/>[AuthContext.tsx]"]
  node_profileui["Profiles and skills<br/>[MySkills.tsx]"]
  node_discovery["Partner discovery<br/>[BrowseUsers.tsx]"]
  node_matching["AI matching<br/>[gemini_match.py]"]
  node_usersapi["User API<br/>[users.py]"]
  node_userstore[("User and skill records<br/>[user.py]")]
end

subgraph group_exchange["Skill exchange"]
  node_swapui["Swap requests<br/>[SwapRequests.tsx]"]
  node_swapclient["Swap API client<br/>[useSwaps.ts]"]
  node_swapsapi["Swap lifecycle API<br/>[swaps.py]"]
  node_swapstore[("Swap records<br/>[swap_request.py]")]
  node_scheduleui["Session scheduling<br/>[Availability.tsx]"]
  node_sessionstore[("Scheduled sessions")]
  node_calendar["Calendar links<br/>[calendar_link.py]"]
  node_chatui["Real-time chat<br/>[ChatPanel.tsx]"]
  node_socketevents["Socket event handlers<br/>[socket_events.py]"]
  node_feedbackui["Reviews and feedback<br/>[Reviews.tsx]"]
  node_feedbackapi["Feedback API<br/>[feedback.py]"]
  node_feedbackstore[("Feedback records<br/>[feedback.py]")]
end

subgraph group_platform["Platform services"]
  node_adminui["Admin dashboard<br/>[AdminDashboard.tsx]"]
  node_adminapi["Admin API<br/>[admin.py]"]
  node_adminstore[("Admin records<br/>[admin.py]")]
  node_backend["Flask application<br/>[__init__.py]"]
end

node_person(("Platform user"))
node_admin(("Administrator"))
node_cloudinary["Image hosting"]
node_gemini["Google Gemini"]
node_database[("PostgreSQL")]

node_person -->|"uses"| node_app
node_admin -->|"uses"| node_app
node_app -->|"provides auth"| node_authui
node_app -->|"provides sockets"| node_socketui
node_authui -->|"requests"| node_api
node_profileui -->|"requests"| node_api
node_discovery -->|"requests"| node_api
node_swapui -->|"uses"| node_swapclient
node_swapclient -->|"requests"| node_api
node_scheduleui -->|"requests"| node_api
node_chatui -->|"loads history"| node_api
node_chatui -->|"sends messages"| node_socketui
node_feedbackui -->|"requests"| node_api
node_adminui -->|"requests"| node_api
node_api -->|"HTTP requests"| node_backend
node_backend -->|"registers routes"| node_usersapi
node_backend -->|"registers routes"| node_swapsapi
node_backend -->|"registers routes"| node_feedbackapi
node_backend -->|"registers routes"| node_adminapi
node_usersapi -->|"reads and writes"| node_userstore
node_swapsapi -->|"reads and writes"| node_swapstore
node_feedbackapi -->|"reads and writes"| node_feedbackstore
node_adminapi -->|"reads and writes"| node_adminstore
node_userstore -->|"persists"| node_database
node_swapstore -->|"persists"| node_database
node_sessionstore -->|"persists"| node_database
node_feedbackstore -->|"persists"| node_database
node_adminstore -->|"persists"| node_database
node_socketui -->|"Socket.IO"| node_socketevents
node_socketevents -->|"events"| node_socketui
node_backend -.->|"initializes hosting"| node_cloudinary

click node_app "https://github.com/kxhor/skill-swap/blob/master/frontend/src/App.tsx"
click node_authui "https://github.com/kxhor/skill-swap/blob/master/frontend/src/context/AuthContext.tsx"
click node_profileui "https://github.com/kxhor/skill-swap/blob/master/frontend/src/pages/MySkills.tsx"
click node_discovery "https://github.com/kxhor/skill-swap/blob/master/frontend/src/pages/BrowseUsers.tsx"
click node_matching "https://github.com/kxhor/skill-swap/blob/master/backend/app/utils/gemini_match.py"
click node_usersapi "https://github.com/kxhor/skill-swap/blob/master/backend/app/routes/users.py"
click node_userstore "https://github.com/kxhor/skill-swap/blob/master/backend/app/models/user.py"
click node_swapui "https://github.com/kxhor/skill-swap/blob/master/frontend/src/pages/SwapRequests.tsx"
click node_swapclient "https://github.com/kxhor/skill-swap/blob/master/frontend/src/hooks/useSwaps.ts"
click node_swapsapi "https://github.com/kxhor/skill-swap/blob/master/backend/app/routes/swaps.py"
click node_swapstore "https://github.com/kxhor/skill-swap/blob/master/backend/app/models/swap_request.py"
click node_scheduleui "https://github.com/kxhor/skill-swap/blob/master/frontend/src/pages/Availability.tsx"
click node_sessionstore "https://github.com/kxhor/skill-swap/blob/master/backend/app/models/scheduled_session.py"
click node_calendar "https://github.com/kxhor/skill-swap/blob/master/backend/app/utils/calendar_link.py"
click node_chatui "https://github.com/kxhor/skill-swap/blob/master/frontend/src/components/ChatPanel.tsx"
click node_socketui "https://github.com/kxhor/skill-swap/blob/master/frontend/src/context/SocketContext.tsx"
click node_socketevents "https://github.com/kxhor/skill-swap/blob/master/backend/app/socket_events.py"
click node_feedbackui "https://github.com/kxhor/skill-swap/blob/master/frontend/src/pages/Reviews.tsx"
click node_feedbackapi "https://github.com/kxhor/skill-swap/blob/master/backend/app/routes/feedback.py"
click node_feedbackstore "https://github.com/kxhor/skill-swap/blob/master/backend/app/models/feedback.py"
click node_adminui "https://github.com/kxhor/skill-swap/blob/master/frontend/src/pages/AdminDashboard.tsx"
click node_adminapi "https://github.com/kxhor/skill-swap/blob/master/backend/app/routes/admin.py"
click node_adminstore "https://github.com/kxhor/skill-swap/blob/master/backend/app/models/admin.py"
click node_backend "https://github.com/kxhor/skill-swap/blob/master/backend/app/__init__.py"
click node_api "https://github.com/kxhor/skill-swap/blob/master/frontend/src/lib/api.ts"

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_socketui,node_api,node_person toneBlue
class node_authui,node_profileui,node_discovery,node_matching,node_usersapi,node_userstore,node_database toneAmber
class node_swapui,node_swapclient,node_swapsapi,node_swapstore,node_scheduleui,node_sessionstore,node_calendar,node_chatui,node_socketevents,node_feedbackui,node_feedbackapi,node_feedbackstore toneMint
class node_adminui,node_adminapi,node_adminstore,node_backend toneRose
class node_admin,node_cloudinary,node_gemini toneIndigo
```

## Components

### Web client

- [Application shell](https://github.com/kxhor/skill-swap/blob/master/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Socket client state](https://github.com/kxhor/skill-swap/blob/master/frontend/src/context/SocketContext.tsx): `frontend/src/context/SocketContext.tsx`
- [HTTP API client](https://github.com/kxhor/skill-swap/blob/master/frontend/src/lib/api.ts): `frontend/src/lib/api.ts`

### Identity and profiles

- [Auth state](https://github.com/kxhor/skill-swap/blob/master/frontend/src/context/AuthContext.tsx): `frontend/src/context/AuthContext.tsx`
- [Profiles and skills](https://github.com/kxhor/skill-swap/blob/master/frontend/src/pages/MySkills.tsx): `frontend/src/pages/MySkills.tsx`
- [Partner discovery](https://github.com/kxhor/skill-swap/blob/master/frontend/src/pages/BrowseUsers.tsx): `frontend/src/pages/BrowseUsers.tsx`
- [AI matching](https://github.com/kxhor/skill-swap/blob/master/backend/app/utils/gemini_match.py): `backend/app/utils/gemini_match.py`
- [User API](https://github.com/kxhor/skill-swap/blob/master/backend/app/routes/users.py): `backend/app/routes/users.py`
- [User and skill records](https://github.com/kxhor/skill-swap/blob/master/backend/app/models/user.py): `backend/app/models/user.py`

### Skill exchange

- [Swap requests](https://github.com/kxhor/skill-swap/blob/master/frontend/src/pages/SwapRequests.tsx): `frontend/src/pages/SwapRequests.tsx`
- [Swap API client](https://github.com/kxhor/skill-swap/blob/master/frontend/src/hooks/useSwaps.ts): `frontend/src/hooks/useSwaps.ts`
- [Swap lifecycle API](https://github.com/kxhor/skill-swap/blob/master/backend/app/routes/swaps.py): `backend/app/routes/swaps.py`
- [Swap records](https://github.com/kxhor/skill-swap/blob/master/backend/app/models/swap_request.py): `backend/app/models/swap_request.py`
- [Session scheduling](https://github.com/kxhor/skill-swap/blob/master/frontend/src/pages/Availability.tsx): `frontend/src/pages/Availability.tsx`
- [Scheduled sessions](https://github.com/kxhor/skill-swap/blob/master/backend/app/models/scheduled_session.py): `backend/app/models/scheduled_session.py`
- [Calendar links](https://github.com/kxhor/skill-swap/blob/master/backend/app/utils/calendar_link.py): `backend/app/utils/calendar_link.py`
- [Real-time chat](https://github.com/kxhor/skill-swap/blob/master/frontend/src/components/ChatPanel.tsx): `frontend/src/components/ChatPanel.tsx`
- [Socket event handlers](https://github.com/kxhor/skill-swap/blob/master/backend/app/socket_events.py): `backend/app/socket_events.py`
- [Reviews and feedback](https://github.com/kxhor/skill-swap/blob/master/frontend/src/pages/Reviews.tsx): `frontend/src/pages/Reviews.tsx`
- [Feedback API](https://github.com/kxhor/skill-swap/blob/master/backend/app/routes/feedback.py): `backend/app/routes/feedback.py`
- [Feedback records](https://github.com/kxhor/skill-swap/blob/master/backend/app/models/feedback.py): `backend/app/models/feedback.py`

### Platform services

- [Admin dashboard](https://github.com/kxhor/skill-swap/blob/master/frontend/src/pages/AdminDashboard.tsx): `frontend/src/pages/AdminDashboard.tsx`
- [Admin API](https://github.com/kxhor/skill-swap/blob/master/backend/app/routes/admin.py): `backend/app/routes/admin.py`
- [Admin records](https://github.com/kxhor/skill-swap/blob/master/backend/app/models/admin.py): `backend/app/models/admin.py`
- [Flask application](https://github.com/kxhor/skill-swap/blob/master/backend/app/__init__.py): `backend/app/__init__.py`

### Other components

- **Platform user**
- **Administrator**
- **Image hosting**
- **Google Gemini**
- **PostgreSQL**

## Connections

- Platform user → Application shell: uses
- Administrator → Application shell: uses
- Application shell → Auth state: provides auth
- Application shell → Socket client state: provides sockets
- Auth state → HTTP API client: requests
- Profiles and skills → HTTP API client: requests
- Partner discovery → HTTP API client: requests
- Swap requests → Swap API client: uses
- Swap API client → HTTP API client: requests
- Session scheduling → HTTP API client: requests
- Real-time chat → HTTP API client: loads history
- Real-time chat → Socket client state: sends messages
- Reviews and feedback → HTTP API client: requests
- Admin dashboard → HTTP API client: requests
- HTTP API client → Flask application: HTTP requests
- Flask application → User API: registers routes
- Flask application → Swap lifecycle API: registers routes
- Flask application → Feedback API: registers routes
- Flask application → Admin API: registers routes
- User API → User and skill records: reads and writes
- Swap lifecycle API → Swap records: reads and writes
- Feedback API → Feedback records: reads and writes
- Admin API → Admin records: reads and writes
- User and skill records → PostgreSQL: persists
- Swap records → PostgreSQL: persists
- Scheduled sessions → PostgreSQL: persists
- Feedback records → PostgreSQL: persists
- Admin records → PostgreSQL: persists
- Socket client state → Socket event handlers: Socket.IO
- Socket event handlers → Socket client state: events
- Flask application → Image hosting: initializes hosting