Git City: Building a 3D Pixel Metropolis Where Every Developer is a Landmark

Core Question: If boring code commit records were transformed into visible 3D buildings, what kind of cityscape would our technical archives present?

The answer is a vibrant pixel metropolis. Git City transforms GitHub profiles into unique pixel art buildings. Through the mapping of height, width, and brightness, a developer’s contribution history becomes tangible. This is not just a visualization project; it is an innovative platform blending 3D rendering technology, social interaction, and gamification thinking.

1. Project Overview: When Code Becomes the City’s Foundation

Core Question of this Section: What exactly is Git City, and how does it redefine developer identity presentation?

Git City is an interactive 3D city simulation platform that converts every GitHub user’s profile into a unique building. In this virtual city, code contributions are no longer just boring green squares; they are skyscrapers rising from the ground. The more you contribute, the taller the building; the more repositories you have, the wider the base.

Image Source: Unsplash – City Landscape Illustration

Built by developer Samuel Rizzon, the project utilizes the Next.js 16 and Three.js tech stacks to deliver a fluid 3D experience directly in the browser. Users can fly freely through the city, view other developers’ “buildings,” and even renovate and customize their own.

1.1 Core Philosophy: The Value of Visualizing Technical Archives

In traditional developer social networks, we are used to understanding a person through resumes, repository lists, or static contribution graphs. Git City breaks the limits of this two-dimensional plane. It constructs a “cyberpunk-style” social space where you can直观地 see a developer’s influence at a glance—is it a brightly lit skyscraper or a delicate cottage?

The value of this visualization lies in its intuitiveness. Without reading complex charts, you can identify core contributors in the community just by scanning the skyline. As community users have remarked, this evokes William Gibson’s descriptions of “cyberspace,” turning abstract data into spatial entities.

2. Building Mapping Logic: How Data Dictates Form

Core Question of this Section: How are the various data indicators on GitHub specifically transformed into architectural features?

The generation of every building strictly follows a set of mapping rules based on GitHub data. These rules ensure the uniqueness of the buildings while guaranteeing unity between visual representation and data substance. The system uses instanced meshes and a Level of Detail (LOD) system for rendering, ensuring rich detail for nearby buildings while optimizing performance for distant views.

Here is the specific mapping mechanism:

Data Metric	Architectural Feature	Specific Example
Contributions	Determines Height	1,000 commits correspond to higher floors, forming a skyscraper.
Public Repos	Determines Width	More repos result in a larger base area, appearing stable.
Stars	Determines Brightness	More stars make the windows glow brighter, standing out.
Recent Activity	Determines Glow Pattern	Active recently? Windows display unique breathing/flash effects.

2.1 Technical Implementation Details and Scenarios

Scenario Example:
Suppose a developer is promoted to management recently; their code submission volume might drop. In Git City, this intuitively manifests as their building “stopping growth” or appearing less prominent relative to the continuously growing surrounding buildings. A comment in the community joked, “You can even tell when some people got promoted to manager,” highlighting the unique narrative capability brought by data visualization.

Technical Reflection:
This rendering approach based on instanced meshes is key to the project’s fluid operation. If every building were modeled independently, the browser would be overwhelmed. Through the LOD system, distant buildings are simplified into low-poly models; only when the user pilots their plane close by do the detailed window animations and lighting effects load. This engineering mindset of “loading on demand” aligns perfectly with modern frontend performance optimization philosophies.

3. Core Features and User Experience

Core Question of this Section: Besides viewing buildings, what else can users do on this platform?

Git City is not just an exhibition of ornamental models; it builds a complete interactive ecosystem. From flight exploration to social interaction and the personal achievement system, every环节 enhances user engagement.

3.1 Free Flight and Exploration Mode

Users can pilot a pixel-style small plane, freely weaving through the city skyline. This experience evokes classic flight simulation games. With smooth camera controls, you can fly to the top of any building and overlook the texture of the entire city.

Image Source: Pexels – Flight Exploration Illustration

User Feedback and Areas for Improvement:
On the mobile experience, touch controls leave some room for optimization when clicking on tall buildings. This suggests that when developing WebGL-heavy applications, interaction logic for PC and mobile needs specific design. Furthermore, the community even offered a highly interesting suggestion: adding collision detection to allow planes to crash into buildings and cause “damage,” which could only be repaired by committing new code. This crazy idea deeply reveals developers’ desire for “code is power.”

3.2 Personal Profile and Achievement System

Every developer has a dedicated profile page detailing their stats, achievement badges, and top repositories. The achievement system is a crucial mechanism to incentivize participation, covering dimensions like contribution volume, star count, repo count, and referrals.

Feature Highlights:

• Building Customization: Users can claim their building and purchase decorations (like crowns, auras, roof effects, face decorations) from the shop to personalize the appearance.
• Social Features: Supports sending kudos to other developers, gifting items, and viewing a live activity feed.
• Compare Mode: This is a feature with killer potential. Placing two developers side-by-side allows for a visual comparison of their technical influence through the height and width differences of their buildings.
• Share Cards: Generates shareable images in landscape or stories format for social media propagation.

