A modern React-based platform for skill exchange where users can offer their expertise in exchange for learning new skills from others.
- Firebase Authentication - Secure user registration and login
- Real-time Database - Firebase Realtime Database for storing skill swaps
- Skill Management - Create, browse, and search skill exchange offers
- Advanced Filtering - Filter by category, skill level, location, and virtual availability
- Responsive Design - Works seamlessly across desktop, tablet, and mobile
- Real-time Updates - Live updates when new skill swaps are created
- User Profiles - Integrated with Firebase Auth for user management
- Communication System - Direct messaging between users ✅ (Completed)
- Rating & Reviews - User feedback and reputation system
- Advanced Matching - AI-powered skill recommendations ✅ (AI Chatbot Added)
- Calendar Integration - Schedule skill exchange sessions
- Video Calling - Built-in video chat for virtual sessions ✅ (Completed)
- Frontend: React 19 + TypeScript + Vite
- Styling: Tailwind CSS + Custom Design System
- Authentication: MongoDB + JWT
- Database: MongoDB + Mongoose
- Backend: Node.js + Express
- Real-time: Socket.IO
- AI Assistant: OpenAI GPT-4o-mini
- Routing: React Router DOM
- Animations: Framer Motion
- Icons: Lucide React
- Go to Firebase Console
- Create a new project
- Enable Authentication and Realtime Database
- In Firebase Console, go to Authentication > Sign-in method
- Enable Email/Password sign-in method
Go to Realtime Database > Rules and set:
{
"rules": {
"skillSwaps": {
".read": true,
".write": "auth != null",
"$swapId": {
".write": "auth != null && (auth.uid == data.child('userId').val() || !data.exists())"
}
},
"users": {
"$userId": {
".read": "auth != null && auth.uid == $userId",
".write": "auth != null && auth.uid == $userId"
}
}
}
}- Go to Project Settings > General
- Scroll down to "Your apps" and add a web app
- Copy the Firebase config object
git clone https://github.com/VinitaPatil2005/SkillsSwapPlatform.git
cd SkillsSwapPlatformnpm install firebase# Copy the example file
cp .env.example .env
# Edit .env with your configurationEdit .env file with your credentials:
# MongoDB Backend
VITE_API_BASE=http://localhost:4000
# OpenAI API Key (for AI Chatbot)
VITE_OPENAI_API_KEY=your-openai-api-key-hereGet your OpenAI API Key:
- Go to OpenAI Platform
- Sign up or log in
- Navigate to API Keys
- Create a new secret key
- Copy and paste it into your
.envfile
cd server
npm install
npm startThe server will run on http://localhost:4000
# In the root directory
npm run devsrc/
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components (Button, etc.)
│ ├── Header.tsx # Navigation header with auth
│ ├── SkillCard.tsx # Skill swap display card
│ └── ProtectedRoute.tsx # Route protection component
├── contexts/ # React contexts
│ └── AuthContext.tsx # Authentication state management
├── services/ # Firebase services
│ ├── authService.ts # Authentication methods
│ └── skillSwapService.ts # Database operations
├── pages/ # Route components
│ ├── HomePage.tsx # Landing page
│ ├── FindSkillPage.tsx # Browse skills
│ ├── OfferSkillPage.tsx # Create skill swap
│ ├── LoginPage.tsx # User login
│ └── SignUpPage.tsx # User registration
├── config/ # Configuration files
│ └── firebase.ts # Firebase initialization
└── layouts/ # Layout components
└── MainLayout.tsx # Main app layout
interface AuthUser {
uid: string;
email: string | null;
displayName: string | null;
photoURL: string | null;
}interface SkillSwap {
id?: string;
userId: string;
user: {
name: string;
email: string;
avatarUrl?: string;
};
skillOffered: string;
skillSought: string;
description?: string;
category?: string;
level?: 'beginner' | 'intermediate' | 'advanced';
location?: string;
isVirtual?: boolean;
tags?: string[];
createdAt: number;
updatedAt: number;
isActive: boolean;
}- Users can register with email/password
- Secure login with Firebase Auth
- Password reset functionality
- Protected routes for authenticated users
- Create detailed skill swap offers
- Include categories, skill levels, and tags
- Virtual or in-person session options
- Real-time preview while creating
- Advanced search with multiple filters
- Real-time updates when new swaps are added
- Category and skill level filtering
- Virtual session filtering
- Responsive design for all devices
- Smooth animations and transitions
- Loading states and error handling
- Intuitive navigation and user flow
This platform is ready to deploy to production! We support deployment to Vercel (frontend) and Render (backend).
-
Run pre-deployment checks:
.\pre-deploy-check.ps1
-
Follow the guides:
- 📋 Deployment Checklist - Quick checklist
- 📖 Full Deployment Guide - Detailed step-by-step instructions
Frontend (Vercel) Backend (Render) Database (MongoDB Atlas)
React App ←→ Express API + Socket.IO ←→ Cloud Database
- Vercel - Frontend hosting (Free tier available)
- Render - Backend hosting (Free tier available)
- MongoDB Atlas - Database (Free tier available)
- OpenAI - Chatbot API (Pay-per-use)
See .env.production.example and server/.env.example for required configuration.
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
If you encounter any issues or have questions, please:
- Check the Issues page
- Create a new issue if your problem isn't already reported
- Provide detailed information about your environment and the issue