# jstmejosh/skillswap-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/jstmejosh/skillswap-frontend
- Repository: https://github.com/jstmejosh/skillswap-frontend

## Overview

SkillSwap Frontend is a React client for a community skill-exchange marketplace. Users browse and search offers, publish or manage swaps, request exchanges, and follow request outcomes; accepted requests expose contact details for arranging the exchange. Account flows cover registration, login, password recovery, and profiles. The shared API client attaches stored JWTs to backend requests, while auth context keeps the current user and token available to the interface. Some page implementations are unsampled, so their detailed API wiring is not inferred.

Main entry points: [`src/App.jsx`](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/App.jsx) (Routes & App Shell), [`src/api.js`](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/api.js) (HTTP API Client), [`src/pages/Home.jsx`](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/Home.jsx) (Marketplace Page), [`src/pages/Profile.jsx`](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/Profile.jsx) (My Profile)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App Navigation"]
  node_app["Routes &amp; App Shell<br/>[App.jsx]"]
  node_entry["React Entry<br/>[main.jsx]"]
  node_navbar["Navigation Bar<br/>[Navbar.jsx]"]
end

subgraph group_marketplace["Swap Marketplace"]
  node_home["Marketplace Page<br/>[Home.jsx]"]
  node_swapform["Create Swap Form<br/>[SwapForm.jsx]"]
  node_swaplist["Swap Listings<br/>[SwapList.jsx]"]
  node_editmodal["Edit Swap Modal<br/>[EditModal.jsx]"]
end

subgraph group_identity["Accounts &amp; Profiles"]
  node_profile["My Profile<br/>[Profile.jsx]"]
  node_publicprofile["Public Profile<br/>[PublicProfile.jsx]"]
  node_register["Registration<br/>[Register.jsx]"]
  node_login["Login<br/>[Login.jsx]"]
  node_forgot["Password Recovery<br/>[ForgotPassword.jsx]"]
  node_reset["Password Reset<br/>[ResetPassword.jsx]"]
  node_auth["Auth State<br/>[AuthContext.jsx]"]
  node_protected["Route Guard<br/>[ProtectedRoute.jsx]"]
end

subgraph group_requests["Swap Requests"]
  node_requests["Requests Page<br/>[Requests.jsx]"]
  node_requestmodal["Request Composer<br/>[RequestModal.jsx]"]
end

node_visitor(("Visitor / Member"))
node_api["HTTP API Client<br/>[api.js]"]
node_backend{{"SkillSwap Backend"}}
node_whatsapp{{"WhatsApp"}}

node_visitor -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"routes"| node_home
node_app -->|"routes"| node_register
node_app -->|"routes"| node_login
node_app -->|"routes"| node_forgot
node_app -->|"routes"| node_reset
node_app -->|"routes"| node_profile
node_app -->|"routes"| node_requests
node_app -->|"routes"| node_publicprofile
node_app -->|"provides auth"| node_auth
node_app -->|"guards routes"| node_protected
node_home -->|"fetches swaps"| node_api
node_home -->|"renders"| node_swapform
node_home -->|"renders results"| node_swaplist
node_home -->|"opens editor"| node_editmodal
node_swapform -->|"submits swap"| node_api
node_swaplist -->|"deletes swap"| node_api
node_swaplist -->|"opens request"| node_requestmodal
node_editmodal -->|"updates swap"| node_api
node_profile -->|"loads swaps; saves profile"| node_api
node_profile -->|"updates user"| node_auth
node_profile -->|"shows swaps"| node_swaplist
node_navbar -->|"loads pending count"| node_api
node_navbar -->|"reads; logs out"| node_auth
node_requestmodal -->|"submits request"| node_api
node_requests -->|"loads; changes status"| node_api
node_requests -.->|"opens contact link"| node_whatsapp
node_api -->|"sends HTTP requests"| node_backend
node_auth -->|"persists session"| node_visitor

