git-city-3d-github-visualization

Skill by 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. 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) Buildings are generated from GitHub profile data: Git City uses instanced rendering for windows — critical for a city with many buildings: 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.