Naming Conventions (Frontend Standard)

Components

• React components: PascalCase
  • File: Button.tsx
  • Component: export function Button(...) { ... }
• Component folders: PascalCase per component (Button/, ConfirmModal/).

Hooks

• Hooks must start with use:
  • useAuth(), useBillingPlan()
• Files: useAuth.ts or useAuth.tsx (only if it renders JSX).

Features

• Feature folder names: kebab-case or snake_case is acceptable, but pick one per repo and be consistent.
  • Example: src/features/billing/

API and schemas

• Feature API entry file: api.ts
• Feature schemas file: schemas.ts
• Shared client wrapper: src/lib/apiClient.ts

Tests

• Component tests: ComponentName.test.tsx
• Hook tests: useThing.test.ts

Barrels (index.ts)

Use index.ts to define the public API of a folder (especially for src/components/...):

• Export only what consumers should import.
• Avoid “giant barrels” that re-export the entire app.