A peer-to-peer skill exchange platform where students connect to learn from each other — built with React.js.
College students often want to learn new skills like guitar, design, public speaking, or new languages, but tutoring is expensive. Meanwhile, every student has some skill they could teach others. There's no simple platform for students to find and connect with each other to exchange skills.
SkillSwap solves this by giving students a place to browse skills offered by peers and connect with them — "I'll teach you React if you teach me guitar."
SkillSwap is a frontend web application built with React.js that lets users browse a catalog of skills shared by students, filter them by category, search by keyword, sort by ratings or popularity, and view detailed pages for each skill.
- 🏠 Home Page — Hero section with featured skills
- 📋 Browse Skills — View all skills with cards showing teacher, category, and rating
- 🔍 Search Bar — Search skills by name or keyword
- 🎯 Category Filter — Filter skills by category (Music, Tech, Languages, Sports, etc.)
- 📊 Sort Options — Sort by rating (high to low), name (A-Z), or recently added
- 📄 Skill Detail Page — Dynamic route showing full info about a single skill
- ❤️ Favorites — Save skills you're interested in (stored in localStorage)
- 🌙 Dark Mode Toggle — Switch between light and dark themes
- 📱 Responsive Design — Works on mobile, tablet, and desktop
- ⏳ Loading States — Smooth loading indicators during API calls
⚠️ Error Handling — Friendly error messages when something goes wrong
- React.js — Frontend library
- React Router DOM — For routing and navigation
- Axios — For API calls
- Tailwind CSS (or plain CSS) — For styling
- Vite — Build tool
- JSONPlaceholder / Mock API — For fetching data
This project demonstrates the following React.js concepts:
- ✅ Functional Components
- ✅ JSX
- ✅ Props — Passing data between components
- ✅ useState Hook — Managing component state
- ✅ useEffect Hook — Side effects and API calls on mount
- ✅ Conditional Rendering — Showing/hiding elements based on state
- ✅ Lists & Keys — Rendering arrays of skill cards
- ✅ Event Handling — Click, change, submit events
- ✅ Controlled Components — Search input, filters, sort dropdown
- ✅ React Router — Navigation, dynamic routes (
/skill/:id), 404 page - ✅ Axios — Fetching data from APIs
- ✅ Search Functionality — Real-time search filtering
- ✅ Filter Functionality — Category-based filtering
- ✅ Sort Functionality — Multiple sort options
- ✅ Loading & Error States — Better user experience
- Node.js (v16 or higher)
- npm
- Clone the repository
git clone https://github.com/yourusername/skillswap.git
cd skillswap- Install dependencies
npm install- Start the development server
npm run dev- Open http://localhost:5173 in your browser
- Vinayak Kulshrestha
- Somya Agarwal
- Yash Gupta
⭐ Star this repo if you found it helpful!