Professional Skill Verification & Job Matching Platform
Bridging the Gap Between Learning and Earning
π Live Demo β’ π Documentation β’ π― Features β’ π» Installation
- Overview
- Screenshots
- System Architecture
- Key Features
- Technology Stack
- User Flows
- Installation & Setup
- Project Structure
- API Integration
- Security Features
- Proctoring System
- Dashboard & Portfolio
- Job Matching System
- Configuration
- Development Guide
- Deployment
- Contributing
- License
SkillForge is a comprehensive platform that transforms learners into verified, job-ready professionals through AI-powered skill verification, adaptive learning paths, and intelligent job matching. Our platform serves both students/learners and clients/recruiters, providing a seamless bridge between education and employment.
Transform learners into the top 1% of verified talent through:
- π AI-Personalized Learning Paths
- π‘οΈ Blockchain-Verified Credentials
- π Living Professional Identity (Skill CIBIL Score)
- π€ Smart Job Matching with Top Startups
- Students/Learners - Individuals seeking to upskill, verify their expertise, and land jobs
- Clients/Recruiters - Companies looking for verified, job-ready talent
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β LANDING PAGE β
β (Public Marketing Site) β
ββββββββββββββββββββββββ¬βββββββββββββββββββββββββββββββββββββββββββ
β
βΌ
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β AUTHENTICATION PAGE β
β (Role-Based Login/Signup) β
βββββββββββββ¬ββββββββββββββββββββββββββ¬ββββββββββββββββββββββββββββ
β β
βΌ βΌ
βββββββββββββββββββββββββ ββββββββββββββββββββββββββ
β STUDENT/LEARNER β β CLIENT/RECRUITER β
β PATH β β PATH β
βββββββββββββββββββββββββ ββββββββββββββββββββββββββ
SkillForge Platform
β
βββ Frontend (React 18 + Vite)
β βββ Landing Page
β βββ Authentication System
β βββ Student Portal
β β βββ Onboarding (CV/Resume/GitHub)
β β βββ Dashboard/Portfolio
β β βββ Learning Paths
β β βββ Proctored Assessments
β β βββ Skill Verification
β β βββ Job Browser
β βββ Recruiter Portal
β βββ Onboarding (Company Details)
β βββ Job Posting
β βββ Candidate Matching
β βββ Applicant Review
β βββ Tracking System
β
βββ Backend API
β βββ Authentication (JWT)
β βββ User Management
β βββ Exam/Assessment Engine
β βββ Proctoring Service
β βββ Portfolio Generator
β βββ Job Matching Algorithm
β βββ Analytics Engine
β
βββ Infrastructure
βββ Database (PostgreSQL/MongoDB)
βββ File Storage (AWS S3/Cloudinary)
βββ Blockchain Integration (Credentials)
βββ AI/ML Services (Matching, Proctoring)
- π CV/Resume upload and parsing
- π» GitHub portfolio integration
- π LinkedIn profile import
- π― Skill extraction and analysis
- π Skill CIBIL Score (Dynamic Professional Reputation)
- π₯ Learning streak tracking (Duolingo-style)
- π Progress visualization
- π― Adaptive roadmap generation
- π Achievement badges
- πΉ Real-time video monitoring
- π‘οΈ AI-powered cheating detection
- Tab switching detection
- Face recognition
- Multiple person detection
- Audio anomaly detection
- π Risk scoring and analytics
- π Secure exam environment
- β Blockchain-verified certificates
- π Portfolio generation
- π Skill assessment reports
- π― Proof-of-work feed
- π Browse curated job listings
- π€ AI-powered job recommendations
- π One-click applications
- π Application tracking
- π’ Company profile setup
- π Form-based information collection
- β Verification process
- π Create detailed job listings
- π― Skill requirement specification
- π° Salary range definition
- π Timeline management
- π€ Schematic similarity-based sorting
- π Skill compatibility scoring
- π Advanced filtering
- π Candidate ranking
- π₯ Review applied students
- π View detailed portfolios
- β Skill verification status
- π¬ Direct communication
- π Application statistics
- π Job post performance
- π Hiring funnel analytics
- π― Time-to-hire metrics
| Technology | Version | Purpose |
|---|---|---|
| React | 18.2.0 | UI framework |
| Vite | 5.0.8 | Build tool & dev server |
| Framer Motion | 10.16.16 | Animations & transitions |
| Lucide React | 0.263.1 | Icon library (2.5px stroke) |
| Element | Specification |
|---|---|
| Typography | Bricolage Grotesque (900 weight) for headings, DM Sans for body |
| Color Palette (Light) | Canvas: #FDF8F1, Cards: #FFFFFF, Accent: #3B82F6 |
| Color Palette (Dark) | Canvas: #0D0D0D, Cards: #1A1A1A, Accent: #10B981 |
| Border Radius | 3rem (48px) for cards, 2rem for components |
| Button Style | Pill-shaped with 3px border, 3D shadow effect |
| Service | Purpose |
|---|---|
| RESTful API | Main backend communication |
| JWT Authentication | Secure user sessions |
| WebSocket | Real-time proctoring events |
| File Upload API | CV/Resume/Document handling |
| Feature | Implementation |
|---|---|
| Video Capture | WebRTC MediaDevices API |
| Face Detection | AI/ML model integration |
| Event Tracking | Real-time event logging |
| Risk Scoring | Algorithmic confidence scoring |
1. Landing Page
β
2. Sign Up / Login (Student Role)
β
3. Onboarding
ββ Upload CV/Resume
ββ Connect GitHub
ββ Import LinkedIn
β
4. Data Parsing & Extraction
β
5. Dashboard Generation
ββ Skill CIBIL Score
ββ Learning Roadmap
ββ Recommended Paths
β
6. Learning & Assessment
ββ Complete Projects
ββ Take Proctored Tests
ββ Earn Verifications
β
7. Portfolio Building
ββ Auto-generated Dashboard
ββ Verified Credentials
β
8. Job Discovery
ββ Browse Jobs
ββ Get Recommendations
ββ Apply with One Click
β
9. Career Success
1. Landing Page
β
2. Sign Up / Login (Recruiter Role)
β
3. Company Onboarding
ββ Company Details
ββ Verification
ββ Profile Setup
β
4. Job Posting
ββ Create Job Listing
ββ Define Requirements
ββ Set Criteria
β
5. Candidate Matching
ββ AI Sorting by Similarity
ββ Review Top Matches
ββ View Detailed Profiles
β
6. Applicant Review
ββ Check Skill Verifications
ββ Review Portfolios
ββ Access Assessments
β
7. Hiring Process
ββ Contact Candidates
ββ Schedule Interviews
ββ Make Offers
β
8. Tracking & Analytics
ββ Monitor Applications
ββ Track Performance
ββ Optimize Hiring
- Node.js 18.x or higher
- npm or yarn
- Git
- Modern web browser (Chrome, Firefox, Edge, Safari)
# 1. Clone the repository
git clone https://github.com/skillforge/skillforge-platform.git
cd skillforge-platform
# 2. Install dependencies
npm install
# 3. Configure environment variables
cp .env.example .env
# Edit .env with your configuration
# 4. Start development server
npm run dev
# 5. Open browser
# Navigate to http://localhost:5173Create a .env file in the root directory:
# API Configuration
VITE_API_BASE_URL=http://127.0.0.1:8000/api
# Proctoring Service
VITE_PROCTOR_ENABLED=true
VITE_PROCTOR_FACE_DETECTION_INTERVAL=20000
# Feature Flags
VITE_ENABLE_GITHUB_INTEGRATION=true
VITE_ENABLE_LINKEDIN_IMPORT=true
VITE_ENABLE_BLOCKCHAIN_VERIFICATION=true
# Analytics
VITE_ANALYTICS_ID=your-analytics-id
# File Upload
VITE_MAX_FILE_SIZE=10485760 # 10MB
VITE_ALLOWED_FILE_TYPES=.pdf,.doc,.docx
# Job Matching
VITE_MATCHING_ALGORITHM=semantic-similarity
VITE_MIN_MATCH_SCORE=0.7# Build optimized production bundle
npm run build
# Preview production build
npm run preview
# Output will be in the /dist directoryskillforge-platform/
βββ public/ # Static assets
β βββ assets/
β β βββ skillforge-flow.png
β βββ vite.svg
β
βββ src/ # Source code
β βββ components/ # React components
β β βββ landing/
β β β βββ Hero.jsx
β β β βββ TrustBar.jsx
β β β βββ Pipeline.jsx
β β β βββ SkillCIBIL.jsx
β β β βββ Testimonials.jsx
β β β βββ FinalCTA.jsx
β β β
β β βββ auth/
β β β βββ LoginScreen.jsx
β β β βββ SignupScreen.jsx
β β β βββ RoleSelector.jsx
β β β
β β βββ student/
β β β βββ Onboarding.jsx
β β β βββ Dashboard.jsx
β β β βββ LearningRoadmap.jsx
β β β βββ Portfolio.jsx
β β β βββ JobBrowser.jsx
β β β
β β βββ recruiter/
β β β βββ CompanyOnboarding.jsx
β β β βββ JobPosting.jsx
β β β βββ CandidateMatching.jsx
β β β βββ ApplicantReview.jsx
β β β βββ TrackingDashboard.jsx
β β β
β β βββ proctor/
β β β βββ VideoMonitor.jsx
β β β βββ EventLog.jsx
β β β βββ ProctoringSession.jsx
β β β βββ ExamSelector.jsx
β β β
β β βββ shared/
β β βββ Header.jsx
β β βββ Footer.jsx
β β βββ ThemeToggle.jsx
β β βββ AnimatedCard.jsx
β β
β βββ hooks/ # Custom React hooks
β β βββ useAuth.js
β β βββ useProctor.js
β β βββ useTheme.js
β β βββ useAPI.js
β β
β βββ services/ # API & services
β β βββ api.js # Main API service
β β βββ auth.service.js
β β βββ exam.service.js
β β βββ proctor.service.js
β β βββ job.service.js
β β
β βββ utils/ # Utility functions
β β βββ constants.js
β β βββ validators.js
β β βββ helpers.js
β β
β βββ styles/ # Global styles
β β βββ index.css
β β
β βββ App.jsx # Main App component
β βββ main.jsx # Entry point
β
βββ docs/ # Documentation
β βββ API_DOCUMENTATION.md
β βββ SETUP_GUIDE.md
β βββ CONTRIBUTING.md
β
βββ .env.example # Environment template
βββ .gitignore
βββ index.html
βββ package.json
βββ vite.config.js
βββ README.md
βββ LICENSE
// Login
POST /api/auth/login/
Body: { username, password }
Response: { access, refresh, user }
// Logout
POST /api/auth/logout/
Headers: { Authorization: Bearer <token> }
// Refresh Token
POST /api/auth/refresh/
Body: { refresh }
Response: { access }// Get Exam List
GET /api/list/
Headers: { Authorization: Bearer <token> }
Response: [{ id, name, duration, questions }]
// Start Exam
POST /api/start/
Body: { exam_id }
Response: { session_id, exam, start_time }
// Submit Exam
POST /api/submit/
Body: { session_id, answers }
Response: { score, results }// Send Event
POST /api/event/
Body: {
session_id,
event_type, // TAB_SWITCH, NO_FACE, MULTIPLE_FACES, etc.
confidence, // 0.0 to 1.0
timestamp,
metadata
}
Response: { risk, event_id }
// Get Event History
GET /api/events/:sessionId/
Response: [{ id, type, confidence, timestamp, risk }]// Get Job Listings
GET /api/jobs/
Query: { skill, location, salary_min, salary_max }
Response: [{ id, title, company, requirements }]
// Post Job (Recruiter)
POST /api/jobs/
Body: { title, description, requirements, salary_range }
Response: { job_id, status }
// Get Matched Candidates
GET /api/jobs/:jobId/matches/
Response: [{ user_id, match_score, skills, portfolio }]
// Apply to Job (Student)
POST /api/jobs/:jobId/apply/
Body: { cover_letter, portfolio_link }
Response: { application_id, status }// Generate Portfolio
POST /api/portfolio/generate/
Body: { user_id }
Response: { portfolio_url, skill_score }
// Get Analytics
GET /api/analytics/user/:userId/
Response: {
skill_cibil_score,
learning_streak,
verified_skills,
job_applications
}import API from './services/api';
// 1. Authenticate
const loginResult = await API.Auth.login('username', 'password');
// 2. Get exams
const examsResult = await API.Exam.getExamList();
// 3. Start exam
const startResult = await API.Exam.startExam(examId);
// 4. Send proctoring events
await API.Proctor.sendEvent(
sessionId,
'TAB_SWITCH',
1.0,
{ source: 'visibility-api' }
);
// 5. Browse jobs
const jobsResult = await API.Job.getJobs({ skill: 'React' });
// 6. Apply to job
await API.Job.apply(jobId, {
coverLetter: '...',
portfolioLink: '...'
});- β JWT-based authentication with access and refresh tokens
- β Role-based access control (Student, Recruiter, Admin)
- β Secure password hashing (bcrypt)
- β HTTPS enforcement in production
- β CORS protection with whitelisted origins
- π‘οΈ Real-time monitoring with WebRTC
- π₯ Encrypted video streams
- π Tamper-proof event logging
- π Secure session management
- π Audit trail for all proctoring events
- π End-to-end encryption for sensitive data
- πΎ Secure file storage with S3/Cloudinary
- ποΈ Database encryption at rest
- π« XSS protection via Content Security Policy
- π‘οΈ SQL injection prevention via parameterized queries
- β GDPR compliant
- β Data anonymization options
- β User data export/deletion
- β Cookie consent management
- β Privacy policy enforcement
| Event Type | Description | Confidence | Risk Impact |
|---|---|---|---|
| TAB_SWITCH | User switched browser tab/window | 1.0 | High |
| NO_FACE | No face detected in video feed | 0.5-0.9 | Medium-High |
| MULTIPLE_FACES | Multiple people detected | 0.7-1.0 | High |
| LOOKING_AWAY | User not looking at screen | 0.4-0.7 | Medium |
| AUDIO_DETECTED | Unexpected audio/voice detected | 0.6-0.9 | Medium-High |
Risk Level = (
(Event Count Γ Event Weight) +
(Confidence Score Γ 0.3) +
(Time Factor Γ 0.2)
) / 100
Risk Categories:
- Low Risk: 0-0.39 (Green)
- Medium Risk: 0.40-0.69 (Yellow)
- High Risk: 0.70-1.00 (Red)-
Video Monitoring
- Real-time webcam feed
- Face detection and tracking
- Recording indicator
- Camera permission handling
-
Event Tracking
- Automatic event detection
- Manual event triggers (testing)
- Timestamp logging
- Event history
-
Analytics Dashboard
- Live risk score
- Event counter
- Event log with filtering
- Session statistics
-
Security Measures
- Tab switching detection
- Window blur monitoring
- Fullscreen enforcement (optional)
- Copy-paste blocking (optional)
- Range: 0-1000 points
- Calculation Factors:
- Technical Skills (35%)
- Project Quality (30%)
- Peer Reviews (20%)
- Learning Consistency (15%)
- Updates: Real-time based on verified achievements
- Daily activity tracking
- Duolingo-style flame icon
- Motivation system
- Streak recovery options
- 12-month visualization
- Contribution graph style
- Hover tooltips with activity count
- Color intensity based on activity level
- Personalized learning path
- Skill modules with status (completed/current/locked)
- Verification gates
- Progress tracking
- React Expert, Node.js Pro, AWS Certified, etc.
- Blockchain-verified credentials
- Shareable on LinkedIn/GitHub
- QR code for verification
Auto-generated sections:
- Personal information
- Skill CIBIL Score (prominent display)
- Verified skills with badges
- Project showcase
- Assessment results
- Proof-of-work feed
- Recommendations
Customization options:
- Theme selection
- Section ordering
- Privacy controls
- Download as PDF
Semantic Similarity Scoring
1. Extract Skills from Job Description
β
2. Extract Skills from Student Portfolio
β
3. Calculate Similarity Score
- Exact Match: 1.0
- Synonym Match: 0.9
- Related Skill: 0.7-0.8
- No Match: 0.0
β
4. Weighted Scoring
- Required Skills: 50%
- Preferred Skills: 30%
- Experience Level: 20%
β
5. Rank Candidates by Total Score
For Students:
- π― Personalized job recommendations
- π Match score visibility (0-100%)
- π Skill gap analysis
- π‘ Improvement suggestions
For Recruiters:
- π€ AI-sorted candidate list
- π Match score per candidate
- π Advanced filtering
- π Batch candidate comparison
Student View:
- Application status (Pending/Under Review/Shortlisted/Rejected)
- Application date
- Company response time
- Interview scheduling
Recruiter View:
- Total applications
- Shortlisted candidates
- Interview scheduled
- Offers made
- Time-to-hire metrics
// Light Mode Colors
const lightTheme = {
canvas: '#FDF8F1',
cardBg: '#FFFFFF',
textPrimary: '#2D1B14',
textSecondary: '#6B5B52',
accentBlue: '#3B82F6',
accentGreen: '#10B981',
accentYellow: '#FDE047'
};
// Dark Mode Colors
const darkTheme = {
canvas: '#0D0D0D',
cardBg: '#1A1A1A',
textPrimary: '#FFFFFF',
textSecondary: '#A0A0A0',
accentBlue: '#60A5FA',
accentGreen: '#34D399',
accentOrange: '#FB923C'
};// In .env or config.js
const featureFlags = {
enableProctoring: true,
enableGitHubSync: true,
enableLinkedInImport: true,
enableBlockchainVerification: true,
enableJobMatching: true,
enablePortfolioGeneration: true,
enableAnalytics: true
};// In api.js
const API_CONFIG = {
BASE_URL: process.env.VITE_API_BASE_URL,
TIMEOUT: 30000,
RETRY: {
maxAttempts: 3,
delay: 1000,
backoffMultiplier: 2
}
};- JavaScript: ES6+ with JSX
- Naming: camelCase for variables, PascalCase for components
- Comments: JSDoc for functions, inline for complex logic
- Formatting: Prettier with 2-space indentation
// Component template
import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
/**
* Component description
* @param {Object} props - Component props
* @param {string} props.title - Title text
* @param {Function} props.onAction - Callback function
*/
const MyComponent = ({ title, onAction }) => {
const [state, setState] = useState(initialValue);
useEffect(() => {
// Side effects
}, [dependencies]);
return (
<motion.div
className="component-class"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
>
{/* Component content */}
</motion.div>
);
};
export default MyComponent;# Run unit tests
npm run test
# Run with coverage
npm run test:coverage
# Run E2E tests
npm run test:e2e# Create feature branch
git checkout -b feature/new-feature
# Make changes and commit
git add .
git commit -m "feat: Add new feature"
# Push to remote
git push origin feature/new-feature
# Create pull request on GitHubfeat: Add new feature
fix: Bug fix
docs: Documentation update
style: Code style changes
refactor: Code refactoring
test: Add tests
chore: Build/tooling changes
# Install Vercel CLI
npm install -g vercel
# Deploy to production
vercel --prod
# Set environment variables
vercel env add VITE_API_BASE_URL production# Install Netlify CLI
npm install -g netlify-cli
# Build and deploy
npm run build
netlify deploy --prod --dir=dist# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
EXPOSE 5173
CMD ["npm", "run", "preview"]# Build Docker image
docker build -t skillforge:latest .
# Run container
docker run -p 5173:5173 skillforge:latest# .github/workflows/deploy.yml
name: Deploy
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '18'
- run: npm ci
- run: npm run build
- run: npm run test
- uses: vercel/actions@v1
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}// Lazy loading components
const Dashboard = React.lazy(() => import('./components/Dashboard'));
const Proctor = React.lazy(() => import('./components/Proctor'));
// Usage with Suspense
<Suspense fallback={<LoadingSpinner />}>
<Dashboard />
</Suspense>- β Lazy load routes and heavy components
- β Use React.memo for expensive renders
- β Implement virtualization for long lists
- β Optimize images (WebP, lazy loading)
- β Minimize bundle size (tree shaking)
- β Use CDN for static assets
- β Enable compression (gzip/brotli)
- β Implement service worker caching
| Metric | Target | Current |
|---|---|---|
| First Contentful Paint | <1.5s | 1.2s |
| Time to Interactive | <3.5s | 2.8s |
| Largest Contentful Paint | <2.5s | 2.1s |
| Cumulative Layout Shift | <0.1 | 0.05 |
| Total Bundle Size | <300KB | 245KB |
We welcome contributions from the community! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- All submissions require review from 2+ maintainers
- CI/CD checks must pass
- Code coverage must be maintained/improved
- Documentation must be updated
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License
Copyright (c) 2026 SkillForge
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.






