GitHub User Finder

A polished, browser-based app for quickly finding GitHub users and viewing profile details plus recent repositories.

Table of Contents

• Overview
• Demo and Screenshots
• Feature Highlights
• Tech Stack
• Project Structure
• Getting Started
• Usage
• API Endpoints Used
• Behavior and States
• Notes and Limitations
• Contributing
• License
• Author

Overview

GitHub User Finder is a completed front-end project focused on clean UX, practical API usage, and clear client-side state handling.

Enter a GitHub username to display:

• Avatar
• Name (or login fallback)
• Bio (or fallback text)
• Followers count
• Public repository count
• Direct profile link
• Latest 5 repositories, sorted by most recently updated

The app also includes a dark mode toggle with saved theme preference.

Demo and Screenshots

Try the live demo here

Or run locally in seconds by opening index.html in your browser.

Screenshot Template

Add your screenshot file to the repo, then replace the placeholder below:

![GitHub User Finder Screenshot](./path-to-your-screenshot.png)

Optional: add a short GIF demo too:

![GitHub User Finder Demo](./path-to-your-demo.gif)

Feature Highlights

• Username search via button click and Enter key
• Real-time fetch from GitHub REST API
• Profile and repository rendering in the UI
• Loading, not-found, and general error states
• Recent repositories list with external links
• Dark mode toggle
• Theme persistence with localStorage

Tech Stack

• HTML5
• CSS3
• Vanilla JavaScript (ES6+)
• GitHub REST API

Project Structure

github-user-finder/
|- index.html      # App structure and UI markup
|- style.css       # Styling, layout, and dark mode rules
|- script.js       # API logic, rendering, events, and theme persistence
|- README.md       # Project documentation
`- LICENSE         # MIT license

Getting Started

1. Clone the repository

git clone https://github.com/<your-username>/github-user-finder.git
cd github-user-finder

2. Run the app

This is a static front-end project, so you can run it by opening index.html directly.

Optional: use a local server such as VS Code Live Server for smoother development.

Usage

1. Open the app.
2. Enter a GitHub username.
3. Click Search or press Enter.
4. Review the fetched profile details and latest repositories.
5. Toggle dark mode as needed.

API Endpoints Used

• https://api.github.com/users/{username}
• https://api.github.com/users/{username}/repos?sort=updated&per_page=5

Behavior and States

• Loading: displays a loading message while data is being fetched.
• Not found: displays a user-friendly message when a username does not exist.
• Error: displays a fallback message when an API/network issue occurs.
• Theme restore: reapplies dark mode automatically from saved preference.

Notes and Limitations

• Uses unauthenticated GitHub API requests, so rate limiting may occur.
• Repository list is intentionally capped at 5 latest updated repositories.
• No build tooling is required.

Contributing

Contributions are welcome.

1. Fork the repository.
2. Create a feature branch.
3. Commit your changes.
4. Open a pull request with a clear description.

License

Distributed under the MIT License. See LICENSE for details.

Author

Gary H