Architecture

Folder structure

korovany/
├── .github/workflows/     # CI/CD: deploy.yml (Cloudflare Pages), docs.yml (GitHub Pages)
├── assets/                # source binary assets, tracked via Git LFS (models, textures, audio)
├── docs/                  # this VitePress documentation site → GitHub Pages
│   ├── .vitepress/        # docs site config
│   ├── guide/             # getting-started, project rules, architecture
│   └── operations/        # deployment & credentials runbooks
├── public/                # static files served as-is at the web root
├── src/
│   ├── app/               # app shell & top-level composition (App.tsx)
│   ├── components/        # reusable React UI components
│   ├── scenes/            # Babylon.js scenes (MainScene.tsx)
│   ├── game/              # engine-agnostic game logic (systems, entities, rules)
│   ├── store/             # Redux Toolkit store + slices, typed hooks
│   ├── hooks/             # shared React hooks
│   ├── assets/            # assets imported & bundled by Vite
│   ├── styles/            # global styles
│   ├── types/             # shared TypeScript types
│   └── test/              # test setup (setup.ts)
├── AGENTS.md / CLAUDE.md  # rules for automated contributors
└── index.html             # Vite entry

Where new code goes

You are adding…	Put it in…
A Babylon scene/world	src/scenes/
Reusable UI (buttons, HUD)	src/components/
Game logic (no React/Babylon)	src/game/
Shared state	src/store/ (a new slice)
A 3D model / texture / sound	assets/ (tracked by Git LFS)
Documentation	docs/ (same change as the code)

Data flow

main.tsx mounts React inside a Redux <Provider>. UI in src/app and src/components reads state via the typed useAppSelector hook and dispatches actions via useAppDispatch (both from src/store). Babylon scenes in src/scenes own their render loop and can read/dispatch to the same store, so game systems and UI stay in sync through Redux.