GitDiscovery

GitDiscovery is a web application for discovering GitHub profiles using the GitHub API and JavaScript.

Live Project

Check out the live project hosted on GitHub: Live

Preview Images

Technologies

• HTML
• CSS
• JavaScript

Features

With GitDiscovery, you can:

• Search for any GitHub username to see if an account exists.
• View detailed information about the account and a summary of the repositories.
• Click on any repository to navigate to the original GitHub repository.
• See the number of followers and following for the current user.
• Easily switch between dark and light modes.

Accessibility Support and Best Practices with HTML Semantics

• The project is built with strong accessibility support for both PC and mobile devices.

👩🏽‍🍳 The Process

1. Initial Setup:

   • Created index.html and styles.css files.
   • Developed a hard-coded UI for the project.

2. Adding Functionality:

   • Organized all assets, such as CSS, images, and scripts, in the /assets folder.
   • Implemented the #Header Scroll State in app.js (located at /assets/js/app.js) to manage the header's active state.
   • Added the #Search Toggle functionality to manage the search state.
   • Implemented #Tab Navigation & Keyboard Accessibility for Tab Buttons to enable state changes in tab navigation and allow navigation using keyboard arrow keys.
   • Integrated the GitHub API to fetch data and populate the hard-coded UI dynamically.

📚 What I Learned

• Effective use of HTML semantics
• Writing DRY and clean code
• Improving accessibility