Feat add skill shortlisting

[PraneshJha1038]

Summary [required]

Implement dynamic top 5 skill selection buttons with server-side persistence to improve mobile UX and show community-driven trending skills.

Previously, the quick-select skill chips displayed a hard-coded list of 15 skills that stacked vertically on mobile screens, degrading the user experience. This PR replaces the hard-coded list with a dynamic top 5 system that:

• Tracks skill selections server-side in data/skills_counters.json
• Displays the 5 most-selected skills across all users (community-wide trending)
• Persists across page refreshes and server restarts
• Falls back gracefully to default popular skills if tracking unavailable
• Significantly improves mobile layout by reducing button count from 15 to 5

Related Issue [required]

Closes #239

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
data/skills_counters.json	[NEW] Created JSON file to persistently store skill selection counters (initialized all 230+ skills at 0)
utils/data_loader.py	Added load_skill_counters(), save_skill_counters(), increment_skill_counter(), and get_top_skills() functions with thread-safe file locking for concurrent access
routes/main_routes.py	Added GET /api/top-skills endpoint to fetch top 5 community skills and POST /api/track-skill endpoint to increment skill counters
static/script.js	Replaced client-side counter logic with server API calls; removed incrementSkillCounter() and getTopSkills() functions; added trackSkillOnServer(), loadTopSkillsFromServer(), and updated renderDynamicTopSkills() to fetch from server

How to Test This PR [required]

1. Clone this branch: git checkout feat/dynamic-top-5-skills
2. Install dependencies: pip install -r requirements.txt
3. Run the app: python app.py
4. Open http://127.0.0.1:5000 in browser
5. Test 1 Initial Load:
   • Verify that quick-select buttons show exactly 5 skills: Python, JavaScript, HTML, CSS, React (default set)
   • Verify buttons fit properly on mobile (375px viewport width)
6. Test 2 Skill Selection Tracking:
   • Click on different skill buttons to select them
   • Observe /api/track-skill POST requests in browser DevTools Network tab
   • Verify counters increment in data/skills_counters.json by inspecting the file
7. Test 3 Top 5 Update:
   • Select the same skill 3+ times, select different skills
   • Reload the page (Ctrl+R)
   • Verify quick-select buttons now show your most-selected skills at the top
8. Test 4 Fallback Behavior:
   • Stop the Flask server while page is loaded
   • Try to select a skill
   • Verify graceful error handling in browser console (no JS errors, just warning)
9. Test 5 Mobile Responsiveness:
   • Open DevTools and set viewport to 375px width (mobile)
   • Verify 5 buttons stack properly without horizontal overflow
   • Compare with the old 15-button layout to confirm improvement
10. Test 6 Persistence:
    • Select several skills and note the counters in data/skills_counters.json
    • Restart the Flask server
    • Reload the page
    • Verify counters persisted and top 5 skills are still displayed correctly

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_internal_server_error_page
  PASS  test_view_code_found
  PASS  test_download_code_found
  PASS  test_scoring_weights_has_all_keys

29 passed, 0 failed out of 29 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 MUST BE MERGED AFTER MERGING THE PR #259

Future Improvements (out of scope):

• Add database backend for scalability (currently JSON sufficient for this scale)
• Reset counters periodically (weekly/monthly) to track trending vs. all-time popularity
• User analytics dashboard to visualize skill adoption trends
• A/B testing framework to measure UX improvement

[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

[komalharshita]

closing the related PR