Devlog #2

Last time ended with a working pipeline: GitHub App auth on a Rust server, my repo list coming back as JSON. This time the goal was simple to say and fun to do — turn that JSON into an actual galaxy, and make stars clickable so each repo opens up into its own little solar system.

Trimming 300 fields down to 7

GitHub’s repo API returns an absurd amount of data per repository. Hundreds of fields, most of which I’ll never touch. So the server got a new /api/galaxy endpoint that maps each repo down to what the galaxy actually needs: name, language, stars, fork/archived flags, last push, description. The frontend never sees the raw GitHub payload, which also keeps the design honest — tokens and GitHub-shaped data stay server-side, the browser only gets our own format.

Placing stars without a physics engine

The interesting problem was layout. Repos need positions in 3D space, they shouldn’t overlap, and related repos should cluster. I went with constellations: a small heuristic buckets each repo into a group (Web, Systems, Games, AI, Tools) based on language plus keywords in the name and description. Each constellation gets a wedge of the galaxy, and inside the wedge, repos spiral outward from the group center.

Star size is log-scaled from star count, because linear scaling either flattens the difference or explodes it. Color comes from GitHub’s own language colors — a Rust repo burns orange-brown, TypeScript blue. Forks and archived repos are hidden by default; a portfolio galaxy shouldn’t be full of other people’s work.

Tooltips came from drei’s <Html> component, which pins actual DOM elements to 3D coordinates. Hover a star, get name, language, stars, constellation. Felt like cheating, in a good way.

Clicking into a solar system

Clicking a star now fetches that repo’s full file tree — one git/trees/HEAD?recursive=1 call through the server proxy — and lays out the top level as a system: directories become planets on an inner orbit, files become moons on an outer one, file size sets moon size, extension sets color. Two thin ring meshes mark the orbits so the structure reads at a glance.

One trap I set for myself: switching views without resetting the camera left me stranded inside the old galaxy coordinates staring at nothing. Fixed by keying the <Canvas> on the selected repo so the camera respawns with the view. The back button is a plain HTML button floating over the canvas — sometimes the boring solution is the right one.

The bug that wasn’t mine

Finished the session with a scary-looking hydration error from Next.js. The diff showed an attribute trancy-version="7.9.1" on the <html> tag that definitely isn’t in my code — because it isn’t. A translation browser extension injects it before React loads, and React correctly reports that server HTML and client HTML differ. Nothing to fix; I just learned to read hydration diffs before panicking. Any attribute that isn’t mine means an extension did it.

Next up

Moons that actually open files — a code viewer panel with syntax highlighting. And at some point the recursive tree needs real LOD handling, because a big monorepo would currently try to render everything at once.