Github User Searcher

Published at 15 Jun 2026

Description
Explains what the challenge is about and what you need to build.

In this challenge, you will build a Github User Searcher — a search card that lets users look up any GitHub username and see their profile details instantly.

Your component must have a search field and a search button. When the user searches for a username, it should fetch their data and display their avatar, name, bio, number of repositories, and follower/following stats. If the username doesn't exist, show a friendly error message instead of breaking the layout.

Requirements
Lists the specific elements, IDs, and behaviors your solution must include to pass the tests.

Search input box element must have ID #github-search-input.
Search submit button trigger must have ID #github-search-btn.
Perform async fetch requests to the public GitHub API endpoint (https://api.github.com/users/{username}).
Render username, profile bio, avatar image thumbnail, repository count, and follower/following stats.
Provide a user friendly not-found text wrapper block when the API returns a 404 response.

Example Demo

User Flow

Step-by-step Flow Explanation:

Initial UI: Search input displays with a default fallback developer profile card (like 'octocat').
Type & Fetch: User types a username and clicks Search; loading spinner or skeleton triggers.
Render Details: Data updates successfully, parsing stats and setting profile links.
NotFound Fallback: Missing handles trigger a 'User not found' banner, maintaining layout stability.

Related UI Challenges

Layouting

Discussion (0)

Join the Discussion

index.html

style.css

script.js

Loading Monaco Workspace...

Live Preview Browser

Tests & Console Output

Click to expand

Test Assertion	Status	Details/Errors
Required DOM Elements exist (#github-search-input, #github-search-btn, .github, .com)	Pending	Pending execution
Component layout compiles and renders successfully with custom CSS styles	Pending	Pending execution