用途:Git City 将 GitHub 资料可视化为 3D 像素风城市,每个用户对应一栋可交互建筑,用于展示与对比开发者活跃度。
主要能力:建筑高度取自总贡献,宽度取自公开仓库数,窗户亮度取自星标总数,窗户图案取自近期活跃模式;提供城市主视图、用户资料页、并排对比模式和管理后台,并含成就系统、建筑装饰(皇冠等槽位)、发送 kudos、OG 分享图与 Stripe 支付相关接口。
使用方式:克隆仓库后安装依赖并配置环境变量,再启动开发服务器。
git clone https://github.com/srizzon/git-city.git cd git-city npm install cp .env.example .env.local npm run dev
访问 http://localhost:3001。环境变量需填写 Supabase 的 NEXT_PUBLIC_SUPABASE_URL、NEXT_PUBLIC_SUPABASE_ANON_KEY、SUPABASE_SERVICE_ROLE_KEY,GitHub 的 GITHUB_TOKEN,可选 ADMIN_GITHUB_LOGINS。关键路由包括 /api/buildings、/api/profile/[username]、/api/kudos、/api/og/[username] 等。
技术栈:Next.js 16 App Router、Three.js 与 @react-three/fiber、Supabase(PostgreSQL + RLS,GitHub OAuth)、Tailwind CSS v4、Vercel 部署,许可证 AGPL-3.0。
限制与注意事项:GitHub API 存在速率限制,建议使用细粒度令牌并由 Supabase 缓存;本地需在 Supabase 配置 GitHub OAuth 并允许回调地址;若建筑不显示需检查 RLS 读取策略;窗口闪烁多为 Z-fighting,需加微小偏移;建筑较多时须使用实例化网格与 LOD 系统。资料未提供具体收费、价格、性能指标或实际使用效果。