Appendix: file inventory

You can check the public workshop repo directly, since it stays small:

vibe-coding/
├── README.md
├── snake-chatgpt/
│   ├── package.json
│   ├── vite.config.js
│   └── src/
│       ├── App.jsx
│       ├── App.css
│       ├── index.css
│       └── main.jsx
└── snake-claude-code/
    ├── package.json
    ├── vite.config.js
    └── src/
        ├── App.jsx
        ├── App.css
        ├── index.css
        ├── main.jsx
        └── components/
            └── SnakeGame.jsx

The two apps share the same Vite base, both built on React 19 and Vite 7. They also use @vitejs/plugin-react, Tailwind 4, and the Tailwind Vite plugin.

ChatGPT app landmarks

Start with snake-chatgpt/src/App.jsx, a short file that keeps the whole game in one component.

const BOARD_SIZE = 20;
const INITIAL_SNAKE = [{ x: 8, y: 8 }];
const INITIAL_DIRECTION = { x: 1, y: 0 };
const SPEED = 200;

The core state is snake, food, direction, and gameOver. The game loop runs with setInterval(moveSnake, SPEED), and the board renders by mapping over 400 cells.

Check the CSS files too. src/index.css imports Tailwind, but src/App.css still contains the default Vite starter styles, which is common when you move generated code into a starter project.

Claude Code app landmarks

Look at snake-claude-code/src/App.jsx next.

It imports the game component instead of holding the game logic directly:

import SnakeGame from './components/SnakeGame'

The detailed behavior is in src/components/SnakeGame.jsx.

The component adds state for score, game start, and mode:

const [score, setScore] = useState(0)
const [gameStarted, setGameStarted] = useState(false)
const [mode, setMode] = useState('walls')

The mode button is disabled once the game starts:

<button
  className="px-3 py-1 bg-gray-700 text-white rounded mb-2 disabled:opacity-50"
  onClick={() => setMode(mode === 'walls' ? 'pass-through' : 'walls')}
  disabled={gameStarted}
>
  Switch to {mode === 'walls' ? 'Pass-Through' : 'Walls'} Mode
</button>

That makes for a small but useful product decision: it avoids changing collision rules while a game is already in progress.

Commands for both apps

Run these from either app folder:

npm install
npm run dev
npm run lint
npm run build

Use the same commands when you compare another tool. Keep the target app and the checks stable so you get a cleaner read on the tool instead of on your changing process.