RepoLens AI — Understand Any GitHub Repository in Seconds 🔍
Source: Dev.to
Submission for the GitHub Copilot CLI Challenge
What I Built
RepoLens AI provides an instant analysis when you paste a GitHub URL:
- Architectural Summary
- Full‑Stack Breakdown
- Strengths & ⚠️ Weaknesses
- Improvement Suggestions
- Beginner‑Friendly Tasks
Unique Visualizations (all pure SVG, no chart libraries)
| Visualization | What it does |
|---|---|
| Language Ring | Animated donut chart using official GitHub language colors |
| Health Radar | Pentagon radar chart scoring five health dimensions |
| Architecture Graph | Interactive node graph of the project’s folder structure with collapse/expand “breathe” animation |
| Repo Personality | Myers‑Briggs‑style analysis – assigns an archetype (Pioneer, Guardian, Architect, Sprinter, Scholar, Community) with traits, radar chart, and dimension breakdown |
| Hero Orb | Atmospheric animated background orb for visual depth |
Additional Features
- Full i18n – English (default) + Portuguese; AI responses respect the selected language
- Responsive design – Desktop 2‑column grid for Strengths/Weaknesses, mobile‑first everywhere
- Copy & Export – Copy analysis to clipboard or download as
.md - Analysis timer – Shows how long the AI took
- History – Recently analyzed repos saved locally
- Smart fallback – Graceful degradation when AI quota is exceeded
Tech Stack: React 19 + Vite 7.3 + TailwindCSS v4 | Express 5 + ES Modules | Google Gemini AI with automatic model discovery & fallback chain | GitHub REST API
Demo
- Live App:
- Repository:
Screenshots
![]() |
|---|
| The clean landing page with animated orb background |
![]() |
|---|
| AI‑generated analysis with responsive 2‑column layout on desktop |
![]() |
|---|
| Language DNA donut ring and Health Radar pentagon — pure SVG, zero libraries |
![]() |
|---|
| Interactive Architecture Graph with radial layout |
Additional Images
![]() |
|---|
![]() |
|---|
![]() |
|---|
All visualizations are handcrafted SVGs with no external charting libraries.
Repo Personality — Myers‑Briggs for repositories
Archetype, traits, radar chart, and dimension breakdown
[Image: Repo Personality – archetype]
[Image: Repo Personality – radar chart]
[Image: Repo Personality – dimension breakdown]
Built with Copilot CLI showcase — real commands used during development
[Image: Copilot CLI showcase]
Full i18n: one click to switch between English and Portuguese
My Experience with GitHub Copilot CLI
GitHub Copilot CLI wasn’t just a helper in this project — it was my pair‑programming partner from start to finish. Every major feature, every tricky bug, every architectural decision went through gh copilot in the terminal.
How I Used It
1. Architecture & Refactoring
$ gh copilot suggest "refactor express server into modular architecture with services and routes"
Copilot suggested creating services/github.js, services/gemini.js, and routes/analyze.js with a clean separation of concerns. What would have taken 30 + minutes of planning happened in seconds.
2. Critical Bug Resolution
$ gh copilot explain "why is API_KEY undefined when using ES modules with dotenv"
The issue was that ES‑module imports are hoisted, so dotenv.config() ran after the imports that needed the env vars. Copilot identified the problem instantly and suggested import "dotenv/config" as the first import. Bug fixed in under 10 seconds.
3. Zero‑Dependency Visualizations
$ gh copilot suggest "create an SVG pentagon radar chart in React without any chart library"
The Health Radar visualization was born from this single command. Copilot generated polar‑coordinate calculations, a requestAnimationFrame animation loop, and interactive hover effects — all in pure SVG. I refined it later, but the foundation was solid from the start.
4. AI Output Normalization
$ gh copilot suggest "build a normalizeAnalysis function that transforms any AI output format into canonical sections"
Gemini’s output format is unpredictable. Copilot produced a fuzzy‑matching system with accent stripping, universal header regexes, and variation mapping that makes the analysis 100 % consistent regardless of how Gemini formats its response.
5. Performance Optimization
$ gh copilot suggest "smart file tree filtering for GitHub repos to reduce prompt size"
Created an intelligent filter system using CODE_EXTENSIONS, IMPORTANT_FILES, and IGNORED_PATTERNS to keep the file‑tree compact. Prompt size dropped by ~60 %, making analysis faster and cheaper.
6. Front‑end Polish
$ gh copilot suggest "animated SVG donut chart for language breakdown with GitHub official colors"
The Language Ring visualization emerged from this — cubic‑ease‑out animation, hover‑glow effects, and 35 + official GitHub language colors with HSL fallback.
Impact by the Numbers
| Metric | Value |
|---|---|






