Project structure

Top-level layout

front/
├── .github/workflows/   # CI deploy
├── bin/                 # Build scripts (sitemap, RSS, news)
├── config/              # CRA webpack/jest overrides
├── docs/                # Developer documentation (this site)
├── public/              # Static assets, locales, service worker
├── src/                 # Application source
├── serverless.yml       # AWS deploy config
└── package.json

src/ conventions

Directory Purpose
pages/ Top-level route shells. Skeleton.js is the app root; Welcome.js is the home page.
components/ Feature UI. One file or folder per feature. Large features get subfolders (e.g. GameMove/, Tournaments/, Lab/).
lib/ Shared non-UI logic: API helpers, game-move utilities, Lab builders, clipboard, colour helpers.
stores/ Zustand global store (index.js).
hooks/ Custom React hooks.
config/ Environment-specific endpoints (not to be confused with root config/ CRA overrides).
assets/ Static JSON bundled at build time (e.g. news.json).

Component organization

When to use lib/ vs components/

Put in lib/ Put in components/
Pure functions, no JSX React components
Shared between multiple features Feature-specific UI
API helpers, game logic Layout and interaction

Example: exploration tree logic is in lib/GameMove/exploration.js; the board is components/GameMove/Board.js.

Config vs environment

Static assets

Private packages

Game logic and rendering come from @abstractplay/gameslib and @abstractplay/renderer. Do not duplicate rules or render schema in the front repo.

Related