DevDNA

GitHub Developer Personality Graph — generate a futuristic, embeddable SVG “DNA card” from real GitHub contribution data.

What is DevDNA? • Features • How it works • API usage • Local development • Configuration • Security & privacy

DevDNA is a modern Next.js app that generates a dynamic SVG profile card (an “AI-styled developer personality graph”) by analyzing a developer’s real GitHub history using the official GitHub GraphQL API.

Unlike simple REST-based widgets, DevDNA is built to fetch accurate totals and derive “traits” (Builder, Collaborator, Impact, Problem Solver, Consistency) and an archetype label (e.g. Relentless Shipper, Bug Hunter Elite).

The homepage provides a simple form to choose:

• username
• theme

It then previews the SVG by pointing an <img> at:

/api/dev-dna?username=<user>&theme=<theme>

The API endpoint is implemented using Next.js route handlers:

• GET /api/dev-dna
• It fetches GitHub data via GraphQL
• It computes “traits” and an archetype
• It renders the final SVG using Satori + a React component card layout

DevDNA derives a personality-like summary from:

• commits / PRs / issues
• stars + follower count
• language distribution (top languages)

GET /api/dev-dna?username=<github_login>&theme=<theme>

• username (string, optional): GitHub login. Defaults to torvalds.
• theme (string, optional): dark | light | neon. Defaults to dark.

• Dark:
  • https://devdna.netlify.app/api/dev-dna?username=akshitsutharr&theme=dark
• Light:
  • https://devdna.netlify.app/api/dev-dna?username=akshitsutharr&theme=light
• Neon:
  • https://devdna.netlify.app/api/dev-dna?username=akshitsutharr&theme=neon

[![DevDNA](https://devdna.netlify.app/api/dev-dna?username=YOUR_USERNAME&theme=dark)](https://devdna.netlify.app)

• Node.js (recommended: latest LTS)
• A GitHub Personal Access Token (PAT) for GraphQL

npm install

Create .env.local in the project root:

GITHUB_TOKEN=ghp_your_personal_access_token_here

npm run dev

Open:

• http://localhost:3000

GitHub’s GraphQL API requires authentication for reliable contribution and history queries. DevDNA uses the token to fetch accurate totals (commits/issues/PRs), and to avoid anonymous API limitations.

Use the theme query parameter:

• dark — deep space look (default)
• light — minimal bright layout
• neon — high-contrast cyberpunk accent

Example:

/api/dev-dna?username=torvalds&theme=neon

High-level layout (App Router):

• src/app/ — Next.js app router pages, layout, global styles
• src/app/api/dev-dna/route.js — SVG generation endpoint
• src/lib/ — GitHub GraphQL fetch + trait calculation logic
• src/components/ — SVG card React component rendered by Satori

• Do not expose your GITHUB_TOKEN to the browser.
• DevDNA reads GITHUB_TOKEN on the server (API route) using process.env.
• Prefer a token with the minimum necessary scopes.

This project typically needs:

• read:user
• repo (only if needed for private repo insights; for public-only data you may be able to reduce scopes)

The SVG response is served with edge-friendly caching headers:

• Cache-Control: public, s-maxage=14400, stale-while-revalidate=86400

This helps the card load quickly when embedded across GitHub READMEs.

• More themes (glass, mono, sunset)
• “Compact” card size variant (e.g. 600×360)
• Additional traits (reviews, discussions, community)
• Rate-limit safe batching + backoff
• Optional unauthenticated mode with graceful fallback (less accurate)

PRs and suggestions are welcome.

1. Fork the repo
2. Create a feature branch
3. Commit with clear messages
4. Open a Pull Request