[Bug]: Frontend Skills UI Displays 40+ Dead Options But Only 14-15 Skills Exist in Dataset

[dharini-sharma]

What happened?

The frontend form displays 40 hardcoded skill chip buttons for users to quickly select from:

Python, JavaScript, HTML, CSS, Flask, SQL, React, Node.js, C++, Java, TypeScript, Go, Rust, C#, Kotlin, Django, FastAPI, Express.js, Next.js, Vue.js, Angular, Tailwind CSS, Bootstrap, PostgreSQL, MySQL, MongoDB, Redis, Docker, Kubernetes, Git, Linux, Pandas, NumPy, TensorFlow, PyTorch, AWS, GraphQL, Jest, pytest, Webpack

However, a programmatic audit of data/projects.json reveals the backend dataset contains only 14-15 unique skills:

• css, typescript, java, pandas, requests, c++, kotlin, javascript, html, rust, node.js, flask, go, python

The Mismatch: ~26 skill options in the UI are completely dead—they have ZERO matching projects in the dataset. When users select skills like TensorFlow, Kubernetes, AWS, or GraphQL, the recommendation engine returns no results or misleading matches based on level/interest/time alone (due to bug #96).

This creates a poor user experience: users think they can find projects for these skills, but the system returns nothing.

Evidence:

Frontend hardcoded skills (templates/index.html lines 561-602): 40 buttons total

Backend actual skills (from data/projects.json): ['python', 'javascript', 'html', 'css', 'flask', 'sql', 'react', 'node.js', 'c++', 'java', 'typescript', 'go', 'rust', 'kotlin', 'django']

Total: ~15 skills

Dead Skills (26+): TensorFlow, PyTorch, AWS, Kubernetes, Docker, PostgreSQL, MySQL, MongoDB, Redis, GraphQL, Jest, pytest, Webpack, Bootstrap, Tailwind CSS, Angular, Vue.js, Next.js, Express.js, FastAPI, Linux, Pandas, NumPy, and others

Related Issues

This issue is related to #96 (recommendation engine bug where low-scoring projects return for dead skills) but is distinct because it focuses on the UI bloat/mismatch rather than the scoring logic.

Relevant Error Output or Logs

None - Frontend/data mismatch (no runtime errors). The problem is silent: users see skill options that don't exist in the backend dataset.

Environment

• Python Version: 3.9+
• Operating System: Windows / macOS / Linux
• Browser: Chrome / Firefox / Safari
• DevPath Branch: main (latest)

GSSOC'26 Contributor Note

Hii @komalharshita, I'm a GSSOC'26 contributor and would like to work on this issue and resolve it. I hope this issue is assigned to me so I can continue working on it.

My approach:

1. First, I'll remove the 26+ dead skill options from the hardcoded list in templates/index.html
2. Then, I'll create a backend function get_available_skills() in utils/data_loader.py to dynamically return available skills from the dataset
3. Create a new /api/available-skills endpoint in routes/main_routes.py
4. Update the frontend to fetch and render skills dynamically
5. Add unit tests to ensure skill list matches dataset
6. Test that as new projects are added, their skills automatically appear in the UI

If I get assigned to this issue will start working submitting a PR at the earliest.

Steps to Reproduce

1. Navigate to the recommendation form (#find-project section)
2. Look at the "Quick-select skill chips" section below the "Your Skills" input
3. Click on a skill that doesn't exist in the dataset (e.g., "TensorFlow", "AWS", "Kubernetes")
4. Enter any other valid inputs (level, interest, time)
5. Click "Generate My Projects"
6. Observe that no relevant projects are returned

Example:

• Skills: TensorFlow
• Level: Intermediate
• Interest: Data
• Time: High
• Result: "No Projects Found" or irrelevant projects

Expected behaviour

Expected Behaviour

The frontend should only display skill chips for skills that actually exist in the dataset.

Better approach:

1. Remove dead skill options from the hardcoded list
2. Dynamically populate skill chips from the backend (from data/projects.json)
3. Only show skills that have at least 1 project in the dataset
4. As new projects are added with new skills, they automatically appear in the UI

Suggested Solution

Option A (Quick Fix - Remove Dead Skills)

• Identify which 26+ skills are dead (no projects)
• Remove them from the hardcoded list in templates/index.html lines 561-602
• Keep only skills that exist in dataset: python, javascript, html, css, flask, sql, react, node.js, c++, java, typescript, go, rust, kotlin, django

Option B (Proper Fix - Dynamic Skills)

• Create a backend endpoint /api/available-skills that returns all unique skills from data/projects.json
• Update frontend to fetch and render skill chips dynamically instead of hardcoding
• Benefits:
  • No more UI-data mismatch
  • New projects with new skills auto-populate in UI
  • Maintainers don't need to update HTML for new skills

Option C (Long-term - Dataset Expansion)

• As you add new projects, ensure their skills are included in the dataset
• The dynamic UI will automatically show them

Files Affected

1. templates/index.html (lines 561-602 - skill chips)
2. utils/data_loader.py (add get_available_skills() function)
3. routes/main_routes.py (add new /api/available-skills endpoint)
4. data/projects.json (reference for valid skills)

Area of the app affected

Homepage form

Python version

3.9+

Operating system

Windows/Linux/Mac

Relevant error output or logs

Before submitting

• I searched existing issues and this has not been reported before.
• I can reproduce this bug consistently with the steps above.
• I am running the latest version of the main branch.

[Komal08072006]

Hi @maintainer,

I would like to contribute to this issue under GSSoC'26.

I have gone through the issue description and understand the problem. I would appreciate it if you could assign this issue to me.

Thank you.