Improve skill input UX with shared skill dataset and autocomplete dropdown

[PraneshJha1038]

…pdown

Summary [required]

This PR improves the skill selection workflow by introducing a dataset-driven autocomplete system for skills input.

Previously, the input allowed unrestricted free-text entries, which could lead to:

• inconsistent naming (React, reactjs, react-js)
• unrelated or noisy entries
• reduced recommendation accuracy
• slower user interaction

The new implementation improves consistency, usability, and overall recommendation quality through guided skill selection.

Related Issue [required]

Closes #37

Type of Change [required]

• Bug fix — resolves a broken behaviour
• Feature — adds new functionality
• Data — adds new projects to data/projects.json
• Documentation — updates docs, README, or code comments only
• Style — CSS or visual changes only, no logic change
• Refactor — restructures code without changing behaviour
• Test — adds or updates tests

What Was Changed [required]

File	Change made
static/script.js	- real-time autocomplete suggestions - substring-based filtering - keyboard navigation (ArrowUp, ArrowDown, Enter, Escape) - click-to-select interactions - duplicate skill prevention - auto-add for pending typed input on submit - canonical label normalization
templates/index.html	Added accessibility for screen readers, and added a div to show dropdown options (.skills-suggestion # skills-suggestion)
templates/index.html	Loaded static/data/skills.js before static/script.js
scripts/data/skills.js	Created a canonical shared dataset for the dropdown options
static/style.css	added dropdown menu styles, matching with ui theme

How to Test This PR [required]

1. Clone this branch: git checkout your-branch-name
2. Install dependencies: pip install -r requirements.txt
3. Run the app: python app.py
4. Open http://127.0.0.1:5000 and
   • go to the find your next project section
   • try entering Flask, or any other skill
   • An auto-dropdown menu should appear.
   • Test keyboard functions like arrow up, arrow down, esc and enter
5. Run the tests: python tests/test_basic.py

Expected test output:

27 passed, 0 failed out of 27 tests

Test Results [required]

  PASS  test_projects_json_loads
  PASS  test_each_project_has_required_fields
  PASS  test_find_project_by_id_found
  PASS  test_find_project_by_id_missing
  PASS  test_parse_skills_basic
  PASS  test_parse_skills_empty_string
  PASS  test_parse_skills_single_entry
  PASS  test_score_single_project_full_match
  PASS  test_score_single_project_no_match
  PASS  test_get_recommendations_returns_results
  PASS  test_get_recommendations_max_three
  PASS  test_get_recommendations_no_match_returns_empty
  PASS  test_get_recommendations_result_format
  PASS  test_validate_all_valid
  PASS  test_validate_missing_skills
  PASS  test_validate_missing_level
  PASS  test_validate_missing_interest
  PASS  test_validate_missing_time
  PASS  test_validate_all_missing
  PASS  test_home_route
  PASS  test_recommend_api_valid
  PASS  test_recommend_api_missing_field
  PASS  test_recommend_api_empty_body
  PASS  test_project_detail_found
  PASS  test_project_detail_not_found
  PASS  test_view_code_found
  PASS  test_download_code_found

27 passed, 0 failed out of 27 tests

Screenshots (if UI change)

Before	After

|

| |

Self-Review Checklist [required]

• I have read CONTRIBUTING.md and followed all guidelines
• My branch name follows the convention: feat/, fix/, docs/, data/, style/, test/
• I have run python tests/test_basic.py and all 27 tests pass
• I have run flake8 . locally and there are no errors
• I have not introduced any print() or console.log() debug statements
• Every new function I wrote has a docstring
• I have not modified files outside the scope of the linked issue
• If I changed the UI, I tested it at 375px (mobile) and 1280px (desktop)
• If I added a project to the dataset, it has all required JSON fields

Notes for Reviewer

This PR strongly improves consistency and guidance, but it does not fully hard-block unknown free-text entries yet. If strict validation against the approved skill list is required, that would be a follow-up change post merging of this PR.

Inconsistent spacing throughout the static/script.js was corrected additionally by the IDE

[vercel]

@PraneshJha1038 is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

[PraneshJha1038]

@komalharshita Have a look at the pr, and also please merge after 15th if satisfied.

[komalharshita]

Excellent work on this PR. This is a meaningful UX improvement and the implementation is thoughtfully done.

The autocomplete flow, keyboard navigation, duplicate prevention, accessibility handling, and shared dataset structure are all well implemented. The ARIA support and interaction handling especially stand out.

Before future PRs, try to avoid unrelated formatting/whitespace changes since they make reviews harder to follow. Apart from that, this is a strong contribution and aligns well with the issue requirements.

Approved for merge.