Files
motovaultpro/frontend
Eric Gullickson 715250d50d Add error handling for Google Maps DOM conflicts with React
The Google Maps API and React both manipulate the DOM, which can cause
conflicts where Google Maps removes nodes that React still has references
to. Add graceful error handling:

1. Remove async flag from Google Maps script - use defer only
2. Add try-catch in marker update useEffect to ignore removeChild errors
3. Add cleanup function to properly tear down markers on unmount
4. Log warnings instead of crashing when DOM conflicts occur

This allows the app to continue functioning even when there are minor
DOM reconciliation issues between Google Maps and React.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-04 19:37:27 -06:00
..
2025-11-04 18:46:46 -06:00
2025-11-04 18:46:46 -06:00
2025-11-04 18:46:46 -06:00
2025-09-17 16:09:15 -05:00
2025-08-09 12:47:15 -05:00
2025-08-09 12:47:15 -05:00
2025-11-04 18:46:46 -06:00
2025-08-09 12:47:15 -05:00
2025-11-04 18:46:46 -06:00
2025-09-17 16:09:15 -05:00
2025-09-17 16:09:15 -05:00
2025-11-03 14:06:54 -06:00
2025-08-09 12:47:15 -05:00
2025-11-04 18:38:06 -06:00
2025-09-17 16:09:15 -05:00
2025-08-09 17:45:54 -05:00
2025-09-28 20:35:46 -05:00
2025-08-09 12:47:15 -05: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/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.