Files
motovaultpro/frontend
Eric Gullickson 850f713310
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 3m21s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 51s
Deploy to Staging / Verify Staging (pull_request) Successful in 9s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 8s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
fix: prevent URL sync effects from stripping Auth0 callback params (refs #188)
Root cause: React fires child effects before parent effects. App's URL
sync effect called history.replaceState() on /callback, stripping the
?code= and &state= query params before Auth0Provider's useEffect could
read them via hasAuthParams(). The SDK fell through to checkSession()
instead of handleRedirectCallback(), silently failing with no error.

Guard both URL sync effects to skip on /callback, /signup, /verify-email.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-15 09:24:56 -06:00
..
2026-02-05 21:49:35 -06:00

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.