Your LeetCode profile as a 3D pixel art building in an interactive city.
LeetCode City transforms every LeetCode profile into a unique pixel art building. The more you solve, the taller your building grows. Explore an interactive 3D city, fly between buildings, and discover developers from around the world.
- 3D Pixel Art Buildings — Each LeetCode user becomes a building with height based on submissions, width based on skill levels, and lit windows representing activity
- Free Flight Mode — Fly through the city with smooth camera controls, visit any building, and explore the skyline
- Profile Pages — Dedicated pages for each developer with stats, achievements, and top solved problems
- Achievement System — Unlock achievements based on submissions, points, and more
- Building Customization — Claim your building and customize it with items from the shop (crowns, auras, roof effects, face decorations)
- Social Features — Send kudos, gift items to other developers, refer friends, and see a live activity feed
- Compare Mode — Put two developers side by side and compare their buildings and stats
- Share Cards — Download shareable image cards of your profile in landscape or stories format
| Metric | Affects | Example |
|---|---|---|
| Submissions | Building height | 1,000 solved → taller building |
| Active Days | Building width | More active days → wider base |
| Points | Window brightness | More points → more lit windows |
| Recent Activity | Window pattern | Recent solve → distinct glow pattern |
Buildings are rendered with instanced meshes and a LOD (Level of Detail) system for performance. Close buildings show full detail with animated windows; distant buildings use simplified geometry.
Supabase (developers table)
│
▼
generateCityLayout() ← src/lib/github.ts
├── calcHeightV2/calcHeight (submissions → height)
├── calcWidthV2/calcWidth (active days → width)
├── calcDepthV2/calcDepth (streak → depth)
├── calcLitPercentageV2 (recent activity → window glow)
└── block-grid placement (position every building on the map)
│
▼
CityBuilding[] ← passed from page.tsx to CityCanvas
│
▼
CityCanvas (Three.js scene) ← src/components/CityCanvas.tsx
├── Building3D (per building) ← src/components/Building3D.tsx
├── InstancedMesh decorations (trees, cars, lamps, benches…)
└── Sky, river, bridges, ads
│
▼
GPU — single frame
Two generation pipelines run inside generateCityLayout():
- V2 pipeline — for LC-claimed buildings (
isV2Dev). UsescalcHeightV2,calcWidthV2,calcDepthV2, andcalcLitPercentageV2, which map LeetCode-native stats (easy/medium/hard solved counts, contest rating, app streak) to visual dimensions. - Legacy pipeline — for unclaimed/GitHub-only buildings. Uses
calcHeight,calcWidth, andcalcDepth, which map GitHub contribution count, stars, and repo count.
Both pipelines feed into a shared block-grid placer: buildings are arranged into city blocks separated by streets and alleys, with district zones (districtZones) grouping them by tech stack.
All building windows share a single 2048×2048 canvas texture generated once at startup. It contains 6 lit-percentage bands (20%, 35%, 50%, 65%, 80%, 95%), each 42 rows tall and 256 columns wide, with 8px cells (6px window + 2px gap). Each building samples a UV region from its matching band — one texture, zero per-building allocation, one draw call for all windows across the entire city.
City decorations are rendered as THREE.InstancedMesh — one GPU draw call per geometry type regardless of how many instances exist in the scene:
| Mesh type | Instances |
|---|---|
| Tree trunks & canopies | All trees in the city |
| Lamp poles & lights | All street lamps |
| Car bodies & cabins | All parked cars |
| Benches, fountain parts | All plaza furniture |
| Sidewalk tiles | All pavement |
| Collectibles (fly mode) | Up to 40 coins |
Building bodies are handled individually in Building3D.tsx since each needs a unique size, color, and effect set.
Buildings switch detail level based on camera distance, computed per frame:
- Near — full window texture, neon outlines, particle auras, billboard images, and all cosmetic effect layers
- Far — simplified geometry, no texture sampling, no effect layers
This keeps frame rate stable regardless of city size — adding more buildings only affects the far-LOD bucket, which has near-zero per-building GPU cost.
- Framework: Next.js 16 (App Router, Turbopack)
- 3D Engine: Three.js via @react-three/fiber + drei
- Database & Auth: Supabase (PostgreSQL, GitHub OAuth, Row Level Security)
- Payments: Stripe
- Styling: Tailwind CSS v4 with pixel font (Silkscreen)
- Hosting: Vercel
- CI/CD: GitHub Actions with automated PR review (Copilot), labeling, and security scans
npx leetcode-city init
cd The-Leetcode-City
npm run devThat's it. No API keys needed for frontend development. The public keys are pre-filled.
# Clone the repo
git clone https://github.com/Ixotic27/The-Leetcode-City.git
cd The-Leetcode-City
# Automated setup (installs deps + creates .env.local)
npm run setup
# Start dev server
npm run devgit clone https://github.com/Ixotic27/The-Leetcode-City.git
cd The-Leetcode-City
npm install
cp .env.example .env.local
npm run devOpen http://localhost:3001 to see the city.
The .env.example file comes pre-filled with public read-only keys so you can start developing immediately. No extra configuration needed for frontend work.
| Variable | Pre-filled? | Needed For |
|---|---|---|
NEXT_PUBLIC_SUPABASE_URL |
✅ | Everything (public key) |
NEXT_PUBLIC_SUPABASE_ANON_KEY |
✅ | Everything (public key) |
SUPABASE_SERVICE_ROLE_KEY |
❌ | Auth, writes, API routes |
GITHUB_TOKEN |
❌ | GitHub API integration |
STRIPE_SECRET_KEY |
❌ | Payment features only |
RESEND_API_KEY |
❌ | Email notifications only |
NOWPAYMENTS_API_KEY |
❌ | Crypto payments only |
| ✅ Works out of the box | |
|---|---|
| View the 3D city | Sign in / auth |
| Browse developer profiles | Claiming buildings |
| UI/CSS/component changes | Shop purchases |
| 3D rendering & animations | Raids & interactions |
| Leaderboard & search | API route writes |
Need full access? Ask @Ixotic27 for the service role key.
🎉 NEW: Zero-Config Contribution Workflow! We've just made contributing 10x easier. You no longer need to set up any API keys to work on the UI, 3D scenes, or styling. Just run
npx leetcode-city initand start coding immediately! See Getting Started for details.
Please see our comprehensive Contributing Guide for full details on:
- 🚀 How to set up the project (Zero-config)
- 📝 Assignment rules and PR guidelines
- 🏷️ Our label system and automated reviews
- 🏆 GSSoC 2026 Scoring and information
AGPL-3.0 — You can use and modify LeetCode City, but any public deployment must share the source code.
Original creator @Ixotic27
Inspired by Git City