Search GitHub users by username and browse any user's public repositories. Built with React 19, TypeScript, and the GitHub REST API for the Tradebyte frontend challenge.
- Typeahead search — results appear as you type (debounced 500ms to respect GitHub's rate limits); the Search button / Enter submits instantly. Shows up to 5 matching users.
- Full repository lists — expanding a user fetches every public repository, page by page, rendering as pages arrive. Name, description, and star count link to the repo.
- Honest error handling — rate limits (10 searches/min unauthenticated) surface as a clear message with the reset time, not a blank screen. Empty results get proper empty states.
- Responsive — single-column layout that works from phones up.
- Cached — re-expanding a user or repeating a search within 5 minutes never refetches (TanStack Query).
npm install
npm run dev # http://localhost:5173npm test # Vitest + Testing Library + MSW — 6 flow testsTests mock the GitHub API at the network layer (MSW), covering: typeahead results, instant submit, multi-page repository loading, both empty states, and rate-limit messaging.
Unauthenticated GitHub allows 10 searches/min and 60 core requests/hour. To raise this locally or on the deployed site, set an environment variable with a GitHub personal access token (no scopes needed):
VITE_GITHUB_TOKEN=ghp_xxx npm run devNote: like any Vite VITE_* var, the token is embedded in the client bundle — use a throwaway token, or none at all.
- React 19 + TypeScript + Vite
- TanStack Query — request state, caching, and paged repository fetching
- Astryx design system — components, tokens, dark/light theme
- Vitest + Testing Library + MSW — network-level API mocking
Static SPA — any static host works. On Vercel: import the repo, framework preset "Vite", no config needed. Optionally set VITE_GITHUB_TOKEN in the project's environment variables.