git-city README

The project's README from github.com/srizzon/git-city. As one markdown file: README.md.

Git City

Your GitHub profile as a 3D pixel art building in an interactive city.

thegitcity.com

Git City — Where Code Builds Cities

What is Git City?

Git City transforms every GitHub profile into a unique pixel art building. The more you contribute, the taller your building grows. Explore an interactive 3D city, fly between buildings, and discover developers from around the world.

Features

How Buildings Work

Metric Affects Example
Contributions Building height 1,000 commits → taller building
Public repos Building width More repos → wider base
Stars Window brightness More stars → more lit windows
Activity Window pattern Recent activity → 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.

Tech Stack

Getting Started

# Clone the repo
git clone https://github.com/srizzon/git-city.git
cd git-city

# Install dependencies
npm install

# Set up environment variables

# Linux / macOS
cp .env.example .env.local

# Windows (Command Prompt)
copy .env.example .env.local

# Windows (PowerShell)
Copy-Item .env.example .env.local

# Fill in your environment variables

# Run the dev server
npm run dev

Open http://localhost:3001 to see the city.

Local Supabase (no remote project needed)

You can run the whole backend locally — no Supabase account, no GitHub OAuth app.

Prerequisites: a container runtime and the Supabase CLI.

# macOS (Colima is a lightweight, free Docker alternative)
brew install colima docker supabase/tap/supabase
colima start

# ...or use Docker Desktop instead of Colima, then just:
# brew install supabase/tap/supabase

Start the stack (spins up Postgres/Auth/Storage/Studio and applies every migration from scratch):

supabase start          # first run pulls images; prints your local URL + keys
supabase status         # re-print the URL and keys at any time

Point .env.local at the printed local values:

NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=<Publishable key from `supabase status`>
SUPABASE_SERVICE_ROLE_KEY=<Secret key from `supabase status`>

Then npm run dev. The city renders straight from your local database — no snapshot step needed in local dev.

Logging in (zero config): the GitHub OAuth provider isn't configured for a local stack (it needs a client secret that can't ship in the repo). Instead, clicking Sign in with GitHub locally takes you to a built-in dev login — type any GitHub username and you're in, with a building created from that account. You can also go straight to http://localhost:3001/api/dev/login. This route is automatically disabled in production.

Useful commands:

supabase db reset       # re-apply all migrations on a clean database
supabase stop           # shut the stack down (data is preserved)

Studio (DB browser) runs at http://127.0.0.1:54323.

Environment Setup

After copying .env.example to .env.local, fill in these values:

Where to find the Supabase values

Open your Supabase project dashboard, then go to Project Settings -> API.

For local GitHub login to work, you also need to configure the GitHub OAuth provider in Supabase and add your local callback URL if required by your setup.

Where to find the GitHub token

Open GitHub and go to Settings -> Developer settings -> Personal access tokens.

Create a token, copy it once, and place it in GITHUB_TOKEN inside .env.local.

License

AGPL-3.0 — You can use and modify Git City, but any public deployment must share the source code.

Built by @samuelrizzondev

git-city (srizzon/git-city)

Searching Database…

5.8K ·GitHub
Git-city
Что это такое?Git City превращает каждый профиль GitHub в уникальное здание из пиксель-арта в 3D внутри интерактивного города: чем больше вы вносите вклад, тем выше растёт ваше здание.
Это готовое веб-приложение или его нужно развернуть самому?В первую очередь это готовое веб-приложение, в которое вы заходите и входите через GitHub, но исходный код полностью открыт и распространяется по лицензии AGPL-3.0, так что вы можете запустить собственную копию со своими настройками Supabase и Vercel.
Как мне запустить это локально?Поднимите локальный стек Supabase со средой контейнеров и Supabase CLI, укажите в .env.local выведенные локальные значения, затем выполните npm run dev. Для локальной разработки не нужны ни аккаунт Supabase, ни приложение GitHub OAuth.
Нужны ли мне для пробы настоящее приложение GitHub OAuth или аккаунт Supabase?Для локальной разработки — нет: встроенный вход для разработчиков позволяет ввести любое имя пользователя GitHub и создать тестовое здание. Для продакшена нужны Supabase (Postgres/Auth), персональный токен доступа GitHub и Stripe для платежей.
Работает ли вход через GitHub сразу, если запустить всё локально?Нет. Настоящий провайдер GitHub OAuth для локального стека не настроен, потому что ему нужен клиентский секрет, который нельзя хранить в репозитории, поэтому локальная разработка использует фейковый маршрут входа, который автоматически отключается в продакшене.
Что значит лицензия AGPL-3.0, если я запущу собственную копию?Вы вправе использовать и изменять Git City, но если вы развернёте публичную копию, вас юридически обязывают поделиться и своим исходным кодом.
От чего зависят высота и ширина здания?Высота здания зависит от количества ваших вкладов, ширина — от числа публичных репозиториев, а яркость и узор окон отражают звёзды и недавнюю активность.
Что ещё можно делать, кроме как смотреть на своё здание?Можно свободно летать по городу, сравнивать двух разработчиков бок о бок, отправлять приветы и подарки, открывать достижения, настраивать здание предметами из магазина и скачивать карточки профиля, которыми можно делиться.
На чём построен 3D-город?Next.js 16 с Turbopack для приложения, Three.js через @react-three/fiber и drei для отрисовки, Supabase (Postgres/Auth) для бэкенда, Stripe для платежей и Tailwind CSS v4 для стилей.
Почему далёкие здания выглядят проще, чем близкие?Git City отрисовывает здания через инстансированные меши и систему уровней детализации (LOD): близкие здания получают полную анимированную детализацию, а дальние — упрощённую геометрию, чтобы работа оставалась плавной.
What are similar projects?Hermes3D, petdex, chatbot, human-atlas, gitdiagram, crm, documenso, mike
Which topics is it in?github-profile, pixel-art, supabase, stripe, vercel, full-stack, threejs, webgl, agplv3, visualization, tailwindcss, oauth
Creator
srizzon
Size
32.7 MB
Stars
5.8K
Updated
CommitOct 19
Age
7mo
Commits · 90 Days