SkillShare is a full-stack, real-time application designed to connect individuals for local skill exchange, learning, and collaborative projects. It transforms a basic social platform into a thriving local economy by integrating powerful features for community engagement.
- Real-time Geo-Visualization: Map view of skilled users in the local area
- AI-Driven Matching: Initial user suggestions based on your learning goals
- Session Scheduling & Marketplace: Schedule classes, join public sessions, and sell services for community credits/tokens
- Real-time Communication: Private 1:1 chat capability between users
The project is built as a complete MERN stack application with real-time capabilities.
| Category | Technology | Purpose |
|---|---|---|
| Frontend | React (Vite), Tailwind CSS | UI components and application logic. Utilizes modern hooks and components |
| Real-time | Socket.io-Client | Establishes persistent connection for instant private messaging |
| Mapping | Leaflet / React-Leaflet | Interactive map visualization for discovering nearby users |
| Scheduling | React-Datepicker | Provides intuitive calendar interface for session management |
| Backend | Node.js (Express) | RESTful API server |
| WebSockets | Socket.io | Manages real-time connections, message routing, and authentication |
| Database | MongoDB (Mongoose ODM) | Stores users, skills (offered/learning), services, sessions, and messages |
| Authentication | JWT | Secure token-based access control |
Includes fields for Skills I Offer and Skills I Want to Learn.
On initial load, the Discover page prioritizes suggesting users whose offered skills match the logged-in user's learning goals.
- Search and filter local users by name, location, and skills
- Map visualization displays the location of nearby members fetched from the API
Users can start a secure, instant message conversation directly from another user's profile.
- Users can list services (e.g., "1-Hour Plumbing Help") with a price in credits
- Users can purchase services, with simplified backend transaction logic to debit credits
- Users can schedule new sessions (classes/workshops)
- Calendar view tracks sessions the user is teaching or attending
- "Browse Sessions" tab allows users to join upcoming classes
Users can propose and volunteer for local community projects.
Follow these steps to get the SkillShare application running locally.
- Node.js (v18+) and npm/yarn
- A running instance of MongoDB (local or cloud-hosted, e.g., MongoDB Atlas)
git clone https://github.com/Tanim-10/IIT-Hackathon
cd IIT-Hackathon-
Navigate into the server directory:
cd server -
Install dependencies:
npm install
-
Install real-time libraries:
npm install socket.io
-
Create a
.envfile in the/serverdirectory and configure your MongoDB connection and secrets:PORT=5000 MONGODB_URI="mongodb+srv://<USER>:<PASS>@<CLUSTER>/skillsharedb?retryWrites=true&w=majority" JWT_SECRET="YOUR_VERY_STRONG_SECRET_KEY"
-
Seed the database (required for testing map and sessions):
node seed.js
-
Start the backend server:
npm run dev
-
Open a new terminal tab and navigate into the client directory:
cd ../client -
Install dependencies, including the necessary client-side libraries:
npm install npm install socket.io-client react-leaflet leaflet react-datepicker date-fns
-
Start the frontend development server:
npm run dev
-
The application will be accessible at
http://localhost:5173(or the port specified by your Vite/React setup)
Video: https://drive.google.com/file/d/1DVrVwEtggKhAEJCGj_S2yb4FEOmwKvRA/view?usp=sharing
| Resource | Link |
|---|---|
| Live Deployment | https://skillshare-frontend.vercel.app |
| Project Repository | https://github.com/Tanim-10/IIT-Hackathon |
| Project Report / Documentation | https://drive.google.com/file/d/1JbPRiyOrcOACgO6bnZ8J31SU4bL_N2fT/view?usp=sharing |