RepoX

Inspiration

Beginners visit GitHub repositories and feel lost. They see folders, files, and code but don't know where to start reading, how files connect, or what the architecture actually does. We wanted to bridge the gap between "I found this cool repo" and "I actually understand how it works."

What it does

RepoX transforms any public GitHub repository into an interactive learning experience:

Interactive Architecture Map - A D3.js visualization showing file relationships and structure that you can explore, zoom, and navigate
AI-Powered Explanations - Click any file to get a Gemini-powered explanation (with "Explain Like I'm 5" mode for beginners)
Learning Path Generation - AI analyzes the codebase and generates a structured curriculum showing which files to read and in what order
Progress Tracking - Track your learning journey with interactive checklists
Trending & History - Discover trending repositories or quickly revisit your recently explored repos

How I built it

Frontend: TypeScript + Vite for fast development, D3.js for interactive visualizations
AI Backend: Cloudflare Worker proxying the Gemini API for code explanations and learning path generation
APIs: GitHub REST API for repository data, OSS Insight API for trending repos
Hosting: Cloudflare Pages (frontend) + Cloudflare Workers (API)
Design: "Terminal Minimalism" - a dark theme inspired by code editors with teal/coral accents

Challenges I faced

GitHub API Rate Limits: Limited to 60 requests/hour without auth. We optimized by using the recursive tree endpoint (1 call for entire structure) and aggressive localStorage caching.
Large Repository Visualization: Rendering thousands of files would crash the browser. We implemented smart filtering and collapse strategies.
Gemini Response Formatting: Ensuring consistent, markdown-formatted responses required careful prompt engineering.