SkillForge

Professional Skill Verification & Job Matching Platform

Bridging the Gap Between Learning and Earning

🚀 Live Demo • 📖 Documentation • 🎯 Features • 💻 Installation • 🐛 Troubleshooting • ❓ FAQ

📑 Table of Contents

Overview
Screenshots
System Architecture
Key Features
Technology Stack
User Flows
Installation & Setup
Environment Configuration
Project Structure
Database Schema
API Integration
Security Features
Proctoring System
Dashboard & Portfolio
Job Matching System
Configuration
Development Guide
Testing & Quality Assurance
Performance Optimization
Monitoring & Logging
Deployment
Common Issues & Troubleshooting
FAQ
Roadmap
Support & Contact
Contributing
License

📸 Screenshots

Loader Page:

Home Page:

User Selection Page:

User Profile Page:

Browse Job Section:

Learning Page:

🌟 Overview

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.

🎯 Mission

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

👥 Target Users

Students/Learners - Individuals seeking to upskill, verify their expertise, and land jobs
Clients/Recruiters - Companies looking for verified, job-ready talent

🏗️ System Architecture

Website Flowchart:

Website Flow Overview:

┌─────────────────────────────────────────────────────────────────┐
│                        LANDING PAGE                             │
│                  (Public Marketing Site)                        │
└──────────────────────┬──────────────────────────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────────────────────────┐
│                   AUTHENTICATION PAGE                           │
│              (Role-Based Login/Signup)                          │
└───────────┬─────────────────────────┬───────────────────────────┘
            │                         │
            ▼                         ▼
┌───────────────────────┐   ┌────────────────────────┐
│   STUDENT/LEARNER     │   │   CLIENT/RECRUITER     │
│       PATH            │   │        PATH            │
└───────────────────────┘   └────────────────────────┘

Detailed Component Architecture

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)

✨ Key Features

🎓 For Students/Learners

1. Intelligent Onboarding

📄 CV/Resume upload and parsing
💻 GitHub portfolio integration
🔗 LinkedIn profile import
🎯 Skill extraction and analysis

2. Personalized Learning Dashboard

📊 Skill CIBIL Score (Dynamic Professional Reputation)
🔥 Learning streak tracking (Duolingo-style)
📈 Progress visualization
🎯 Adaptive roadmap generation
🏆 Achievement badges

3. Proctored Assessment System

📹 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

4. Skill Verification & Credentials

✅ Blockchain-verified certificates
🏅 Portfolio generation
📊 Skill assessment reports
🎯 Proof-of-work feed

5. Job Discovery & Application

🔍 Browse curated job listings
🤖 AI-powered job recommendations
📝 One-click applications
📊 Application tracking

🏢 For Clients/Recruiters

1. Streamlined Onboarding

🏢 Company profile setup
📋 Form-based information collection
✅ Verification process

2. Smart Job Posting

📝 Create detailed job listings
🎯 Skill requirement specification
💰 Salary range definition
📅 Timeline management

3. AI-Powered Candidate Matching

🤖 Schematic similarity-based sorting
📊 Skill compatibility scoring
🔍 Advanced filtering
📈 Candidate ranking

4. Applicant Management

👥 Review applied students
📊 View detailed portfolios
✅ Skill verification status
💬 Direct communication

5. Tracking & Analytics

📈 Application statistics
👀 Job post performance
📊 Hiring funnel analytics
🎯 Time-to-hire metrics

🛠️ Technology Stack

Frontend

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)

Design System

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

Backend Integration

Service	Purpose
RESTful API	Main backend communication
JWT Authentication	Secure user sessions
WebSocket	Real-time proctoring events
File Upload API	CV/Resume/Document handling

Proctoring Technology

Feature	Implementation
Video Capture	WebRTC MediaDevices API
Face Detection	AI/ML model integration
Event Tracking	Real-time event logging
Risk Scoring	Algorithmic confidence scoring

👤 User Flows

Student/Learner Journey

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

Recruiter Journey

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

💻 Installation & Setup

Prerequisites

Node.js 18.x or higher
npm or yarn
Git
Modern web browser (Chrome, Firefox, Edge, Safari)

Quick Start

# 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:5173

Build for Production

