Inspiration
💡 What Inspired the Project When I was just getting started in software engineering, my curiosity was always bigger than my technical vocabulary. I would see groundbreaking open-source projects announced on GitHub, Twitter, and Hacker News—things like vector databases, custom memory allocators, distributed consensus engines, or agentic RAG systems—and I desperately wanted to understand how the best engineers in the world built them. I asked myself: What if learning from open-source codebases felt like reading an interactive, beautifully illustrated masterclass rather than deciphering a puzzle? That question became the blueprint for RepoLens.
What it does
RepoLens is an AI-powered visual learning platform that turns any GitHub repository into an interactive, step-by-step masterclass. Instead of parsing thousands of lines of raw code, developers get an intuitive 3-part journey: real-world analogies for what it does, clickable architecture graphs and animated data-flows for how it works, and copyable blueprints for how to apply it in their own apps. With a conversational AI mentor that lights up visual components as it explains them, RepoLens cuts codebase onboarding time from days to minutes."
How we built it
🛠️ How I Built It I designed RepoLens around a structured 3-Perspective Cognitive Learning Framework: code
- Architecture & Tech Stack AI Engine: Google Gemini (gemini-2.5-flash / gemini-3.6-flash) via the modern @google/genai TypeScript SDK on a server-side Node/Express proxy to keep API keys secure and enable rich context extraction. Frontend Framework: React 18 with TypeScript, Vite, and Tailwind CSS. Typography & Aesthetics: Crafted with an Editorial Aesthetic—pairing serif display typography (Playfair Display) for readability and elegant framing with sans-serif (Plus Jakarta Sans) for technical dense layouts. Interactive Visualizers: Dynamic Component Topology Canvas: Visual graph mapping UI layers, API gateways, core processing engines, and storage nodes. Animated Sequence Player: Tracks request lifecycles step-by-step with state indicators and code snippets. Grounded AI Mentor: A chat assistant that cross-references user questions with the graph, lighting up specific architecture nodes as it explains them. Contextual Term Explorer: A dynamic sliding lexicon that unpacks complex jargon using simple real-world analogies.
- Multi-Level Pedagogical Parsing RepoLens adjusts its analysis based on the user's comprehension tier: Beginner (ELI5): Emphasizes everyday analogies, high-level intuition, and simple input/output models. Curious Learner: Balances functional design patterns with intermediate architectural breakdowns. Deep Architect: Focuses on concurrency models, latency trade-offs, state machines, and data serialization protocols. ## Challenges we ran into Structured Synthesis from Unstructured Repositories: Turning a messy codebase or repository link into a clean, predictable JSON schema containing nodes, data flow sequences, and glossary entries required extensive prompt engineering and robust server-side schema fallback handling. Synchronizing Visual Topology with LLM Reasoning: Standard AI chats are disconnected from the visual interface. Connecting Gemini's responses to specific visual IDs (e.g., highlighting node-api-gateway and node-embedding-store when a user asks about vector indexing) required structuring the AI prompt to emit visual anchor metadata alongside conversational markdown. Designing a Non-Overwhelming UI: With diagrams, glossaries, sequence runners, code drawers, and a chat mentor all in one view, visual noise was a constant threat. Adopting the clean, high-contrast Editorial design system with generous whitespace, clear typographic hierarchy, and collapsible drawers kept the experience calm and focused. ## Accomplishments that we're proud of What I’m most proud of is that RepoLens isn't just an AI tool—it's an accelerator for developer curiosity. It removes the intimidation factor from open-source exploration and empowers anyone to learn from the world's most complex software. ## What we learned What I Learned Visual Grounding Trumps Raw Text: An explanation is more memorable when users can watch the request move through an interactive node diagram while reading the summary. The Value of Multi-Perspective Learning: Beginners learn best by moving from the abstract ("What real-world problem does this solve?") to the concrete ("Which file handles this step?") to the creative ("How can I build this myself?"). Prompt Engineering as Schema Compilation: Using strict JSON structured generation with Gemini allowed the system to reliably construct interactive UI states out of raw source code.
What's next for RepoLens
RepoLens turns every open-source repository into an open textbook. Whether you are a student exploring your first AI agent pipeline or a senior developer auditing a new distributed database, RepoLens gives you the mental model before you even write your first line of code.
Log in or sign up for Devpost to join the conversation.