🔄 SkillSwap

Learn What You Want. Share What You Know.

A full-stack peer-to-peer skill exchange platform that helps people discover skills, connect with compatible learners, and communicate in real time.

React · Node.js · Express.js · MongoDB · Socket.IO · JWT

🌟 What is SkillSwap?

Learning something new often means searching through courses, tutorials, and communities without knowing who can actually help.

At the same time, many people already have valuable skills they could teach.

SkillSwap connects both sides.

The platform is built around a simple idea:

Everyone has something to teach, and everyone has something to learn.

Users can create profiles, define the skills they are interested in, discover other users, build skill-based connections, and communicate through an integrated real-time messaging experience.

🚀 What SkillSwap Does

SkillSwap brings skill discovery, matching, and communication into one full-stack application.

The platform includes workflows for:

creating and managing user accounts
maintaining user profiles
adding and exploring skills
discovering people with relevant interests
creating and managing matches
exchanging messages
real-time chat communication
exploring learning-related content
interacting with the PeerBot route
managing authenticated application access

💡 The Problem

People often want to learn practical skills but face three common challenges:

1. Finding the right person

A learner may know what they want to learn but not who can help them.

2. Turning discovery into interaction

Finding someone with the right skill is useful only if users can actually connect and communicate.

3. Making peer learning accessible

Knowledge exchange does not always need to begin with a formal paid course.

Sometimes the right learning opportunity is another person.

SkillSwap explores a peer-learning model where users can move from:

Discover
   ↓
Find Relevant Skills
   ↓
Connect
   ↓
Match
   ↓
Chat
   ↓
Learn & Share

✨ Core Features

👤 User Authentication

SkillSwap includes account-based authentication for protected application workflows.

The backend uses:

JSON Web Tokens
bcrypt-based password handling
authentication middleware
protected routes

User
  ↓
Sign Up / Login
  ↓
Authentication
  ↓
JWT
  ↓
Protected Application Routes

🔍 Skill Discovery

Users can explore skills and discover people based on the learning and knowledge-sharing experience provided by the application.

The frontend includes a dedicated Discover experience, while the backend exposes skill and user-related routes.

🤝 Matching

SkillSwap models user connections through a dedicated matching layer.

Matches are handled separately from:

user profiles
skills
messages

This keeps the backend responsibilities modular and makes the connection workflow easier to extend.

User A
   |
   | Skill / Learning Interest
   v
Discovery
   |
   v
Match
   |
   v
User B

💬 Real-Time Messaging

Once users connect, SkillSwap provides messaging functionality backed by Socket.IO.

The application contains:

message data models
messaging API routes
real-time Socket.IO communication
a dedicated Chat interface
Socket.IO client integration in React

This allows the application to support interactive communication instead of operating only through static request-response pages.

React Client
     |
     | Socket.IO
     v
Express / Node Server
     |
     v
Real-Time Conversation

🤖 PeerBot

The backend also includes a dedicated peerbot route as part of the platform's learning-oriented functionality.

This separates PeerBot behavior from the primary authentication, matching, skill, user, and messaging routes.

🏗️ System Architecture

                         SkillSwap
                            |
              +-------------+-------------+
              |                           |
              v                           v
        React + Vite                 Node.js / Express
          Frontend                       Backend
              |                           |
              |      REST APIs            |
              +--------------------------> |
              |                           |
              |      Socket.IO            |
              +<-------------------------->+
                                          |
                             +------------+------------+
                             |                         |
                             v                         v
                         MongoDB                  JWT Auth
                        Mongoose                 Middleware
                             |
             +---------------+---------------+
             |               |               |
             v               v               v
           Users           Skills          Matches
                                             |
                                             v
                                          Messages

🧩 Backend Architecture

The backend is organized into clearly separated application layers.

server/
├── middleware/
│   └── authMiddleware.js
│
├── models/
│   ├── User.js
│   ├── Skill.js
│   ├── Match.js
│   └── Message.js
│
├── routes/
│   ├── auth.js
│   ├── users.js
│   ├── skills.js
│   ├── matches.js
│   ├── messages.js
│   └── peerbot.js
│
├── utils/
│
├── index.js
├── package.json
└── package-lock.json

This structure keeps authentication, persistence, domain logic, and API routing separated rather than placing the entire backend inside one large server file.

🎨 Frontend Architecture

The frontend is built using React + Vite.

