Web app that pulls a public GitHub repository’s file tree from the GitHub API and shows it in a few interactive views: treemap by size, a force-directed graph, and an expandable file browser. Language mix is estimated from file extensions and shown in a breakdown bar.
Link: https://reposcope-pi.vercel.app/
Enter a GitHub URL (https://github.com/owner/repo) or owner/repo on the home page. The app loads the default branch’s recursive tree, builds a nested structure client-side, and opens the visualize screen.
Switch between Map (treemap), Graph (force layout), and Files (tree list). Hover or select items to see path, size, and language-style details in the sidebar. On narrow screens, use Info to open the same sidebar in a bottom sheet.
- Public repositories only. Private repos return access errors unless you extend the code to send authentication with GitHub API requests.
- GitHub API rate limits apply for unauthenticated requests (roughly 60 requests per hour per IP for the REST API). Heavy use may hit limits; the UI surfaces rate-limit errors when the API returns them.
- Large trees: GitHub may truncate very large trees. When that happens, the UI indicates Truncated and the visualization reflects only the partial tree.
- Next.js (App Router)
- React 19
- TypeScript
- D3 for treemap and force graph layouts
- Framer Motion in a few places (e.g. sidebar detail transitions)
app/— routes (/home,/visualizemain viewer)components/— Treemap, ForceGraph, FileBrowser, stats, sidebar details, inputlib/github.ts— GitHub REST calls and tree building from flat API responseslib/colors.ts— extension-to-color mapping for languages in chartstypes/— shared TypeScript types for tree nodes and stats