Dev Archetype Tree

Turn your GitHub profile into an RPG-style skill tree with AI-powered archetypes, unlockable skills, and brutally honest developer roasts.

Comment

Dev Archetype Tree

Inspiration

Every developer has a GitHub. Most of us also have a quiet question: what does it actually say about me?

Hundreds of commits, dozens of repos, years of work — and all anyone sees is a green contribution graph.

Meanwhile, the internet loves turning identity into shareable artifacts:

  • Stack Overflow ranks
  • Spotify Wrapped
  • RPG character builds

So we asked the obvious question no one had asked:

What if your GitHub became an RPG skill tree?

Not a dashboard. Not a chart. An actual tree, with glowing nodes for what you’ve earned, locked branches for what you haven’t, and an archetype that names the kind of builder you really are.

What it does

Dev Archetype Tree turns any GitHub profile into a personalized RPG skill tree in seconds.

You paste a username, and the app:

  • Pulls every public repo through the GitHub API
  • Sends your developer profile to an LLM for deep analysis

  • Classifies you into 1 of 10 hand-crafted archetypes:

    • The Cathedral Builder
    • The Sniper
    • The Magpie
    • The Forge Master
    • and more

  • Renders a 30-node interactive skill tree across 5 domains:

    • Frontend
    • Backend
    • Databases
    • DevOps
    • AI/ML

  • Marks each skill as:

    • unlocked
    • partial
    • locked

  • Uses real repo evidence for every node

  • Gives actionable quests for missing skills

  • Generates a witty, shareable roast card users can export as PNG

It’s a mirror, a game, and a roadmap — all at once.

How we built it

The stack is intentionally lean. AI handled the heavy lifting. Humans guided the chaos.

Frontend

  • React
  • Vite
  • TypeScript
  • Tailwind CSS
  • Shadcn UI
  • Framer Motion
  • React Flow
  • TanStack Query

AI Pipeline

  • GitHub REST API for repo/profile aggregation
  • Groq + Llama 3.3 70B for analysis
  • Zod validation for schema safety and retry logic

Rendering & Sharing

  • React Flow for handcrafted node layouts
  • html-to-image for downloadable PNG cards

Design Philosophy

The aesthetic was:

“Hades meets Linear.”

Dark navy backgrounds. Gold accents. Subtle glow. Premium feel.

Challenges we ran into

1. LLM reliability

Free-tier LLMs love malformed JSON.

We had to:

  • Lock prompts with explicit schemas
  • Add Zod validation
  • Build retry logic
  • Create fallback archetypes

This became the single biggest engineering investment.

2. The 5-second comprehension problem

Early versions tried explaining too much:

  • stats
  • percentages
  • graphs
  • breakdowns

None of it landed.

So we stripped everything down to:

  • archetype
  • skill tree
  • roast

The product instantly became understandable.

3. Tree visualization complexity

React Flow can become a black hole if you rely on auto-layout.

We avoided that entirely.

All 30 nodes were manually positioned in configuration files.

The result:

  • cleaner layout
  • intentional spacing
  • more game-like presentation
  • no algorithmic mess

4. Cold-start demo latency

Hackathon judges hate waiting.

A few seconds feels massive during demos.

We optimized by:

  • switching from Claude to Groq
  • reducing response time to ~1–2 seconds
  • pre-caching famous developer profiles

That dramatically improved first impressions.

5. Roast tone balancing

The roast system took multiple iterations.

Too soft:

  • feels fake

Too harsh:

  • feels mean

Final tone:

“Senior engineer reviewing your pull request.”

Honest. Funny. Never punching down.

Accomplishments we’re proud of

A pitch people instantly understand

“Your GitHub as an RPG skill tree.”

That clarity matters. Most hackathon projects fail right there.

Evidence-based AI

Every unlocked node maps to real repositories.

Every missing node generates a meaningful quest.

No random hallucinations.

Strong visual identity

The product genuinely feels polished:

  • gold-on-navy palette
  • glowing nodes
  • animated transitions
  • premium UI feel

Not just another AI dashboard.

Fully shipped product during hackathon time

The team completed:

  • landing page
  • AI analysis pipeline
  • skill tree system
  • share card export
  • edge-case handling
  • caching
  • deployment

All live. All functional.

Curiosity loop

The biggest signal:

“I want to try mine too.”

That reaction is incredibly hard to engineer.

What we learned

AI-native development is real

This wasn’t “vibe coding.”

AI accelerated scaffolding.

But quality still depended on:

  • architecture decisions
  • prompt engineering
  • schema validation
  • UX judgment
  • knowing when to override AI

The leverage came from direction, not blind generation.

Prompt engineering is product engineering

The most important file in the entire project was the LLM prompt.

Changing prompt structure changed the product more than many UI iterations.

That’s a major shift in modern software engineering.

Identity beats utility

People rarely share dashboards.

They share identity.

Every feature was filtered through one question:

“Would someone screenshot this?”

That became the product compass.

Constraints create better products

Reducing scope was harder than expanding it.

But focus is exactly what made the project demo-able and memorable.

What’s next for Dev Archetype Tree

Comparison Mode

Paste two GitHub usernames. Compare density, strengths, and archetypes.

Built-in viral mechanic.

Tree DNA

Every user gets:

  • unique color signatures
  • unique branch shapes
  • personalized visual identity

No two trees feel identical.

Timeline Mode

Watch your tree evolve across years of GitHub history.

Visualize growth over time.

Boss Fight Nodes

Major milestones unlock entire branches.

Examples:

  • Shipped a production SaaS
  • Maintained OSS with 100+ stars
  • Led a large open-source contribution

Team Trees

Analyze entire engineering teams.

Useful for:

  • hiring
  • mentorship
  • skill-gap analysis
  • team balancing

Expanded domains

Future specializations:

  • Mobile
  • Security
  • Embedded
  • Data Engineering
  • ML Research

Long-Term Vision

GitHub shows what you’ve built.

Dev Archetype Tree shows where you’re going.

The goal is to make developer growth:

  • visible
  • personal
  • gamified
  • motivating
  • shareable

Not just tracked. Experienced.

Built With

Share this project:

Updates

Submission history