# Build optimized production bundle
npm run build

# Preview production build
npm run preview

# Output will be in the /dist directory

🔧 Environment Configuration

Frontend Environment Variables

Create a .env file in the root directory:

# API Configuration
VITE_API_BASE_URL=http://127.0.0.1:8000/api
VITE_API_TIMEOUT=30000

# Proctoring Service
VITE_PROCTOR_ENABLED=true
VITE_PROCTOR_FACE_DETECTION_INTERVAL=20000
VITE_PROCTOR_VIDEO_QUALITY=medium
VITE_PROCTOR_ENCRYPTION_ENABLED=true

# Feature Flags
VITE_ENABLE_GITHUB_INTEGRATION=true
VITE_ENABLE_LINKEDIN_IMPORT=true
VITE_ENABLE_BLOCKCHAIN_VERIFICATION=true
VITE_ENABLE_JOB_MATCHING=true
VITE_ENABLE_PORTFOLIO_GENERATION=true

# Analytics
VITE_ANALYTICS_ID=your-analytics-id
VITE_ENABLE_ANALYTICS=true

# File Upload
VITE_MAX_FILE_SIZE=10485760  # 10MB
VITE_ALLOWED_FILE_TYPES=.pdf,.doc,.docx,.txt
VITE_UPLOAD_ENDPOINT=/api/upload

# Job Matching
VITE_MATCHING_ALGORITHM=semantic-similarity
VITE_MIN_MATCH_SCORE=0.7
VITE_MAX_RECOMMENDATIONS=10

# Blockchain
VITE_BLOCKCHAIN_ENABLED=true
VITE_BLOCKCHAIN_NETWORK=ethereum
VITE_BLOCKCHAIN_CONTRACT_ADDRESS=0x...

# Miscellaneous
VITE_APP_NAME=SkillForge
VITE_APP_VERSION=1.0.0
VITE_DEBUG_MODE=false

Backend Environment Variables

Create a .env file in the skillforge/ directory:

# Django Configuration
DEBUG=False
SECRET_KEY=your-secret-key-here
ALLOWED_HOSTS=localhost,127.0.0.1,yourdomain.com
CORS_ALLOWED_ORIGINS=http://localhost:5173,https://yourdomain.com

# Database
DB_ENGINE=django.db.backends.postgresql
DB_NAME=skillforge_db
DB_USER=skillforge_user
DB_PASSWORD=secure_password
DB_HOST=localhost
DB_PORT=5432

# Email Configuration
EMAIL_BACKEND=django.core.mail.backends.smtp.EmailBackend
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USE_TLS=True
EMAIL_HOST_USER=your-email@gmail.com
EMAIL_HOST_PASSWORD=your-app-password

# JWT Configuration
JWT_SECRET_KEY=your-jwt-secret
JWT_ALGORITHM=HS256
JWT_EXPIRATION_HOURS=24
JWT_REFRESH_EXPIRATION_DAYS=7

# AWS/Cloud Storage
AWS_ACCESS_KEY_ID=your-access-key
AWS_SECRET_ACCESS_KEY=your-secret-key
AWS_STORAGE_BUCKET_NAME=skillforge-bucket
AWS_S3_REGION_NAME=us-east-1

# File Upload
FILE_UPLOAD_MAX_SIZE=10485760
ALLOWED_UPLOAD_EXTENSIONS=pdf,doc,docx,txt,jpg,png

# Proctoring Service
PROCTOR_API_KEY=your-proctor-api-key
PROCTOR_WEBHOOK_SECRET=your-webhook-secret
FACE_DETECTION_MODEL=mediapipe
FACE_DETECTION_THRESHOLD=0.5

# Analytics
ANALYTICS_API_KEY=your-analytics-key
LOG_LEVEL=INFO

# Blockchain
BLOCKCHAIN_ENABLED=true
BLOCKCHAIN_NETWORK=ethereum
BLOCKCHAIN_RPC_URL=http://localhost:8545
BLOCKCHAIN_CONTRACT_ADDRESS=0x...
BLOCKCHAIN_PRIVATE_KEY=your-private-key

# Redis (for caching and task queues)
REDIS_URL=redis://localhost:6379/0
CACHE_TIMEOUT=3600

