How jstmejosh/skillswap-frontend works
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: App.jsx Routes & App Shell · api.js HTTP API Client · Home.jsx Marketplace Page · Profile.jsx My Profile
Components 21
App Navigation
- Routes & App Shell
src/App.jsx - React Entry
src/main.jsx - Navigation Bar
src/components/Navbar.jsx
Swap Marketplace
- Marketplace Page
src/pages/Home.jsx - Create Swap Form
src/components/SwapForm.jsx - Swap Listings
src/components/SwapList.jsx - Edit Swap Modal
src/components/EditModal.jsx
Accounts & Profiles
- My Profile
src/pages/Profile.jsx - Public Profile
src/pages/PublicProfile.jsx - Registration
src/pages/Register.jsx - Login
src/pages/Login.jsx - Password Recovery
src/pages/ForgotPassword.jsx - Password Reset
src/pages/ResetPassword.jsx - Auth State
src/context/AuthContext.jsx - Route Guard
src/components/ProtectedRoute.jsx
Swap Requests
- Requests Page
src/pages/Requests.jsx - Request Composer
src/components/RequestModal.jsx
Other components
- Visitor / Member
- HTTP API Client
src/api.js - SkillSwap Backend
Connections 30
- 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