3.3 Monetization Attempts: A Clever Revenue Model

The project introduces a payment system based on Stripe, allowing users to buy decorations. This model is very smart; it doesn’t destroy the core open-source spirit but generates revenue by offering personalized value-added services. For developers who want their building to stand out in the crowd, this is an acceptable and fun payment point.

4. Deep Dive into the Tech Stack

Core Question of this Section: How do you build a high-performance, scalable 3D real-time rendering application on the Web?

Git City’s tech selection is very modern, representing the cutting-edge trends of current Web development. It chose Next.js 16 as the full-stack framework, utilizing its latest App Router and Turbopack bundler, greatly improving development efficiency and application performance.

Image Source: Unsplash – Tech Stack Illustration

4.1 Core Technical Components

1. 3D Engine:

   • Uses Three.js as the underlying WebGL library.
   • Through react-three/fiber, Three.js’s imperative syntax is converted into React’s declarative components, making 3D scene management as simple as writing normal DOM structures.
   • The auxiliary library drei provides a wealth of practical helpers and abstractions, such as camera controls and loaders, further lowering the development barrier.

2. Backend & Database:

   • Uses Supabase to provide backend services. This includes not only the PostgreSQL database but also integrated GitHub OAuth authentication and Row Level Security (RLS). This means data security is guaranteed directly at the database layer, not just relying on application-layer logic.

3. Styling & Fonts:

   • Tailwind CSS v4 is responsible for rapid style construction.
   • The font chosen is “Silkscreen,” a pixel-style font that perfectly matches the project’s overall art style, enhancing immersion.

4.2 Development Log: The Birth of 21,000 Lines of Code

Core Question of this Section: How was such a complex system built in an extremely short time?

This is perhaps the most shocking part of the project: the author wrote approximately 21,000 lines of code in 4 days. This reveals the immense potential of modern AI-assisted programming. The author mentioned in his reply that his workflow was “Claude Code + VSCode + Me”.

Author’s Reflection and Insight:
This is not just a matter of speed, but an embodiment of “Vibe Coding.” In this mode, the developer acts more like an architect and commander, while the AI is the soldier executing specific logic.

• Qualitative Change in Efficiency: In traditional development workflows, chores like configuring Webpack, adjusting camera parameters, and writing SQL statements consume vast amounts of time. With AI assistance, developers can focus on core business logic—namely “how buildings map data” and “how users interact.”
• Quality Control: Although code generation is extremely fast, the Reddit community also pointed out issues like mobile adaptation. This indicates that while AI-generated code has a solid skeleton, it still requires human experience to intervene in detail polishing and edge case handling. This validates the importance of “Human-in-the-loop”—AI can build a city, but only humans can make it livable.

5. Deployment and Running Guide

Core Question of this Section: How can an ordinary developer run or secondary develop this project locally?

As an open-source project (AGPL-3.0 license), Git City allows anyone to clone, modify, and deploy. Here are the detailed startup steps:

5.1 Quick Start Steps

1. Clone the Repository:
   First, clone the project code to your local machine.

   git clone https://github.com/srizzon/git-city.git
   cd git-city
   

2. Install Dependencies:
   Use npm to install the required dependency packages for the project.

   npm install
   

3. Environment Configuration:
   Copy the example environment file and fill in the necessary keys. You will need the Supabase project URL and keys, as well as Stripe API keys.

   cp .env.example .env.local
   # Fill in Supabase and Stripe related configurations in .env.local
   

4. Run Development Server:
   Start the local development environment.

   npm run dev
   

   Subsequently, visit http://localhost:3001 in your browser to see your local Git City.

5.2 License Description

The project uses the AGPL-3.0 license. This means you can freely use and modify the code, but if you provide the modified version to the public over a network, you must open source your source code. This is a strong protection for the open-source spirit, ensuring the community can continue to benefit from improvements.

6. Community Echoes and Future Imagination

Core Question of this Section: What has been the industry’s reaction to this project, and how can it evolve?

Since its release, Git City has sparked heated discussions in technical communities like Reddit. Most comments focused on praises like “This is so cool” and “Finally someone made a cyberpunk-style GitHub.” Some users even stated it reminded them of games from the mid-2000s like Coke Music or SimCopter; this combination of nostalgia and modern technology creates a wonderful chemical reaction.

6.1 User Insights

• The “Manager Building” Phenomenon: Users discovered that a developer’s career trajectory can be judged by the height variation of buildings. This unintentional narrative function adds sociological significance to the project.
• Mainstream Potential: Comments pointed out that if this model were transplanted to social platforms like Twitter, Facebook, or Reddit, it could become mainstream. Imagine if a Twitter profile was a city determined by tweet volume—what kind of experience would that be?
• Interactivity Demand: Users crave deeper interactions, such as clicking a window to see specific commit records, or the “plane crash” feature mentioned earlier. This indicates users are not satisfied with just “watching,” but want to “play.”