# Media & Static Files
MEDIA_URL=/media/
STATIC_URL=/static/
MEDIA_ROOT=media/
STATIC_ROOT=staticfiles/

# Security
SECURE_SSL_REDIRECT=True
SESSION_COOKIE_SECURE=True
CSRF_COOKIE_SECURE=True
SECURE_HSTS_SECONDS=31536000
SECURE_HSTS_INCLUDE_SUBDOMAINS=True

# Logging
LOG_FILE_PATH=logs/django.log
LOG_ROTATION_SIZE=10485760
LOG_RETENTION_DAYS=30

# Third-party Integrations
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret
LINKEDIN_CLIENT_ID=your-linkedin-client-id
LINKEDIN_CLIENT_SECRET=your-linkedin-client-secret

# Testing
TEST_ENVIRONMENT=false
TEST_EMAIL_BACKEND=django.core.mail.backends.locmem.EmailBackend

Environment Setup Checklist

📁 Project Structure

skillforge-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

🗄️ Database Schema

Core Models

User (Extended Django User)
├── id (PK)
├── username
├── email
├── password_hash
├── first_name
├── last_name
├── role (student/recruiter/admin)
├── profile_picture
├── bio
├── created_at
├── updated_at
└── is_active

Student Profile
├── id (PK)
├── user_id (FK)
├── bio
├── phone
├── location
├── github_url
├── linkedin_url
├── portfolio_url
├── resume_url
├── skill_cibil_score (0-1000)
├── learning_streak
├── verified_skills (JSON)
├── verified_badges (JSON)
├── created_at
└── updated_at

Recruiter/Company Profile
├── id (PK)
├── user_id (FK)
├── company_name
├── company_size
├── industry
├── website
├── location
├── description
├── logo_url
├── verified
└── created_at

Skill
├── id (PK)
├── name
├── category
├── description
├── level (beginner/intermediate/advanced/expert)
├── created_at
└── updated_at

Assessment/Exam
├── id (PK)
├── title
├── description
├── duration (minutes)
├── passing_score
├── related_skill_id (FK)
├── questions (JSON/Array)
├── created_by (FK to User)
├── status (draft/published/archived)
├── created_at
└── updated_at

ExamSession
├── id (PK)
├── exam_id (FK)
├── student_id (FK)
├── start_time
├── end_time
├── duration_seconds
├── score
├── status (in_progress/completed/abandoned)
├── answers (JSON)
├── created_at
└── updated_at

ProctoringEvent
├── id (PK)
├── session_id (FK to ExamSession)
├── event_type (TAB_SWITCH, NO_FACE, etc.)
├── confidence (0.0-1.0)
├── timestamp
├── metadata (JSON)
├── risk_score
└── recorded_at

Job
├── id (PK)
├── title
├── description
├── company_id (FK)
├── salary_min
├── salary_max
├── location
├── job_type (full-time/part-time/contract)
├── required_skills (JSON)
├── preferred_skills (JSON)
├── experience_level
├── status (open/closed/draft)
├── created_at
├── expires_at
└── updated_at

JobApplication
├── id (PK)
├── job_id (FK)
├── student_id (FK)
├── status (pending/shortlisted/rejected/offered)
├── cover_letter
├── match_score (0-100)
├── applied_at
├── response_at
└── updated_at

Portfolio
├── id (PK)
├── student_id (FK)
├── title
├── theme
├── sections (JSON)
├── skills (JSON)
├── projects (JSON)
├── verified_badges (JSON)
├── url_slug
├── is_public
├── created_at
└── updated_at

Credential/Badge
├── id (PK)
├── name
├── description
├── icon_url
├── skill_id (FK)
├── issued_to_id (FK to Student)
├── blockchain_hash
├── qr_code
├── issued_at
└── expires_at

Learning Roadmap
├── id (PK)
├── student_id (FK)
├── title
├── modules (JSON)
├── progress_percentage
├── estimated_completion_date
├── status (not_started/in_progress/completed)
├── created_at
└── updated_at

Database Relationships

User (1) -----> (1) Student Profile
User (1) -----> (1) Recruiter Profile
User (1) -----> (N) ExamSession
User (1) -----> (N) Job (created_by)
User (1) -----> (N) Credential

