Stop 10 · API IntegrationProjects · 3/3

GitHub Explorer

In short

The GitHub API is free, well documented and full of real data. Build an explorer and you'll handle rate limits, pagination and nested JSON, just like a real job.

An app that searches GitHub users/repos via the public GitHub API — practice for pagination, rate limits, and rendering nested API data.

Think of it like this

The college alumni directory

You look up a senior by name, see their profile, then flip through the projects they've worked on, page by page. GitHub Explorer is that directory, but for developers and their repositories.

Watch it happen

Exploring a user, watching the limit

Explorer

GitHub API

GET /search/users?q=riya

1/5The debounced search box asks GitHub for matching users.

The big ideas

What you need to know

Search users

Hit /search/users?q=name and show avatars, usernames and profile links.

Paginate repos

List a user's repos with per_page and page, and sort by stars or last updated.

Respect rate limits

Unauthenticated calls get a small hourly limit. Read the x-ratelimit-remaining header and warn the user.

Nested data

Repo objects hold an owner object, language, stars and more. Type them so you don't get lost.

How it works

Build plan

1
User search
Debounced search that lists matching GitHub users.
2
Profile page
Show avatar, bio, followers and public repo count.
3
Repo list
Paginated repos with sort by stars or updated date.
4
Limits and errors
Show remaining requests and handle 403 or 404 nicely.

See it in code

Walk through the code

1export async function getRepos(user: string, page = 1) {2  const res = await fetch(3    `https://api.github.com/users/${user}/repos?per_page=10&page=${page}&sort=updated`4  );5  const remaining = res.headers.get("x-ratelimit-remaining");6 7  if (res.status === 404) throw new Error("User not found");8  if (res.status === 403 && remaining === "0") throw new Error("Rate limit hit. Try later.");9  if (!res.ok) throw new Error("GitHub had a problem");10 11  return { repos: await res.json(), remaining };12}