← back to all projects
GitHub Repo Explorer (React Query)
Part 6 — State Management
Why This Project
The Kanban projects dealt with client state. This project is about server state —
data that lives on a remote server and needs fetching, caching, refetching, and
syncing. The GitHub API is perfect for learning React Query because it has rate
limits (forces you to think about caching), deeply linked data (user → repos →
commits → contributors), and paginated endpoints. You'll hit real-world constraints
that make caching feel necessary instead of optional.
What to Build
An explorer that lets you search GitHub users, browse their repos, and drill into
repo details (recent commits, contributors, languages used). Users can "star"
repos locally to build a personal list of interesting projects. Navigating between
pages should feel instant on repeat visits because React Query caches the responses.
The app should gracefully handle GitHub's rate limit (60 requests/hour unauthenticated).
Requirements
- Use the GitHub REST API (no auth needed for public data, but rate-limited to 60 req/hr)
- Search page: search users by username, display matching results
- User profile page: avatar, bio, follower/following counts, list of public repos sorted by stars
- Repo detail page: description, stars, forks, language breakdown, recent commits (last 10), top contributors
useQuery for every data fetch — query key includes the entity (user, repo, commits) and identifieruseInfiniteQuery for the repo list — GitHub paginates at 30 repos per page, implement "Load more"- Configure
staleTime: user profiles are stale after 5 minutes, commit lists after 1 minute
- Rate limit handling: when GitHub returns 403, show a "rate limited" message with the reset time from response headers
- Local "starred" repos list stored in React state (this is client state — NOT React Query)
- Navigate: search → user → repo → back to user. The second visit to the user page should load from cache instantly
- Install
@tanstack/react-query-devtools — observe how queries are cached, go stale, and refetch
- React Router for navigation between pages
- No backend needed — frontend-only project hitting the public GitHub API
Skills Practiced
React Query
useQuery
useInfiniteQuery
query keys
staleTime
caching
pagination
rate limiting
server state vs client state
dependent queries
Pain Point to Notice
Think about how you would build this with just useState + useEffect. For each page
you'd need: isLoading, isError, data, and a useEffect that fetches. Multiply that
by every entity (user, repos, commits, contributors). Then add pagination state.
Then add caching so going "back" doesn't re-fetch. Then handle rate limits without
losing already-fetched data. React Query gives you all of this for free. The moment
you navigate from a repo page back to the user page and it loads instantly from
cache — that's the point. Also notice the difference between server state (GitHub
data, managed by React Query) and client state (your starred list, managed by
useState). They're fundamentally different kinds of state and should be managed
by different tools.