Frontend Contribution Guidelines
The frontend is an Nx-managed monorepo under frontend/ with two React apps:
| App | Location | Purpose | Development Port |
|---|---|---|---|
| Thunder Gate | frontend/apps/thunder-gate/ | Login, registration, recovery UI | 5190 |
| Thunder Develop | frontend/apps/thunder-develop/ | Admin console | 5191 |
File Naming
- TypeScript files (
.ts): camelCase (e.g.,useCreateApplication.ts) - React components (
.tsx): PascalCase (e.g.,MenuButton.tsx)
Feature Package Structure
my-feature/
├── api/ # API hooks (e.g., useGetUsers.ts)
├── components/ # React components
├── config/ # Feature configuration
├── constants/ # Query keys and constants
├── contexts/ # React context providers
├── hooks/ # Custom React hooks
├── models/ # TypeScript interfaces
├── pages/ # Page-level components
└── utils/ # Utility functions
Scaffolding Tool
Thunder includes a CLI scaffolding tool (@thunder/create) that generates production-ready feature packages. See the Scaffolding Tool guide for details.
Testing
| Purpose | Command |
|---|---|
| All frontend unit tests | cd frontend && pnpm test |
| Lint frontend | make lint_frontend |
| E2E tests | cd tests/e2e && npm ci && npx playwright test |
| E2E (Chromium only) | cd tests/e2e && npx playwright test --project=chromium |
| E2E (accessibility) | cd tests/e2e && npx playwright test --grep @accessibility |
| E2E (headed/visible) | cd tests/e2e && npx playwright test --headed |
| E2E (debug mode) | cd tests/e2e && npx playwright test --debug |
