TechMatch AI — Tech Stack Recommender

Live Application:
https://shayanakbar90.github.io/DecodeLabs-TechStackRecommender/

Application: Launch the app locally · Publish a live GitHub Pages deployment

TechMatch AI is a transparent, content-based career recommendation application. It accepts at least three user-selected skills, maps the profile and every career role into a shared TF-IDF vector space, calculates cosine similarity, sorts all roles by alignment, and returns the top three recommendations.

The project implements the complete input → scoring → sorting → filtering pipeline described in the Project 3 specification. It is framework-free, responsive, accessible, deterministic, and deployable as a static site.

Screenshots

• View Profile Builder Screenshot
• View Recommendation Results Screenshot

Features

• Minimum three-skill onboarding to reduce sparse-profile cold starts
• Searchable shared vocabulary built from raw_skills.csv
• Optional career-goal context extraction
• TF-IDF feature weighting using the role corpus
• Cosine-similarity scoring against every role profile
• Stable descending ranking and Top-3 filtering
• Matched-feature explanations and high-value skill gaps
• Deterministic cold-start fallback ordering
• Responsive, keyboard-accessible, dependency-free interface
• Automated tests, dataset validation, static build, CI, and GitHub Pages deployment

Technology

Layer	Technology
Interface	Semantic HTML5, modern CSS, vanilla JavaScript ES modules
Recommendation engine	Custom TF-IDF vectorization and cosine similarity
Dataset	CSV (src/data/raw_skills.csv)
Testing	Node.js built-in test runner
Local server	Node.js HTTP server
Automation	GitHub Actions
Deployment	GitHub Pages

No production framework and no runtime third-party package are required.

Quick start

Prerequisites

Install Node.js version 20 or later.

Run the application

git clone <your-repository-url>
cd tech-stack-recommender
npm install
npm start

Open http://localhost:4173 in your browser.

npm install does not download application libraries because the project has zero dependencies. It only validates the package metadata and lock file.

Run the full verification suite

npm run verify

This command validates JavaScript syntax, checks required files and dataset integrity, executes automated tests, and creates the production bundle in dist/.

How the recommendation engine works

1. Ingestion: The user selects at least three skills or technologies and may add a career goal.
2. Vector mapping: Each role and the user profile are represented using the same normalized vocabulary.
3. TF-IDF weighting: Distinctive features receive more influence than features that occur across many roles.
4. Cosine scoring: The engine measures angular alignment between the user vector and each role vector.
5. Sorting: Scores are ordered from highest to lowest with deterministic tie-breakers.
6. Filtering: Only the top three roles are returned.

The detailed mathematics and implementation decisions are documented in docs/ALGORITHM.md.

Dataset

The repository includes 36 curated technology career profiles spanning data and AI, software engineering, cloud and DevOps, cybersecurity, infrastructure, quality engineering, product and design, and emerging technology.

Each CSV record contains:

• role identifier and display name
• category and description
• skills
• tools and platforms
• career-goal phrases
• deterministic fallback rank

The dataset is educational sample data, not labor-market forecasting data. See docs/DATASET.md.

Project structure

tech-stack-recommender/
├── .github/
│   ├── ISSUE_TEMPLATE/
│   ├── workflows/ci.yml
│   ├── workflows/deploy-pages.yml
│   └── pull_request_template.md
├── docs/
│   ├── ALGORITHM.md
│   ├── ARCHITECTURE.md
│   ├── DATASET.md
│   ├── DEPLOYMENT.md
│   └── REQUIREMENTS_TRACEABILITY.md
├── screenshots/
│   ├── home.png
│   └── results.png
├── scripts/
│   ├── build.mjs
│   ├── check.mjs
│   └── serve.mjs
├── src/
│   ├── assets/
│   ├── data/raw_skills.csv
│   ├── js/
│   │   ├── app.js
│   │   ├── csv.js
│   │   ├── recommender.js
│   │   └── ui.js
│   └── styles/styles.css
├── tests/
├── index.html
├── package.json
└── README.md

Available commands

Command	Purpose
npm start	Start the local application server
npm test	Run unit and integration tests
npm run check	Validate syntax, HTML references, files, and dataset integrity
npm run build	Create a deployable static bundle in dist/
npm run verify	Run checks, tests, and build in sequence

Deployment

The repository contains a GitHub Actions workflow that builds and deploys the application to GitHub Pages whenever code is pushed to the main branch. Follow docs/DEPLOYMENT.md for the complete beginner-friendly process.

After deployment, GitHub displays the live URL in Repository → Settings → Pages and in the completed Deploy to GitHub Pages workflow run. Replace the application line at the top of this README with that URL after the first deployment.

Quality and accessibility

• No external scripts, fonts, analytics, or trackers
• Content Security Policy included in the page
• Keyboard-operable skill selector
• Visible focus states and semantic landmarks
• Screen-reader live regions for status and result updates
• Reduced-motion support
• Responsive layouts for mobile, tablet, and desktop
• Stable, reproducible recommendation output

Future improvements

• Learn feature weights from validated user feedback
• Add dataset versioning and provenance metadata
• Support multilingual skill aliases
• Add role-comparison and learning-roadmap views
• Evaluate recommendation quality using labeled profiles and ranking metrics
• Add optional server-side persistence only after a clear privacy model is defined

Author

Shayan Akbar

Developed by Shayan Akbar as part of the DecodeLabs Artificial Intelligence Industrial Training tasks.

• Developer: Shayan Akbar
• Organization: DecodeLabs
• Project: AI Recommendation Logic — Tech Stack Recommender
• GitHub: Shayanakbar90
• Live Application: Open Application

License

Released under the MIT License.