Skill (1) -----> (N) Assessment
Skill (1) -----> (N) Credential

Assessment (1) -----> (N) ExamSession
ExamSession (1) -----> (N) ProctoringEvent

Job (1) -----> (N) JobApplication
Student (1) -----> (N) JobApplication
Student (1) -----> (1) Portfolio
Student (1) -----> (N) Credential
Student (1) -----> (1) Learning Roadmap

🔌 API Integration

Authentication Endpoints

// 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 }

Exam & Assessment Endpoints

// 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 }

Proctoring Endpoints

// 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 }]

Job Matching Endpoints

// 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 }

Portfolio & Analytics

// 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
}

Complete API Usage Example

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: '...' 
});

🔒 Security Features

Authentication & Authorization

✅ 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

Proctoring Security

🛡️ Real-time monitoring with WebRTC
🎥 Encrypted video streams
📊 Tamper-proof event logging
🔒 Secure session management
📝 Audit trail for all proctoring events

Data Protection

🔐 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

Privacy Compliance

✅ GDPR compliant
✅ Data anonymization options
✅ User data export/deletion
✅ Cookie consent management
✅ Privacy policy enforcement

📹 Proctoring System

Event Types & Detection

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 Scoring Algorithm

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)

Proctoring Features

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)

📊 Dashboard & Portfolio

Student Dashboard Features

Skill CIBIL Score

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

Learning Streak

Daily activity tracking
Duolingo-style flame icon
Motivation system
Streak recovery options

Activity Heatmap

12-month visualization
Contribution graph style
Hover tooltips with activity count
Color intensity based on activity level

Adaptive Roadmap

Personalized learning path
Skill modules with status (completed/current/locked)
Verification gates
Progress tracking

Verified Badges

React Expert, Node.js Pro, AWS Certified, etc.
Blockchain-verified credentials
Shareable on LinkedIn/GitHub
QR code for verification

Portfolio Generation

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

🤖 Job Matching System

Matching Algorithm

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

Matching Features

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

Application Tracking

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

⚙️ Configuration

Theme Configuration

// 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'
};

Feature Flags

// In .env or config.js
const featureFlags = {
  enableProctoring: true,
  enableGitHubSync: true,
  enableLinkedInImport: true,
  enableBlockchainVerification: true,
  enableJobMatching: true,
  enablePortfolioGeneration: true,
  enableAnalytics: true
};

API Configuration

// In api.js
const API_CONFIG = {
  BASE_URL: process.env.VITE_API_BASE_URL,
  TIMEOUT: 30000,
  RETRY: {
    maxAttempts: 3,
    delay: 1000,
    backoffMultiplier: 2
  }
};

🛠️ Development Guide

Code Style

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 Guidelines

// 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;

Testing

# Run unit tests
npm run test

# Run with coverage
npm run test:coverage

# Run E2E tests
npm run test:e2e

Git Workflow

# 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 GitHub

Commit Message Convention

feat: Add new feature
fix: Bug fix
docs: Documentation update
style: Code style changes
refactor: Code refactoring
test: Add tests
chore: Build/tooling changes

🚀 Deployment

Vercel Deployment

# Install Vercel CLI
npm install -g vercel

# Deploy to production
vercel --prod

# Set environment variables
vercel env add VITE_API_BASE_URL production

Netlify Deployment

# Install Netlify CLI
npm install -g netlify-cli

# Build and deploy
npm run build
netlify deploy --prod --dir=dist

Docker Deployment

# 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

CI/CD Pipeline (GitHub Actions)

# .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 }}

📈 Performance Optimization

Code Splitting

// 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>

Optimization Checklist

✅ 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

Performance Metrics

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

� Testing & Quality Assurance

Frontend Testing

# Run unit tests with Vitest
npm run test

# Run unit tests in watch mode
npm run test:watch

# Run tests with coverage report
npm run test:coverage

# Run E2E tests with Playwright
npm run test:e2e

# Run linting checks
npm run lint

# Fix linting issues automatically
npm run lint:fix

# Format code with Prettier
npm run format

# Check code formatting without changes
npm run format:check

Backend Testing

