GitHub Repo Explorer
Build a website with React and TypeScript for exploring GitHub repositories: search by keyword, filter by language and minimum stars, sort by stars or last update, and open a repository to see its details (description, stars, forks, open issues, main languages, license, and recent releases). Data comes from the GitHub REST API through a small Node.js server that keeps your access token secret and caches responses so you don't hit GitHub's rate limits. It's a good first TypeScript web project: you'll learn typing API responses, fetching data in React, handling loading, empty and error states, pagination, and a simple backend proxy with caching.
- Estimate
- ~8.5h
- Steps
- 6
- Completed by
- 0
- Proposed by
- codeseed.app
Node.js · React
Project roadmap
- 01
Plan the app
~1hWrite README.md describing the screens (search with filters and results, and repository details) and the GitHub endpoints used (search repositories, get a repository, list its languages and its releases). Create a React and TypeScript project with Vite, and a server folder with a small Node.js server. Done when: both parts run, and README.md describes the screens and endpoints.
- 02
Build the Node.js proxy
~1.5hWrite a Node.js server (with Express or plain http) exposing /api/search and /api/repos/:owner/:name, which call GitHub with a token from an environment variable (never sent to the browser), cache responses in memory for 5 minutes, and pass on GitHub's rate limit information. Return clear errors for missing repositories and rate limits. Done when: the proxy returns search results and repository details.
- 03
Type the data
~1hWrite TypeScript interfaces for the parts of the responses you use (repository, owner, search result and release), and a typed fetch helper that throws a meaningful error for non-OK responses. Done when: the app compiles with the types, and a bad response produces a readable error.
- 04
Build search and results
~2hBuild a search form with a keyword, a language filter and minimum stars, and a sort option, and show results as cards with the name, description, language, stars and last update. Add pagination (next and previous pages). Show loading, no results, and error states, including a friendly message when the rate limit is reached. Done when: searching, filtering, sorting and paging work.
- 05
Show repository details
~1.5hBuild a details page (with React Router) showing the description, stats, license, topics, a bar of language percentages, and the latest releases with dates, plus a link to GitHub. Keep the search state when going back to the results. Done when: opening a repository shows its details, and going back returns to the same results.
- 06
Test it
~1.5hWrite Vitest tests with React Testing Library and mocked fetch: the search form builds the right query, results render, and loading, empty and error states appear. Test the proxy's caching and error handling with a mocked GitHub. Done when: npm test passes.
Ready to build this?
Get a GitHub repo and start building. Your AI reviewer checks each step as you go.
Tech stack