Frontend project conventions, development commands, directory rules, git workflows, and environment setup for the opti.node React frontend
app/components/ with co-located stories and testsapi.ts with automatic camelCase/snake_case conversionSite enumFrom frontend/ directory (your working directory):
npm run storybook # Storybook server
npm run test:storybook # All storybook tests
npm run test:unit # Unit tests only
npx vitest run --project=storybook --reporter=tree app/components/Path/To/Component.stories.tsx
npx vitest run --project=storybook --reporter=tree app/components/Path/To/Component.stories.tsx -t "^Exact Story Name$"
Some commands must run from the project root (parent of frontend/):
just frontend-server # React dev server (port 3000)
just frontend-test # Frontend tests
just frontend-build-ts-types # Generate TS types from OpenAPI (requires api_schema/)
| Directory | Commands |
|---|---|
frontend/ (here) | npm, npx vitest, storybook |
| Project root (parent) | just commands |
Common mistakes: Running npm/npx from project root (use just frontend-* instead), running just from frontend/ (won't be found).
Always compare branches against develop (staging), not main:
git diff develop...HEAD
git log develop..HEAD
direnv for automatic env variable loading.env files for local development