client/
├── public/
│
├── src/
│   ├── api/
│   ├── assets/
│   ├── components/
│   ├── context/
│   ├── pages/
│   │   ├── Home.jsx
│   │   ├── Login.jsx
│   │   ├── Signup.jsx
│   │   ├── Dashboard.jsx
│   │   ├── Discover.jsx
│   │   ├── Chat.jsx
│   │   ├── Profile.jsx
│   │   ├── Courses.jsx
│   │   └── Upgrade.jsx
│   │
│   ├── utils/
│   ├── App.jsx
│   ├── App.css
│   ├── index.css
│   └── main.jsx
│
├── package.json
└── vite.config.js

🛠️ Tech Stack

Layer	Technology
Frontend	React
Frontend Tooling	Vite
Routing	React Router
API Client	Axios
Backend	Node.js
Web Framework	Express.js
Database	MongoDB
ODM	Mongoose
Authentication	JWT
Password Security	bcryptjs
Real-Time Communication	Socket.IO
Environment Configuration	dotenv
Cross-Origin Support	CORS
Development Tooling	Nodemon, ESLint

🔐 Authentication Flow

1. User creates an account or logs in
                  |
                  v
2. Backend validates the request
                  |
                  v
3. Password verification / account handling
                  |
                  v
4. JWT issued
                  |
                  v
5. Client stores authentication state
                  |
                  v
6. Protected requests include authentication
                  |
                  v
7. authMiddleware validates access

Authentication logic is kept separate through a dedicated middleware layer.

🔄 Application Flow

A typical SkillSwap user journey can be represented as:

Sign Up / Login
       |
       v
   Dashboard
       |
       v
 Discover Skills
       |
       v
 Discover Users
       |
       v
     Match
       |
       v
      Chat
       |
       v
 Exchange Knowledge

📦 Data Model

SkillSwap currently separates its primary application data into four models:

👤 User

Represents platform users and their account/profile information.

🧠 Skill

Represents skills available within the SkillSwap ecosystem.

🤝 Match

Represents connections between users.

💬 Message

Represents communication associated with user interactions.

Separating these entities makes the application easier to reason about and extend.

⚡ REST + Real-Time Design

SkillSwap combines two communication styles.

REST APIs

Used for application operations involving:

authentication
users
skills
matches
messages
PeerBot functionality

Socket.IO

Used for interactive real-time communication.

               SkillSwap Client
                 /          \
                /            \
             REST          Socket.IO
              |               |
              v               v
       Application Data   Live Messaging
                \            /
                 \          /
                  Node.js
                     |
                  MongoDB

⚙️ Running SkillSwap Locally

Prerequisites

Make sure you have:

Node.js
npm
MongoDB

1. Clone the Repository

git clone https://github.com/agcodes0315/SkillSwap.git
cd SkillSwap

2. Install Backend Dependencies

cd server
npm install

3. Configure Environment Variables

Create a .env file inside the server directory.

Add the environment variables required by your local configuration, such as your MongoDB connection details and authentication secret.

Example:

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key

Never commit real credentials or secrets to GitHub.

4. Start the Backend

Development mode:

npm run dev

Or:

npm start

5. Install Frontend Dependencies

Open another terminal:

cd client
npm install

6. Start the Frontend

npm run dev

Vite will display the local frontend URL in your terminal.

📁 Repository Structure

SkillSwap/
├── client/
│   ├── public/
│   ├── src/
│   │   ├── api/
│   │   ├── assets/
│   │   ├── components/
│   │   ├── context/
│   │   ├── pages/
│   │   └── utils/
│   ├── package.json
│   └── vite.config.js
│
├── server/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   ├── utils/
│   ├── index.js
│   └── package.json
│
├── .gitignore
├── package.json
└── package-lock.json

🎯 Engineering Concepts Demonstrated

SkillSwap brings together several full-stack software-engineering concepts:

REST API development
frontend/backend separation
authentication and authorization flow
password security
MongoDB data modelling
Mongoose schemas
real-time communication
Socket.IO integration
React state and context management
application routing
reusable frontend components
modular Express routes
authentication middleware
asynchronous API communication
environment-based configuration
full-stack application architecture

🌱 Potential Next Steps

Possible extensions for SkillSwap include:

richer skill recommendation logic
availability and session scheduling
user reputation and reviews
notification support
improved search and filtering
skill endorsements
learning-session history
richer PeerBot functionality
moderation and reporting
profile verification
deployment automation
backend test coverage
rate limiting
password-reset workflows
OAuth authentication
accessibility improvements
mobile-responsive refinements

👩‍💻 Author

Agrima Saxena

Software Engineering · Full-Stack Development · AI/ML · Cybersecurity

🔄 Share a skill. Discover another. Keep learning.

SkillSwap turns individual knowledge into a peer-powered learning network.

⭐ If you find the project interesting, consider starring the repository.

Name		Name	Last commit message	Last commit date
client		client
server		server
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Latest commit

History

Folders and files

Repository files navigation