Git City — 3D GitHub Profile Visualization Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection. Git City transforms GitHub profiles into a 3D pixel art city. Each user becomes a unique building: height from contributions, width from repos, window brightness from stars. Built with Next.js 16 (App Router), React Three Fiber, and Supabase. Quick Setup Environment Variables Fill in .env.local after copying: Finding Supabase values: Dashboard → Project Settings → API Finding GitHub token: github.com → Settings → Developer settings → Personal access tokens (fine grained recommended) Project Structure Core Concepts Building Metrics Mapping Buildings are generated from GitHub profile data: 3D Building Component (React Three Fiber) Instanced Meshes for Performance Git City uses instanced rendering for windows — critical for a city with many buildings: GitHub API Integration Supabase Integration Achievement System Adding a New Building Decoration Camera / Flight Controls Server Actions (Next.js App Router) Profile Page Route Common Development Patterns LOD (Level of Detail) System Fetching with SWR in City View Key API Routes Route Purpose GET /api/buildings Fetch all city buildings with positions GET /api/profile/[username] GitHub + city profile data POST /api/kudos Send kudos to a user GET /api/og/[username] Generate OG share card image POST /api/webhook/stripe Stripe payment webhook GET /admin/ads Admin panel (requires ADMIN GITHUB LOGINS ) Troubleshooting 3D scene not rendering Check that @react three/fiber and three versions are compatible. The canvas needs a height set on its container div. GitHub API rate limits Use a fine grained token with appropriate scopes. The app caches GitHub responses in Supabase to avoid repeated API calls. Supabase auth not working locally Configure the GitHub OAuth provider in your Supabase project and ensure your local callback URL ( http://localhost:3001/auth/callback ) is allowlisted. Buildings not appearing Check that Supabase Row Level Security policies allow reads on the profiles and buildings tables for anonymous users. Window shimmer/flicker This is usually a Z fighting issue. Add a tiny offset ( 0.001 ) to window mesh positions along the normal axis. Performance issues with many buildings Ensure instanced meshes are used for windows and the LOD system is active. Avoid creating new THREE.Material instances inside render loops — define them outside components or use useMemo . Stack Reference Layer Technology Framework Next.js 16 (App Router, Turbopack) 3D Rendering Three.js + @react three/fiber + drei Database Supabase (PostgreSQL + RLS) Auth Supabase GitHub OAuth Payments Stripe Styling Tailwind CSS v4 + Silkscreen font Hosting Vercel License AGPL 3.0

git-city-3d-github-visualization