Skip to content
Abdullah

Project · 2026

Stack Universe

An interactive 3D solar system that turns a GitHub profile into a visual map of repositories, languages, commits, and activity. It makes a developer's history feel easier to explore at a glance.

Role

Solo Developer

Status

live

Stack

Next.js 14, Three.js, React Three Fiber, Supabase, Groq AI, GitHub API

Overview

Stack Universe visualizes a GitHub profile as an explorable 3D solar system. A developer's repositories, languages, commit history, and activity become spatial objects rather than another static bar chart or activity grid. It makes a developer's history feel navigable rather than flat.

The Problem

GitHub profiles are good at surfacing recent activity, but give almost no sense of a developer's overall technical range, where time was actually spent across years, or how output has evolved. The contribution heatmap is a single dimension of a much richer story. Most alternative profile tools still render everything as a static chart.

Approach

The core metaphor is a solar system: repositories orbit as planets, their size and brightness driven by commit count, star count, and recent activity. Language distribution maps to visual color. Clicking a planet surfaces its commit timeline and CI/CD signals directly in the scene.

The project was shipped across seven distinct phases:

  1. Core 3D engine — GitHub API integration and the foundational orbit layout using React Three Fiber and Three.js
  2. Language and activity mapping — Color-coding by primary language, orbit speed tied to commit frequency
  3. Contribution visualization — Commit timeline and activity heatmap rendered as part of the scene
  4. Analytics dashboard — Filterable profile statistics alongside the 3D view
  5. AI roast feature — Groq generates a short, sharp summary of the profile's patterns and quirks
  6. Multiplayer presence — Real-time indicators showing who else is exploring the same profile simultaneously, powered by Supabase Realtime
  7. Universe customization — Users can adjust visual parameters and export static views

Technical Decisions

Three.js and React Three Fiber handle all 3D rendering. Supabase stores session data and drives the multiplayer presence layer via Realtime subscriptions. GitHub's REST and GraphQL APIs supply profile, repository, and commit data.

Challenges encountered during development:

  • NextAuth GitHub OAuth break — GitHub introduced a new "iss" parameter in OAuth callbacks that NextAuth's token validator rejected. Required patching the callback handler to explicitly tolerate the new parameter.
  • Groq model deprecation — The "llama-3.3-70b-versatile" model was deprecated mid-development, requiring a model swap and a full retest of the roast prompt across different profile types.
  • Vercel preview branch OAuth mismatch — Vercel's automatic preview deployment URLs created a redirect URI mismatch. Required registering a separate GitHub OAuth app for the preview environment.

Outcomes

  • Featured in Google's AI Overview search results organically, without any promotion
  • Open-source and live at stack-universe.vercel.app
  • Used as a flagship portfolio anchor alongside SoloDesk

Outcomes

  • Featured in Google's AI Overview search results organically
  • Open-source with live interactive demo