325cf08df0
Create shared getVehicleLabel/getVehicleSubtitle in core/utils with VehicleLike interface. Replace all direct year/make/model concatenation across 17 consumer files to prevent null values in vehicle names. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
36 lines
1.5 KiB
Markdown
36 lines
1.5 KiB
Markdown
# Frontend Quickload
|
|
|
|
## Overview
|
|
- Tech: React 18, Vite, TypeScript, MUI, Tailwind, React Query, Zustand.
|
|
- Auth: Auth0 via `src/core/auth/Auth0Provider.tsx`.
|
|
- Data: API client in `src/core/api/client.ts` with React Query config.
|
|
|
|
## Commands (containers)
|
|
- Build: `make rebuild`
|
|
- Logs: `make logs-frontend`
|
|
|
|
## Structure
|
|
- `src/App.tsx`, `src/main.tsx` — app entry.
|
|
- `src/features/*` — feature pages/components/hooks.
|
|
- `src/core/*` — auth, api, store, hooks, query config, utils.
|
|
- `src/core/utils/vehicleDisplay.ts` — shared vehicle display helpers: `getVehicleLabel()` (display name with fallback chain) and `getVehicleSubtitle()` (Year Make Model formatting).
|
|
- `src/shared-minimal/*` — shared UI components and theme.
|
|
|
|
## Mobile + Desktop (required)
|
|
- Layouts responsive by default; validate on small/large viewports.
|
|
- Verify Suspense fallbacks and navigation flows on both form factors.
|
|
- Test key screens: Vehicles, Fuel Logs, Documents, Settings.
|
|
- Ensure touch interactions and keyboard navigation work equivalently.
|
|
|
|
## Testing
|
|
- Jest config: `frontend/jest.config.ts` (jsdom).
|
|
- Setup: `frontend/setupTests.ts` (Testing Library).
|
|
- Run: `docker compose exec mvp-frontend npm test` (from project root, containerized).
|
|
- Watch mode: `docker compose exec mvp-frontend npm run test:watch`.
|
|
|
|
## Patterns
|
|
- State: co-locate feature state in `src/core/store` (Zustand) and React Query for server state.
|
|
- Forms: `react-hook-form` + Zod resolvers.
|
|
- UI: MUI components; Tailwind for utility styling.
|
|
|