Inspiration
Contribution graphs make developer work visible, but they rarely make it feel shared. Many activity dashboards also turn healthy motivation into pressure. Chip City explores a gentler metaphor: each developer has a persistent neighborhood, recent activity powers its atmosphere, and time away never destroys what was built.
What it does
Chip City turns capped public GitHub activity into district state, streaks, credits, light, fog, and visual growth. Developers and guests can explore a shared isometric city, visit neighborhoods, give kudos, preview project READMEs, see realtime presence, and customize a claimed district.
The same community can be explored through five visual worlds, with the deep-space circuit-board city as the primary experience. The main judge flow is available in both English and Chinese.
How we built it
The browser combines React, TypeScript, Zustand, and a custom Canvas2D renderer with deterministic world composition. Fastify provides the API, Prisma persists the contest dataset in SQLite, Socket.IO synchronizes presence and city events, and Undici reads GitHub's public endpoints. The production build serves the app and API from one HTTPS origin.
Codex was used as an implementation and review partner across repository migration, localization, security hardening, testing, deployment packaging, and competition-readiness work. A representative cross-layer task carried one EN/CN preference through React components, Canvas2D labels, request headers, localized API errors, README fallback content, and bilingual persisted realtime events. Human decisions shaped the non-punitive activity model, the hero-world focus, and the restricted public judge sandbox.
Challenges
- Keeping a large isometric city responsive while preserving depth ordering, animation, and interaction.
- Making deterministic generated districts coexist with persisted player construction.
- Turning public GitHub activity into capped, idempotent credits instead of an exploitable repeated total.
- Localizing both normal DOM UI and text drawn inside the canvas renderer.
- Narrowing a feature-rich prototype into a coherent judge path.
Accomplishments
- A working full-stack multiplayer community game, not a static visualization.
- Persistent, non-punitive activity state with realtime visits, kudos, and creation.
- A reproducible pixel-art generation and validation pipeline.
- EN/CN parity across the main judge flow.
- Signed sessions, private realtime message rooms, server-side district authorization, CI, and isolated API tests for the public-demo path.
What we learned
Generative tools are most valuable when paired with explicit constraints and verification. Visual consistency came from fixed density, deterministic metadata, and programmatic post-processing. Codex was most effective when broad changes were grounded in tests, source inspection, and clear human product decisions.
What's next
Move to a managed production database, add GitHub OAuth, improve keyboard and small-screen accessibility, run developer usability studies, and explore privacy-conscious community goals that emphasize reciprocity over rankings.
Judge path
- Open the live demo and choose EN or 中文.
- Enter as a guest; no account is required.
- Select a district to inspect activity state, visit it, and open its repository preview.
- Enter a new callsign to claim an unused district and place a building in the public sandbox.
Built With
- canvas2d
- fastify
- gpt-5.6
- openai-codex
- pixellab
- prisma
- react
- socket.io
- sqlite
- typescript
- vite
- zustand