GitHub Profile Finder

A profile finder requests public account data, validates the JSON shape, and shows a name and link. Real GitHub API calls need network access, status handling, and awareness of rate limits. The primary example uses a local data URL, so students can test the parsing contract offline.

The example fetches known JSON without external connectivity, then verifies all public profile fields. A real UI should encode user names in URL paths and handle 404 and rate-limiting responses.

Do not assume HTTP 200 guarantees the shape of a parsed JSON object. Do not store personal access tokens in browser source code.

This source was compiled using TypeScript 5.8.3 with strict checking, then executed with Node.js 22.16.0. Its stdout below is the actual captured output. The core logic is runnable without a framework or a remote API; integration-specific examples appear in a separate lab when needed.

TypeScript source

type PublicProfile = { login: string; followers: number; html_url: string };
function parseProfile(value: unknown): PublicProfile | null {
  if (typeof value !== "object" || value === null) return null;
  if (!("login" in value) || typeof value.login !== "string") return null;
  if (!("followers" in value) || typeof value.followers !== "number") return null;
  if (!("html_url" in value) || typeof value.html_url !== "string") return null;
  return { login: value.login, followers: value.followers, html_url: value.html_url };
}
async function main(): Promise<void> {
  const response = await fetch('data:application/json,%7B%22login%22%3A%22learner%22%2C%22followers%22%3A12%2C%22html_url%22%3A%22https%3A%2F%2Fgithub.com%2Flearner%22%7D');
  if (!response.ok) throw new Error("Profile request failed");
  const profile = parseProfile(await response.json());
  console.log(profile ? `${profile.login}: ${profile.followers} followers` : "Invalid profile");
}
main().catch(console.error);

Verified output

learner: 12 followers

Compile: npx tsc --strict --target es2022 --module commonjs github-profile-finder.ts; run: node github-profile-finder.js. For examples importing node: modules, install @types/node as a development dependency; for browser or React projects use the separate lab setup.

The example fetches known JSON without external connectivity, then verifies all public profile fields. A real UI should encode user names in URL paths and handle 404 and rate-limiting responses.

Before editing the code, predict what the output will be for one changed input. Run it and compare your prediction with the actual result.

Do not assume HTTP 200 guarantees the shape of a parsed JSON object. Do not store personal access tokens in browser source code.

Determine whether the issue belongs to the type system, a trust boundary, or actual runtime behavior before choosing a correction.

Replace the data URL with https://api.github.com/users/<encoded-user> in a browser app and display a useful error for 404 or rate limits.

Record expected success and failure outcomes, run the code, and compare the observed behavior. Keep the exercise compatible with strict type checking.

The example fetches known JSON without external connectivity, then verifies all public profile fields. A real UI should encode user names in URL paths and handle 404 and rate-limiting responses.

Apply the same reasoning to the practice task, then integrate it into a real app only when the runtime and dependency setup are ready.