6.2 Unique Insight: The Next Frontier of Visualization

Git City’s success is not just a technical success, but a victory of concept. It proves that in the Web 3.0 era, our display of identity can be more three-dimensional and diversified.

• From Plane to Space: Early internet personal homepages were pure text, later becoming multimedia cards. Now, Git City预示着 the possibility of “spatial homepages.”
• Landmark-ization of Data: Transforming data into landmarks gives originally cold numbers physical world attributes (height, volume, light and shadow), greatly enhancing the emotional resonance of the data.

Image Source: Unsplash – Data Connection and Future

7. Practical Summary and Action Checklist

To facilitate quick adoption or reference for developers, here is the精华 summary of this article’s content.

7.1 Practical Summary

Git City is an open-source project that visualizes GitHub profiles into 3D pixel buildings. It utilizes Next.js, Three.js, and Supabase to build an interactive city environment, mapping user contributions, repos, and stars through building height, width, and brightness. The project not only provides entertainment features like flight exploration and building customization but also explores the application of AI-assisted programming (Vibe Coding) in rapidly building complex systems. Its AGPL-3.0 open-source license encourages secondary innovation based on the community.

7.2 Action Checklist

If you want to learn from or develop based on this project, please execute the following steps:

• [ ] Environment Preparation: Ensure Node.js and Git are installed locally.
• [ ] Code Retrieval: Run git clone https://github.com/srizzon/git-city.git.
• [ ] Dependency Installation: Run npm install.
• [ ] Service Configuration: Register for a Supabase account and create a project to get the API URL and Key; register for a Stripe account (if testing payments). Fill this information into .env.local.
• [ ] Project Launch: Run npm run dev and visit localhost:3001.
• [ ] Code Study: Focus on the Three.js component logic under the components/ directory and the Next.js routing structure under the app/ directory.
• [ ] Secondary Development Attempt: Try modifying the building mapping rules (e.g., mapping the number of Issues to the building’s color) to experience the fun of data visualization.

---

One-page Summary

Project Name: Git City
Core Value: Transforming GitHub contribution records into a 3D pixel city, realizing the three-dimensionalization and gamification of technical archives.
Tech Stack: Next.js 16 (App Router), Three.js (React Three Fiber), Supabase, Tailwind CSS v4.
Key Features:

• Data Mapping: Height = Contributions, Width = Repos, Brightness = Stars.
• Interaction: Flight mode, building customization, developer comparison.
• Development Mode: AI-assisted rapid development (4 days / 21,000 lines of code).
  Open Source License: AGPL-3.0 (Secondary development versions must be open-sourced).
  Target Audience: Frontend Engineers, WebGL Enthusiasts, Open Source Maintainers.

---

Frequently Asked Questions (FAQ)

Q1: How does Git City ensure the 3D scene runs smoothly in the browser?
The project uses Three.js’s Instanced Mesh technology to handle a large number of repetitive building structures and introduces a LOD (Level of Detail) system. This means distant buildings use simplified models, while nearby ones use detailed models, significantly reducing GPU load.

Q2: Is my GitHub data stored? If so, where?
Yes, the project uses Supabase (based on PostgreSQL) to store user data. Supabase also provides GitHub OAuth authentication, ensuring only the user themselves can modify their building settings.

Q3: Why choose the AGPL-3.0 license?
AGPL-3.0 is a strict open-source license. It stipulates that any developer who modifies the code and provides it as a network service must open source their modified source code. This ensures that community contributions can feed back to all users.

Q4: Can I use other 3D engines to implement similar functions?
Absolutely. While this project uses Three.js, the core logic is the mapping of data to geometry. You can fully use other Web 3D engines like Babylon.js or PlayCanvas, or even implement similar visualization in game engines like Unity or Unreal.

Q5: Does the project support mobile access?
It is supported, but the experience needs optimization. According to community feedback, mobile flight controls and click interactions are not as smooth as on PC in some cases (like clicking on tall buildings), which is a common challenge for Web 3D applications on mobile.

Q6: What is “Vibe Coding,” and how is it reflected in this project?
“Vibe Coding” in this project refers to using AI (like Claude Code) to assist in high-intensity, rapid code generation. It reflects the role shift of developers from “writing code” to “commanding code writing,” greatly shortening the cycle from idea to prototype.

Q7: How can I customize my building’s appearance?
You need to log in and “claim” your building. Afterward, you can purchase decorations (crowns, auras, etc.) through the platform’s built-in shop (payment required or possibly obtained through events) and apply them directly to your building in the 3D scene.

Q8: Can this project be used for non-GitHub data visualization?
Absolutely. Its architecture is generic. As long as the data source is replaced (e.g., Twitter tweet count, Facebook interaction count) and the mapping rules are adjusted, it can easily be transformed into “Twitter City” or any other form of data city.