👁️ DevLens — X-Ray Vision for Any Codebase

Understand any GitHub repository in minutes. DevLens maps every file, dependency, and risk — then builds your personal onboarding path.

---

🚀 What is DevLens?

DevLens is an AI-powered codebase analysis tool that helps developers — especially new contributors — understand large repositories instantly. Paste a GitHub URL and DevLens will:

• Map every file and dependency into an interactive visual graph
• Identify high-risk files based on blast radius and centrality
• Generate a personalized onboarding path based on your role (Backend, Frontend, DevOps, Fullstack)
• Calculate a health score for the repository
• Explain any file with AI-generated summaries

---

✨ Features

Feature	Description
🗺️ Dependency Graph	Interactive D3.js graph showing how every file connects
💥 Blast Radius Analysis	Click any node to see which files break if it changes
🧭 Role-based Onboarding	Curated learning path based on your dev role
🤖 AI Chat	Ask questions about any file or the codebase in natural language
🏥 Health Score	Repository quality score based on risk distribution
📁 File Explorer	Collapsible tree view of the entire repo structure
🔐 Auth	JWT-based signup/login with session management
📊 Analysis History	Revisit past analyses from your dashboard

---

🛠️ Tech Stack

Frontend

• Plain HTML, CSS, JavaScript (no framework)
• Tailwind CSS (CDN)
• D3.js for dependency graph visualization
• Deployed on Vercel

Backend

• Node.js + Express
• JWT Authentication
• Turso (LibSQL) — edge database
• Gemini 2.5 Flash (primary AI) + Groq/LLaMA (fallback)
• Deployed on Render

---

📁 Project Structure

Dev-Lens/
├── frontend/
│   ├── pages/
│   │   ├── index.html        # Landing page
│   │   ├── login.html        # Auth page
│   │   ├── home.html         # Repo analysis input
│   │   └── dashboard.html    # Main visualization dashboard
│   ├── js/
│   │   ├── auth.js           # Login/signup/logout logic
│   │   └── home.js           # Repo analysis + history
│   └── css/
├── backend/
│   ├── server.js             # Express app entry point
│   ├── routes/
│   │   ├── auth.js           # Auth routes (signup/login)
│   │   └── repoRoutes.js     # Repo analysis routes
│   ├── middleware/
│   │   └── authMiddleware.js # JWT verification
│   ├── db/
│   │   └── tursoClient.js    # Turso DB client
│   └── utils/
│       ├── aiClient.js       # Gemini + Groq integration
│       ├── repoParser.js     # GitHub repo file fetcher
│       ├── dependencyGraph.js# Dependency edge builder
│       └── repoAgent.js      # Orchestrates full analysis
└── README.md

---

⚙️ Local Setup

Prerequisites

• Node.js 18+
• A GitHub account (for repo access)
• Turso account + database
• Gemini API key
• Groq API key

1. Clone the repo

git clone https://github.com/Souvagya06/Dev-Lens.git
cd Dev-Lens

2. Install backend dependencies

cd backend
npm install

3. Create .env file in /backend

JWT_SECRET=your_jwt_secret_here
GEMINI_API_KEY=your_gemini_api_key
GROQ_API_KEY=your_groq_api_key
TURSO_DATABASE_URL=libsql://your-db.turso.io
TURSO_AUTH_TOKEN=your_turso_token

4. Start the backend

node server.js
# Server running on http://localhost:5000

5. Open the frontend

Open frontend/pages/login.html in your browser, or serve the frontend folder with any static server:

npx serve frontend

---

🌐 Deployment

Service	Platform	URL
Frontend	Vercel	https://dev-lens-topaz.vercel.app
Backend	Render	https://dev-lens-39k6.onrender.com

Note: Render's free tier spins down after inactivity. The first request may take ~30 seconds to wake up.

---

🔌 API Endpoints

Method	Endpoint	Description
POST	/api/auth/signup	Create a new account
POST	/api/auth/login	Login and receive JWT
POST	/api/repo/analyze	Analyze a GitHub repository
GET	/api/repo/history	Get past analyses for user
GET	/api/repo/:id	Get a specific analysis
GET	/api/repo/:id/files	Get all files for a repo
GET	/api/repo/:id/edges	Get dependency edges
GET	/api/repo/:id/onboarding	Get onboarding path
POST	/api/ai/chat	AI chat proxy

---

🧠 How It Works

User pastes GitHub URL
        ↓
Repo Agent fetches file tree via GitHub API
        ↓
Dependency Agent parses imports and builds edge graph
        ↓
AI Agent (Gemini) generates summaries + danger scores per file
        ↓
Blast Radius Agent computes impact chains
        ↓
Health Score calculated from risk distribution
        ↓
Onboarding Agent builds role-based learning path
        ↓
Everything saved to Turso DB + rendered in D3.js dashboard

---

👥 Built By

Quantum Coders — Built for hackathon @ Anvil

---

📄 License

MIT License — feel free to use, fork, and build on top of DevLens.