# Run Django tests
python manage.py test

# Run tests with coverage
coverage run --source='.' manage.py test
coverage report

# Run specific test module
python manage.py test skillforge.accounts.tests

# Run with verbose output
python manage.py test --verbosity=2

# Run tests in parallel (faster)
python manage.py test --parallel

Test Coverage Requirements

Minimum Coverage: 80% across all modules
Critical Paths: 100% (authentication, payments, security)
UI Components: 75% snapshot + interaction tests
API Endpoints: 90% happy path + error cases

Quality Assurance Checklist

Pre-commit Hooks

The project uses Husky to run checks before commits:

# Install husky
npm install husky --save-dev
husky install

# Hooks automatically run:
# - lint-staged (format and lint changed files)
# - Unit tests for changed files

📊 Monitoring & Logging

Frontend Monitoring

// Error tracking with Sentry
import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: "your-sentry-dsn",
  environment: process.env.NODE_ENV,
  tracesSampleRate: 1.0,
  integrations: [
    new Sentry.Replay({
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

// Performance monitoring
const perfObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`${entry.name}: ${entry.duration}ms`);
  }
});

perfObserver.observe({ entryTypes: ["measure", "navigation"] });

Backend Logging

# Django logging configuration
LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'formatters': {
        'verbose': {
            'format': '[{levelname}] {asctime} {name} {funcName} {lineno} {message}',
            'style': '{',
        },
    },
    'handlers': {
        'console': {
            'class': 'logging.StreamHandler',
            'formatter': 'verbose',
        },
        'file': {
            'class': 'logging.handlers.RotatingFileHandler',
            'filename': 'logs/django.log',
            'maxBytes': 1024 * 1024 * 10,  # 10MB
            'backupCount': 5,
            'formatter': 'verbose',
        },
    },
    'loggers': {
        'django': {
            'handlers': ['console', 'file'],
            'level': 'INFO',
        },
        'skillforge': {
            'handlers': ['console', 'file'],
            'level': 'DEBUG',
        },
    },
}

Key Metrics to Monitor

Frontend Metrics:

Page Load Time
Time to Interactive (TTI)
First Contentful Paint (FCP)
Cumulative Layout Shift (CLS)
JavaScript Error Rate
API Response Times
User Session Duration

Backend Metrics:

API Response Times (p50, p95, p99)
Error Rate by Endpoint
Database Query Performance
Cache Hit Ratio
Queue Processing Time
Memory Usage
CPU Usage
Active Connections

Business Metrics:

User Signup Conversion Rate
Assessment Completion Rate
Job Application Success Rate
Candidate Matching Accuracy
User Retention Rate

Monitoring Tools

# Backend monitoring options
- Prometheus + Grafana (metrics)
- ELK Stack (logs)
- Jaeger (distributed tracing)
- New Relic (APM)
- DataDog (monitoring)

# Frontend monitoring options
- Sentry (error tracking)
- LogRocket (session replay)
- Datadog RUM (real user monitoring)
- Google Analytics (business metrics)

🐛 Common Issues & Troubleshooting

Frontend Issues

Issue: Blank white screen after deployment

Solution:

# Clear cache and rebuild
rm -rf node_modules dist
npm install
npm run build

# Check environment variables are set correctly
# Verify VITE_API_BASE_URL is correct

Issue: CORS errors when calling API

Solution:

// Frontend: Check API client configuration
// Verify VITE_API_BASE_URL matches backend CORS_ALLOWED_ORIGINS

// Backend (Django settings.py):
CORS_ALLOWED_ORIGINS = [
    "http://localhost:5173",
    "https://yourdomain.com",
]

Issue: Proctoring video not starting

Solution:

// Check browser permissions
// Ensure HTTPS in production
// Verify camera and microphone are available
// Check WebRTC support in browser

// Debug in browser console:
navigator.mediaDevices.enumerateDevices().then(devices => {
  console.log(devices);
});

Issue: File upload fails

Solution:

// Check file size limit
console.log(import.meta.env.VITE_MAX_FILE_SIZE);

// Verify file type is allowed
const allowed = import.meta.env.VITE_ALLOWED_FILE_TYPES.split(',');

