Chanjoong (CJ) Kim

Seoul

All projects

Atlas. A GitHub repo, drawn as a city.

When
May 2026 to present
Event
IBM Bob Hackathon
Stack
TypeScript, D3.js, Cloudflare Pages Functions
Atlas's home page: the line "Read any codebase as a city." beside an isometric city of coloured buildings.
atlascity.dev as it is now.

Why

Getting the shape of unfamiliar code always took me a long time, and a file tree is only a list of names: it doesn't show where the core is. I wanted something you can read at a glance, like a city map.

How

Give it a public GitHub repo: folders become districts, files become buildings sized by code volume, and imports become roads, with no model anywhere in the pipeline. The server works out the layout in advance (300 ticks of a force simulation), so a given commit always draws the same map. To finish the core inside the hackathon's 48 hours, imports were matched with regular expressions alone.

An isometric city on dark ground: coloured buildings grouped into labelled districts, with a legend down the left.
drizzle-⁠orm as Atlas draws it now: one district per package.

Outcome

I entered solo, and Atlas took second place of 503 projects (5,628 participants, 1,672 teams; a $3,000 prize). The judged build, tagged v1.0-hackathon, was a flat map with one theme and no roads yet. It has since grown into atlascity.dev: an isometric city with two themes and its roads back, and it reads a repo without any credentials.

An isometric city with one building selected: a card beside it gives the file's lines, language and imports, and a panel on the right lists what it imports and what imports it.
atlascity.dev now: hono, with one file selected.