click node_app "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/App.jsx"
click node_entry "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/main.jsx"
click node_home "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/Home.jsx"
click node_swapform "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/components/SwapForm.jsx"
click node_swaplist "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/components/SwapList.jsx"
click node_editmodal "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/components/EditModal.jsx"
click node_profile "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/Profile.jsx"
click node_publicprofile "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/PublicProfile.jsx"
click node_register "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/Register.jsx"
click node_login "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/Login.jsx"
click node_forgot "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/ForgotPassword.jsx"
click node_reset "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/ResetPassword.jsx"
click node_auth "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/context/AuthContext.jsx"
click node_protected "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/components/ProtectedRoute.jsx"
click node_navbar "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/components/Navbar.jsx"
click node_requests "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/Requests.jsx"
click node_requestmodal "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/components/RequestModal.jsx"
click node_api "https://github.com/jstmejosh/skillswap-frontend/blob/master/src/api.js"

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_entry,node_navbar,node_api toneBlue
class node_home,node_swapform,node_swaplist,node_editmodal toneAmber
class node_profile,node_publicprofile,node_register,node_login,node_forgot,node_reset,node_auth,node_protected toneMint
class node_requests,node_requestmodal toneRose
class node_visitor,node_backend,node_whatsapp toneIndigo
```

## Components

### App Navigation

- [Routes & App Shell](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/App.jsx): `src/App.jsx`
- [React Entry](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/main.jsx): `src/main.jsx`
- [Navigation Bar](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/components/Navbar.jsx): `src/components/Navbar.jsx`

### Swap Marketplace

- [Marketplace Page](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Create Swap Form](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/components/SwapForm.jsx): `src/components/SwapForm.jsx`
- [Swap Listings](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/components/SwapList.jsx): `src/components/SwapList.jsx`
- [Edit Swap Modal](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/components/EditModal.jsx): `src/components/EditModal.jsx`

### Accounts & Profiles

- [My Profile](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/Profile.jsx): `src/pages/Profile.jsx`
- [Public Profile](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/PublicProfile.jsx): `src/pages/PublicProfile.jsx`
- [Registration](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/Register.jsx): `src/pages/Register.jsx`
- [Login](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Password Recovery](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/ForgotPassword.jsx): `src/pages/ForgotPassword.jsx`
- [Password Reset](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/ResetPassword.jsx): `src/pages/ResetPassword.jsx`
- [Auth State](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Route Guard](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/components/ProtectedRoute.jsx): `src/components/ProtectedRoute.jsx`

### Swap Requests

- [Requests Page](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/pages/Requests.jsx): `src/pages/Requests.jsx`
- [Request Composer](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/components/RequestModal.jsx): `src/components/RequestModal.jsx`

### Other components

- **Visitor / Member**
- [HTTP API Client](https://github.com/jstmejosh/skillswap-frontend/blob/master/src/api.js): `src/api.js`
- **SkillSwap Backend**
- **WhatsApp**

## Connections

- Visitor / Member → React Entry: opens app
- React Entry → Routes & App Shell: renders
- Routes & App Shell → Marketplace Page: routes
- Routes & App Shell → Registration: routes
- Routes & App Shell → Login: routes
- Routes & App Shell → Password Recovery: routes
- Routes & App Shell → Password Reset: routes
- Routes & App Shell → My Profile: routes
- Routes & App Shell → Requests Page: routes
- Routes & App Shell → Public Profile: routes
- Routes & App Shell → Auth State: provides auth
- Routes & App Shell → Route Guard: guards routes
- Marketplace Page → HTTP API Client: fetches swaps
- Marketplace Page → Create Swap Form: renders
- Marketplace Page → Swap Listings: renders results
- Marketplace Page → Edit Swap Modal: opens editor
- Create Swap Form → HTTP API Client: submits swap
- Swap Listings → HTTP API Client: deletes swap
- Swap Listings → Request Composer: opens request
- Edit Swap Modal → HTTP API Client: updates swap
- My Profile → HTTP API Client: loads swaps; saves profile
- My Profile → Auth State: updates user
- My Profile → Swap Listings: shows swaps
- Navigation Bar → HTTP API Client: loads pending count
- Navigation Bar → Auth State: reads; logs out
- Request Composer → HTTP API Client: submits request
- Requests Page → HTTP API Client: loads; changes status
- Requests Page → WhatsApp: opens contact link
- HTTP API Client → SkillSwap Backend: sends HTTP requests
- Auth State → Visitor / Member: persists session