// Check upload endpoint configuration
// Verify server is accepting multipart/form-data

Backend Issues

Issue: Database connection refused

Solution:

# Check PostgreSQL is running
sudo systemctl status postgresql

# Verify database credentials in .env
# Check host, port, username, password

# Create database if missing:
createdb skillforge_db
createuser skillforge_user
psql skillforge_db
# ALTER USER skillforge_user WITH PASSWORD 'password';
# GRANT ALL PRIVILEGES ON DATABASE skillforge_db TO skillforge_user;

Issue: Migration errors

Solution:

# Check migration status
python manage.py showmigrations

# Revert migrations if needed
python manage.py migrate <app_name> <migration_number>

# Create new migrations
python manage.py makemigrations

# Apply migrations
python manage.py migrate

# Check for unapplied migrations
python manage.py migrate --plan

Issue: Static files not serving

Solution:

# Collect static files
python manage.py collectstatic --noinput

# In production, serve with whitenoise
# pip install whitenoise

# Add to Django settings:
MIDDLEWARE = [
    'whitenoise.middleware.WhiteNoiseMiddleware',
    ...
]

Issue: Celery tasks not executing

Solution:

# Check if Celery worker is running
celery -A skillforge worker -l info

# Check if Redis is running
redis-cli ping

# Check task queue:
celery -A skillforge inspect active

# Purge tasks if stuck:
celery -A skillforge purge

API Issues

Issue: JWT token expired

Solution:

// Refresh token automatically
const refreshToken = async () => {
  const response = await fetch('/api/auth/refresh/', {
    method: 'POST',
    body: JSON.stringify({ refresh: localStorage.getItem('refresh_token') }),
  });
  const { access } = await response.json();
  localStorage.setItem('access_token', access);
};

Issue: Rate limiting errors (429)

Solution:

// Implement exponential backoff retry logic
const retryRequest = async (fn, maxRetries = 3) => {
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await fn();
    } catch (error) {
      if (error.status === 429 && i < maxRetries - 1) {
        const delay = Math.pow(2, i) * 1000;
        await new Promise(resolve => setTimeout(resolve, delay));
      } else {
        throw error;
      }
    }
  }
};

❓ FAQ

General Questions

Q: What is the minimum system requirement? A: Node.js 18+, Python 3.11+, PostgreSQL 12+, Redis 6+

Q: Can I self-host SkillForge? A: Yes, the platform is fully open-source and can be self-hosted on any cloud provider or on-premise.

Q: What payment methods are supported? A: Currently supports Stripe integration. More payment gateways can be added through the plugin system.

Q: Is SkillForge GDPR compliant? A: Yes, the platform includes GDPR compliance features including data export, deletion, and consent management.

Technical Questions

Q: How do I set up proctoring for exams? A: Install the proctoring system, configure the face detection model, and enable in environment variables. See the Proctoring System section for details.

Q: Can I customize the job matching algorithm? A: Yes, the matching algorithm is configurable in skillforge/modules/services.py. You can modify weights, thresholds, and algorithms.

Q: How are credentials stored and verified? A: Credentials are stored in PostgreSQL, optionally backed by blockchain. Each credential has a QR code for verification.

Q: What video conferencing integration is available? A: Currently uses WebRTC with Jitsi. Can be integrated with Zoom, Google Meet, or other providers via API.

Q: How do I integrate with GitHub for portfolio sync? A: Configure GitHub OAuth2 credentials and enable VITE_ENABLE_GITHUB_INTEGRATION=true in environment variables.

Deployment Questions

Q: How do I deploy to production? A: Use Docker or traditional server setup. Refer to the Deployment section. Recommended: AWS ECS, Heroku, or DigitalOcean.

Q: What is the recommended database for production? A: PostgreSQL 14+. MySQL 8+ can also be used. Avoid SQLite in production.

Q: How do I set up SSL/HTTPS? A: Use Let's Encrypt with Nginx/Apache reverse proxy, or use platform-provided SSL (AWS Certificate Manager, etc.).

Q: What is the best way to backup data? A: Configure automated daily database backups. For S3, enable versioning. Monitor backup logs regularly.

Performance Questions

