GitHub Repo Analyzer

A full-stack web application that provides AI-powered analysis of any public GitHub repository. Enter a repo URL and get an intelligent code quality report, project summary, and developer onboarding guide.

Features

• 🔍 Repository Analysis — Fetch live data from any public GitHub repo
• 🤖 AI-Powered Insights — Claude API generates code quality reports, summaries, and onboarding guides
• ⚡ Real-time Streaming — Watch analysis generate word-by-word via Server-Sent Events
• 📊 Visual Dashboard — Interactive charts, contributor stats, and formatted analysis panels
• 🎯 Developer Onboarding — Step-by-step guides for new contributors
• 📱 Responsive Design — Works seamlessly on desktop and mobile

Tech Stack

Layer	Technology
Frontend	React (Vite), Tailwind CSS, Recharts
Backend	Node.js, Express
GitHub Data	GitHub REST API (public repos, no auth needed)
AI Layer	Anthropic Claude API (claude-sonnet-4-20250514)
Streaming	Server-Sent Events (SSE)
Deployment	Vercel (frontend) + Railway or Render (backend)

Project Structure

github-analyzer/
├── client/                  ← React frontend (Vite)
│   ├── src/
│   │   ├── components/
│   │   │   ├── RepoInput.jsx
│   │   │   ├── RepoCard.jsx
│   │   │   ├── SummaryPanel.jsx
│   │   │   ├── CodeQualityPanel.jsx
│   │   │   ├── OnboardingPanel.jsx
│   │   │   ├── ContributorChart.jsx
│   │   │   └── StreamingText.jsx
│   │   ├── App.jsx
│   │   └── main.jsx
│   ├── index.html
│   └── vite.config.js
│
├── server/                  ← Node.js + Express backend
│   ├── routes/
│   │   ├── analyze.js       ← Main analysis route
│   │   └── github.js        ← GitHub API helpers
│   ├── services/
│   │   ├── githubService.js ← Fetch repo data
│   │   └── claudeService.js ← Build prompt + call Claude API
│   ├── index.js             ← Express entry point
│   ├── .env                 ← ANTHROPIC_API_KEY, GITHUB_TOKEN (optional)
│   └── package.json
│
└── README.md

Quick Start

Prerequisites

• Node.js 18+
• Anthropic API key (get from https://console.anthropic.com)
• GitHub token (optional, for higher rate limits)

Backend Setup

cd server
npm install
echo "ANTHROPIC_API_KEY=your_key_here" > .env
npm run dev

Frontend Setup

cd client
npm install
echo "VITE_API_URL=http://localhost:3001" > .env.local
npm run dev

The app will be available at http://localhost:5173

How It Works

1. Enter Repository URL — User pastes any public GitHub repo URL
2. Fetch Metadata — Backend queries GitHub API for repo stats, README, file tree, commits, contributors
3. Generate Analysis — Claude API receives structured prompt with repo data
4. Stream Response — Analysis streams back via SSE, appearing word-by-word in the UI
5. Display Panels — Frontend parses response into 3 sections: Summary, Code Quality, Onboarding Guide

Usage

1. Copy a public GitHub repository URL (e.g., https://github.com/facebook/react)
2. Paste it into the input field
3. Click "Analyze Repository"
4. Watch the analysis stream in real-time
5. View code quality score, project summary, and onboarding steps
6. Copy individual sections or share the analysis

Environment Variables

Server (.env)

ANTHROPIC_API_KEY=sk-ant-...
GITHUB_TOKEN=ghp_... (optional)

Client (.env.local)

VITE_API_URL=http://localhost:3001

API Endpoints

POST /api/analyze

Streams AI analysis via SSE.

Request:

{ "repoUrl": "https://github.com/owner/repo" }

Response: Server-Sent Events stream with Claude's analysis

GET /api/meta

Returns repository metadata as JSON.

Query: ?url=https://github.com/owner/repo

Response:

{
  "full_name": "owner/repo",
  "description": "...",
  "language": "JavaScript",
  "stargazers_count": 100,
  "forks_count": 50,
  "open_issues_count": 5,
  "topics": ["react", "js"],
  "pushed_at": "2025-01-01T00:00:00Z",
  "contributors": [...],
  "fileTree": "...",
  "readme": "..."
}

Stretch Goals

• 🔄 Repo Comparison — Analyze two repos side by side
• 📜 History — Store last 5 analyzed repos in localStorage
• 🌙 Dark/Light Mode — Toggle between themes
• 📄 PDF Export — Download analysis as styled PDF
• 🔐 GitHub OAuth — Analyze private repos with authentication

Resume Bullet

Built a full-stack GitHub Repo Analyzer using React, Node.js, and the Claude API — fetches live repo data via the GitHub API and generates AI-powered code quality reports, project summaries, and onboarding guides with real-time streaming responses via SSE.

License

MIT

Support

For issues or questions, please open a GitHub issue in this repository.