motovaultpro/frontend

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.