Q: How many concurrent users can the system handle? A: Depends on infrastructure. A standard setup handles ~5,000 concurrent users. Scale horizontally with load balancing.

Q: How long do proctored exams take to process? A: Real-time monitoring + 2-5 minutes for result generation depending on exam complexity.

Q: What is the maximum file upload size? A: Default is 10MB, configurable via VITE_MAX_FILE_SIZE and FILE_UPLOAD_MAX_SIZE.

Q: How often is the skill matching algorithm updated? A: Daily, with manual updates as needed. Can be configured via cron job or Celery beat.

🚀 Roadmap

Phase 1: Current (Q1-Q2 2026)

Phase 2: Q3 2026

Advanced analytics dashboard
AI-powered learning recommendations
Video interview integration
Bulk candidate import (for recruiters)
API rate limiting and monitoring

Phase 3: Q4 2026

Blockchain credential verification
Mobile app (React Native)
Real-time notifications (push)
Advanced reporting for recruiters
Skill endorsements system

Phase 4: 2027

AI resume optimization suggestions
Integration with ATS (Applicant Tracking System)
Video assessment auto-grading
Salary prediction model
Enterprise SSO (SAML/OAuth)

Future Possibilities

Gamification system (badges, leaderboards)
Peer-to-peer mentoring
Mock interview preparation
Subscription tier system
White-label platform offering

📞 Support & Contact

Getting Help

Documentation: Full Documentation

Email Support: support@skillforge.com

Discord Community: Join Discord Server

GitHub Issues: Report Issues

Twitter: @SkillForgeApp

Reporting Security Issues

Please report security vulnerabilities to: security@skillforge.com Do not open public issues for security concerns.

Feature Requests

Submit feature requests via:

GitHub Discussions
Discord #feature-requests
Email to features@skillforge.com

Feedback & Suggestions

We'd love to hear from you! Share feedback at: feedback@skillforge.com

�🤝 Contributing

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.

How to Contribute

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

Code Review Process

All submissions require review from 2+ maintainers
CI/CD checks must pass
Code coverage must be maintained/improved
Documentation must be updated

📜 License

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.

Name		Name	Last commit message	Last commit date
Latest commit History 62 Commits
Frontend		Frontend
assets		assets
skillforge		skillforge
.gitignore		.gitignore
README.md		README.md
requirements.txt		requirements.txt

Folders and files

Latest commit

History

Repository files navigation

SkillForge

📑 Table of Contents

📸 Screenshots

Loader Page:

Home Page:

User Selection Page:

User Profile Page:

Browse Job Section:

Learning Page:

🌟 Overview

🎯 Mission

👥 Target Users

🏗️ System Architecture

Website Flowchart:

Website Flow Overview:

Detailed Component Architecture

✨ Key Features

🎓 For Students/Learners

1. Intelligent Onboarding

2. Personalized Learning Dashboard

3. Proctored Assessment System

4. Skill Verification & Credentials

5. Job Discovery & Application

🏢 For Clients/Recruiters

1. Streamlined Onboarding

2. Smart Job Posting

3. AI-Powered Candidate Matching

4. Applicant Management

5. Tracking & Analytics

🛠️ Technology Stack

Frontend

Design System

Backend Integration

Proctoring Technology

👤 User Flows

Student/Learner Journey

Recruiter Journey

💻 Installation & Setup

Prerequisites

Quick Start

Build for Production

🔧 Environment Configuration

Frontend Environment Variables

Backend Environment Variables

Environment Setup Checklist

📁 Project Structure

🗄️ Database Schema

Core Models

Database Relationships

🔌 API Integration

Authentication Endpoints

Exam & Assessment Endpoints

Proctoring Endpoints

Job Matching Endpoints

Portfolio & Analytics

Complete API Usage Example

🔒 Security Features

Authentication & Authorization

Proctoring Security

Data Protection

Privacy Compliance

📹 Proctoring System

Event Types & Detection

Risk Scoring Algorithm

Proctoring Features

📊 Dashboard & Portfolio

Student Dashboard Features

Skill CIBIL Score

Learning Streak

Activity Heatmap

Adaptive Roadmap

Verified Badges

Portfolio Generation

🤖 Job Matching System

Matching Algorithm

Matching Features