Skip to content

prakkhar03/SkillForge

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

61 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

SkillForge Logo SkillForge

Professional Skill Verification & Job Matching Platform

Bridging the Gap Between Learning and Earning

React Vite Framer Motion License

πŸš€ Live Demo β€’ πŸ“– Documentation β€’ 🎯 Features β€’ πŸ’» Installation


πŸ“‘ Table of Contents

  • 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

πŸ“Έ Screenshots

Loader Page:

Loader

Home Page:

Home Page

User Selection Page:

User Page

User Profile Page:

User Profile

Browse Job Section:

Browser Job Section

Learning Page:

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

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

πŸ—οΈ System Architecture

Website Flowchart:

SkillForge Architecture

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

Environment Variables

Create 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 for Production

# Build optimized production bundle
npm run build

# Preview production build
npm run preview

# Output will be in the /dist directory

πŸ“ 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

πŸ”Œ 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

  1. Video Monitoring

    • Real-time webcam feed
    • Face detection and tracking
    • Recording indicator
    • Camera permission handling
  2. Event Tracking

    • Automatic event detection
    • Manual event triggers (testing)
    • Timestamp logging
    • Event history
  3. Analytics Dashboard

    • Live risk score
    • Event counter
    • Event log with filtering
    • Session statistics
  4. 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

🀝 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

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. 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.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors