Skill Exchange Platform — Frontend

React client for the Skill Exchange Platform, a peer-to-peer skill exchange where users are matched with people whose skill needs mirror their own.

• Live: https://skill-exchange-frontend-eight.vercel.app
• API repo: https://github.com/FaizAkram19/SkillExchangePlatform

The API runs on a free tier that sleeps when idle — the first load after a period of inactivity takes around a minute.

Stack

Vite · React · React Router · axios · deployed on Vercel

Structure

src/
├── api/axios.js          axios instance + Bearer token interceptor
├── context/AuthContext   JWT state, persisted to localStorage
├── components/           Navbar, ProtectedRoute
├── pages/                Login, Register, Dashboard, Profile,
│                         Connections, ChangePassword
└── utils/useIsMobile.js  matchMedia breakpoint hook

Protected routes use React Router's <Outlet /> pattern: a single ProtectedRoute checks for a token and renders either the nested routes or a redirect to /login, rather than wrapping each route individually.

Light and dark themes are driven by CSS custom properties, toggled by a class on the document root and persisted to localStorage.

The layout is responsive down to 375px. Because styling is done with inline style objects — which cannot contain media queries — breakpoints are handled by a useIsMobile hook built on matchMedia, which fires only when the breakpoint is crossed rather than on every resize event.

Running locally

npm install
echo "VITE_API_URL=http://localhost:8000" > .env
npm run dev

Requires the API running on port 8000. The dev server runs at http://localhost:5173.