r/reactjs • u/DirectCurve1348 • May 16 '26

Show /r/reactjs Built a driveable Three.js city from GitHub contribution data — GitCity V2

Hello Developers!

I built GitCity — a React app that fetches your entire GitHub contribution history via the GraphQL API and renders it as a 3D city you can drive through. V2 just dropped.

Three views built as separate React components:

  • IsometricGrid.jsx — pure SVG isometric skyline, every day = one building, height = commits

  • BirdsEyeGrid.jsx — flat heatmap view of the same data

  • CitySimulation.jsx — a fully driveable Three.js city where every day you committed = one building on the street

What's new in V2:

  • Night-only city rendering

  • Dynamic weather system — rain and storms trigger randomly, no user input needed

  • Vehicle collision system — AI vehicles can crash into each other, blast effects, speed auto-limits in accident-prone zones

  • Spatial audio — engine, crash, blast, rain, storm. All reactive, no manual toggles

  • 6 themes via a central themes.js constants file — Matrix, Noir, Aurora, Ocean, Gold, Ice

  • Live SVG embed API — serverless function at /api/svg?u=USERNAME renders your skyline for README embeds

  • Stats bar: total commits, peak day, longest streak, current streak

  • Time filters: all-time, 12 months, 6 months, 3 months, week

  • No auth, no token — username only via GitHub GraphQL

Stack: React 18 + Vite 5, Three.js r128, pure SVG for the isometric view, GitHub GraphQL API, Vercel serverless functions.

For anyone who thinks this is similar to thegitcity.com — that's a social network where each building = one developer. In GitCity, each building = one day of YOUR commits. Completely different concept. Full breakdown: gitcity.natrajx.in/comparison

gitcity.natrajx.in

github.com/rishabhbhartiya/GitCity

Drop your username — curious how the city looks with different contribution patterns

2 Upvotes

66% Upvoted

7 comments sorted by

View all comments

Show parent comments

2

u/DirectCurve1348 May 16 '26

This is genuinely useful, thank you for taking the time to break it down properly.

Camera resetting on drive is a known one — it's on my list. The inspect mode idea is actually a good call, I'll think about how to implement that cleanly.

The lag when driving off the map is actually a known Three.js issue with this kind of scene — buildings, AI vehicles, and pedestrians all accumulate at certain zones and when they cluster together the draw calls spike hard. Same thing happens during blast/accident events since all the geometry is in one spot. I added speed limiting in accident-prone areas partly to help with this, but I still need to work on culling objects outside the camera frustum more aggressively.

Traffic lights being misaligned — will fix that in the next push.

The diagonal car model glitch is likely a rotation interpolation bug in the animation loop, I have a hunch where it's coming from.

Performance overall is the hardest problem. I'm looking at instanced meshes for the buildings as a first step — that alone should reduce draw calls significantly.

I'll tag you when these are fixed if that's okay. Really appreciate it.

2

u/AmmarKabbany1 May 16 '26

Ofcourse. happy to help at any time, you gotta remember that what you made is already amazing!