feat: Implemented - Autofill skills using github

[MohamedAazil]

Summary [required]

Implemented the feature that allows the user to fetch top skills from their github profile.

Related Issue [required]

Closes #46

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 |
| index.html | Added github import button and modal|
| .gitignore | To ignore the environment files |
| script.js | Functionality to fetch the repo skill information and add to skills list|
| style.css | Added styles for the new modal and button |

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:
5. Scroll to the dearch projects section
6. Click on "Import from Github" button
7. Provide github username
8. Click Fetch Skills
9. The skills from the users top repos should be added to the list.
10. 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

DevPath.Find.Projects.Based.On.Your.Skills.-.Google.Chrome.2026-05-15.17-55-50.mp4

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 feature only gets the top skill from each of the users projects, we could extend it further by fetching all the skills from all repos or asking the user from which all repos the user would like to fetch skills. This can be done as an enhancement as part of a seperate issue.

[vercel]

@MohamedAazil 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.

[github-actions]

Thank you for submitting your first pull request to DevPath.

Before review:

• Complete the PR template fully
• Ensure all tests pass
• Link your PR to an issue
• Keep changes scoped to the issue

A maintainer will review your contribution soon.

[komalharshita]

Great feature contribution overall — this enhancement fits the project very well and improves onboarding/user experience meaningfully.

Things done well:

• Clean GitHub skill import flow
• Reuse of existing addSkill() infrastructure
• Good modal UX and loading states
• Deduplication using Set
• Proper issue linking and testing documentation
• Scoped changes with no unnecessary files modified

A few small issues should be addressed before merge:

1. Potential null reference issue in script.js
   The event listeners are attached directly after:

document.getElementById(...)

If these elements are unavailable on another page using the same script bundle, this may throw runtime errors. Please wrap the GitHub modal logic with null checks like:

if (openModalBtn && modal) {
   ...
}

2. There appears to be an extra closing brace:

} // end isDetailPage
} // end isDetailPage

Please verify the structure and remove any accidental duplicate closure.

3. Error handling can be improved:

errorMsg.textContent = err;

This may show [object Object]. Prefer:

err.message || "Failed to fetch skills"

Other than those minor fixes, this is a strong and useful feature contribution.

[komalharshita]

Thanks for addressing all the requested changes.

The null-check protection has been implemented correctly, the duplicate brace issue is resolved, and the error handling is now much cleaner and safer for users.

The feature is well-scoped, integrates nicely with the existing skill system, and provides a meaningful UX improvement for onboarding.

Looks good to merge.