Plant Vision Mobile Development Assistant
Expert guidance for developing Plant Vision Mobile - a Progressive Web App for industrial plant inspections with offline-first architecture.
Project Overview
Plant Vision Mobile is an offline-first PWA built with React 18, TypeScript, and Vite. It enables industrial plant inspections with camera integration, 3D visualization, and robust offline capabilities backed by IndexedDB.
Instructions
When working with this codebase, follow these guidelines:
1. Development Workflow
**Starting Development:**
Use `npm run dev` to start the Vite dev server with HMR at http://localhost:5173Run `npm run lint` for code quality checksUse `npm run build` for production builds (TypeScript + Vite)Preview builds with `npm run preview`**Path Aliases:**
Use `@/` prefix for imports mapping to `src/` directory (e.g., `import { db } from '@/lib/db'`)2. Architecture Principles
**Offline-First Data Flow (Critical):**
1. ALL data operations MUST write to IndexedDB first via `src/lib/db.ts`
2. Changes are tracked in the `syncQueue` table for eventual consistency
3. `SyncService` handles bidirectional sync when connectivity is restored
4. Conflict resolution uses last-write-wins strategy based on timestamps
**State Management:**
Use Zustand store in `src/stores/useAppStore.ts` for global app state (auth, settings, sync status)Local state persists to localStorage via Zustand middlewareDatabase queries use Dexie reactive hooks for automatic UI updates3. Component Development
**UI Components:**
Base components from shadcn/ui located in `src/components/ui/` (Button, Card, etc.)Page-level components in `src/pages/` with lazy loadingUse custom retry mechanism from `src/utils/lazyLoading.tsx` for route componentsImplement error boundaries for graceful error handling**Navigation:**
Routes: Dashboard, Scanner, Viewer3D, Inspections, SettingsBottom navigation implemented in `src/components/Navigation.tsx`Use React Router v6 browser routerDynamic default view based on user settings4. PWA Implementation
**Service Worker:**
Auto-update strategy for new versionsStatic assets cached for offline useConfiguration in `vite.config.ts` with PWA plugin**Install Prompt:**
Handled by `src/components/PWAInstallPrompt.tsx`Workbox configured in Vite config**Required Considerations:**
Camera/microphone permissions for inspection featuresSecurity headers (HSTS, X-Frame-Options, CSP) configured in Vite dev server5. Data Models
**Inspection Entity (`src/lib/db.ts`):**
Use UUIDs for cross-device sync compatibilityStore readings (temperature, pressure, flow, vibration)Photo attachments must be base64 encodedInclude sync status tracking fields**Sync Queue:**
Track entity UUID, operation type (create/update/delete), and data snapshotProcess in batches of 50 items via `SyncService`6. Sync Service Operations
When working with `src/services/syncService.ts`:
Implement bidirectional sync with retry logicUse exponential backoff on failuresBatch processing (50 items per batch)Resolve conflicts via timestamp comparisonUpdate sync status in IndexedDB after successful sync7. Performance Optimization
**Code Splitting:**
Implement route-based code splitting with retry logicUse manual vendor chunking configured in Vite**Large Data Sets:**
Use virtual scrolling from `src/components/VirtualList.tsx` for large listsLeverage performance monitoring hooks in `src/hooks/`8. 3D Visualization
When working with `src/pages/Viewer3D.tsx`:
Uses Three.js with React Three FiberInteractive 3D models for plant inspection visualizationConsider performance implications for mobile devices9. Analytics & Monitoring
**Tracking:**
Amplitude for analytics via `src/services/analyticsService.ts`Sentry for error monitoring (integrated in `App.tsx`)Always instrument new features with appropriate analytics events10. Code Quality Standards
**TypeScript:**
Maintain strict type safetyDefine interfaces for all data modelsUse TypeScript compile before production builds**Linting:**
Run ESLint before commitsFollow established code patterns in the codebaseCommon Tasks
Adding a New Inspection Field
1. Update Inspection interface in `src/lib/db.ts`
2. Add field to IndexedDB schema (may require migration)
3. Update inspection form components
4. Ensure field syncs correctly in `SyncService`
5. Add to sync queue tracking
Implementing a New Page
1. Create page component in `src/pages/`
2. Implement lazy loading with retry mechanism
3. Add route to router configuration
4. Add navigation entry if user-facing
5. Implement error boundary
Modifying Sync Behavior
1. Update `src/services/syncService.ts`
2. Test offline → online scenarios
3. Verify conflict resolution logic
4. Ensure sync queue updates correctly
5. Test with concurrent edits from multiple devices
Important Files
`src/lib/db.ts` - IndexedDB schema and Dexie configuration`src/stores/useAppStore.ts` - Global state management`src/services/syncService.ts` - Offline sync logic`vite.config.ts` - Build configuration, PWA manifest, path aliases`src/components/Navigation.tsx` - Main navigation`src/pages/Viewer3D.tsx` - 3D visualization`src/utils/lazyLoading.tsx` - Route loading with retrySecurity Considerations
Respect configured CSP headersHandle camera/microphone permissions properlyValidate all data before IndexedDB writesSanitize user inputs in inspection formsUse HTTPS in production (enforced by HSTS)