Skillget

code-city

skill
Guvenlik Denetimi
Uyari
Health Uyari
  • License — License: MIT
  • Description — Repository has a description
  • Active repo — Last push 0 days ago
  • Low visibility — Only 6 GitHub stars
Code Uyari
  • network request — Outbound network request in app/github-api.js
Permissions Gecti
  • Permissions — No dangerous permissions requested
Purpose
This tool visualizes any public GitHub repository as a navigable 3D cityscape. Files become buildings, folders become districts, and commit history creates animated elements like fires and rockets. It is a 100% client-side web application with no backend requirements.

Security Assessment
Overall risk: Low. The project does not execute local shell commands, request dangerous system permissions, or contain hardcoded secrets. It strictly runs in the browser. The tool does make outbound network requests to the GitHub REST API to fetch public repository data (file trees, commits, contributors). It does not access your local filesystem, personal files, or sensitive data.

Quality Assessment
The codebase is released under the standard MIT license and is actively maintained. The project functions entirely via CDN dependencies, resulting in a zero-build, zero-npm-install footprint that makes the code straightforward to review. However, it has extremely low community visibility and trust validation, currently sitting at only 6 GitHub stars. Because it is a very new and unproven tool, you will not find much community feedback or third-party auditing for it yet.

Verdict
Safe to use. It provides a fun, client-side only visualization with low security risks, though its extremely low community adoption means you should review the code yourself if you plan to use it extensively.
SUMMARY

Your codebase as a living 3D city. Files become buildings, folders become districts, bugs become fires, deploys become rockets. Powered by Three.js.

README.md

Code City

License: MIT
Stars
Issues
Last commit

Turn any GitHub repo into a 3D city.

Paste a repo URL → watch it transform into a navigable 3D cityscape with buildings, districts, fires, and walking characters. 100% client-side, no backend, no signups.

Try it live →

How It Works

Code City
Files Buildings (height = lines of code)
Folders Districts with labels
Languages Building colors (blue = TypeScript, yellow = JS...)
Dependencies Roads connecting buildings
Bug-fix commits Fires on buildings
Recent changes Glowing buildings
Contributors Walking characters

Paste any public GitHub repo and the city builds itself using the GitHub API — no cloning, no backend, no API keys needed.

Quick Start

Use the website

Go to claude-city.vercel.app and paste a repo.

Run locally

git clone https://github.com/Manavarya09/code-city.git
cd claude-city
npx serve app

Open http://localhost:3000

Direct links

https://claude-city.vercel.app?repo=facebook/react
https://claude-city.vercel.app?repo=vercel/next.js

Controls

Action Control
Rotate Drag
Zoom Scroll
Pan Right-click drag
Inspect Hover building
Focus Click building
Reset Press R
Rocket 🚀 button

Tech Stack

  • Three.js — 3D rendering (CDN, zero build step)
  • GitHub REST API — Fetches file tree, contributors, languages, commits
  • Vercel — Hosting (static site)
  • Zero dependencies — No npm install, no build, no backend

Contributing

This project needs help! Here's what I want to build but can't do alone:

High Priority

  • Better building shapes — Not just boxes. Cylinders, L-shapes, pyramids for variety
  • Day/night toggle — Switch between sunset and midnight cyberpunk mode
  • Time travel slider — See how the city grew over commit history
  • Click building → open file — Link buildings to GitHub file URLs

Medium Priority

  • Performance for huge repos — Linux kernel, chromium (10K+ files)
  • Shareable screenshots — One-click export to PNG/video
  • Mobile support — Touch controls, responsive layout
  • Private repos — OAuth flow for GitHub token
  • Minimap — Small 2D overview in corner

Would Be Insane

  • Multiplayer — See other people's cursors flying around
  • VR mode — Walk through your codebase in WebXR
  • Sound — Lo-fi beats + ambient city sounds
  • Terrain — Hills and rivers based on code complexity
  • Weather — Rain when tests fail, sunshine when CI passes

How to Contribute

  1. Fork the repo
  2. Pick an issue or idea from above
  3. npx serve app to run locally
  4. Open a PR

No build step. No npm install. Just edit the JS files in app/ and refresh.

Architecture

app/
├── index.html      # Landing page + Three.js app entry
├── city.js         # Building generation, treemap layout
├── agents.js       # Walking character sprites
├── effects.js      # Fire, sparkles, rockets, atmosphere
├── controls.js     # Camera, UI overlay, tooltips
└── github-api.js   # GitHub API client (no backend needed)

Everything runs in the browser. The GitHub API is called directly from the client. No server, no database, no auth (for public repos).

Supported Input Formats

All of these work:

  • facebook/react
  • https://github.com/facebook/react
  • https://github.com/facebook/react.git
  • github.com/facebook/react/

Rate Limits

GitHub API allows 60 requests/hour without auth. For heavier usage, add a personal access token:

  1. Create token at github.com/settings/tokens
  2. Open browser console → localStorage.setItem('gh_token', 'your_token_here')
  3. Rate limit increases to 5000/hour

License

MIT — See LICENSE

See your code. Like never before.

Yorumlar (0)

Sonuc bulunamadi