Home
Courses
Learn React 19: The Complete Guide to Modern Web Apps

Challenge: GitHub User Search App

Let's build a React app that allows users to search GitHub profiles efficiently while implementing data fetching, error handling, and React Query caching for performance optimization.

We'll cover the following...

Problem statement

You’re tasked to build a GitHub User Search Tool for your company’s developer dashboard. The app must let users type a GitHub username, fetch the corresponding user’s profile information (name, bio, followers, email), and display it clearly on the screen.

The product team requires the following:

  1. Repeated searches for the same user should load instantly — served from React Query’s cache.

  2. If the user doesn’t exist, an error message should appear.

  3. If the user leaves the input blank and hits Search, no API request should be made.

  4. Include a Clear button to reset the app state.

  5. Ensure loading, error, and success states are distinct and intuitive.

Technical requirements: Implement the following features step by step:

  1. Add a search bar to input GitHub usernames.

  2. On clicking Search, use React Query’s useQuery() to fetch user data via the provided fetchGitHubUser() helper.

  3. Display proper states:

    1. Loading... message while fetching.

    2. User details on success.

    3. Error message if the user is not found.

  4. Implement caching and background refetch — React Query handles this automatically.

  5. Add a Clear button to reset the input and UI state.

Expected output

  • Typing “octocat” → shows user card (name, bio, followers, email).

  • Typing the same username again → loads instantly from cache.

  • Searching “unknown” → shows User not found.

  • Clicking Clear → resets the input and clears UI state.