Mav-Mobile-UI/.github/copilot-instructions.md

Copilot Instructions for in-car-system-fe

Project Overview

• Type: React + TypeScript SPA using Vite
• Purpose: In-car system frontend for camera management, sighting history, and system settings
• Key Directories:
  • src/components/: UI components grouped by feature (Camera, Sighting, Settings, etc.)
  • src/context/: React context for global state (e.g., AlertHit, NPEDUser, SightingFeed)
  • src/hooks/: Custom React hooks for data fetching, config, and UI logic
  • src/pages/: Top-level route views (Dashboard, Camera, Session, SystemSettings)
  • src/types/: Shared TypeScript types
  • src/utils/: Utility functions and config helpers

Architecture & Patterns

• Component Structure:
  • Feature-based folders (e.g., CameraSettings, SightingOverview)
  • Components are mostly functional, using hooks and context for state
• State Management:
  • Uses React Context for cross-component state (see src/context/providers/)
  • Reducers in src/context/reducers/ for complex state updates
• Data Flow:
  • Data is fetched and managed via custom hooks (see src/hooks/)
  • Context providers wrap the app in main.tsx
• Styling:
  • CSS modules (e.g., App.css, index.css)
  • No CSS-in-JS or styled-components

Developer Workflows

• Install: npm install
• Start Dev Server: npm run dev
• Build: npm run build
• Preview Build: npm run preview
• Lint: npm run lint (uses ESLint, see eslint.config.js)
• Type Check: tsc --noEmit
• Test: No test framework configured by default

Project Conventions

• TypeScript:
  • All components and hooks are typed; shared types in src/types/types.ts
• Component Naming:
  • Use PascalCase for components and folders
  • Suffix with Container, Card, or Modal for UI roles
• Assets:
  • Images in public/ or src/assets/
  • Sounds in src/assets/sounds/
• No Redux, MobX, or external state libraries
• No backend API code in this repo

Integration Points

• External:
  • No direct backend integration code; data is assumed to come from context/hooks
  • Sound assets for UI feedback in src/assets/sounds/ui/

Examples

• Add a new camera setting:
  • Create a new component in src/components/CameraSettings/
  • Add state via context or a custom hook if needed
• Add a new page:
  • Add a file to src/pages/ and update routing in the main app (see main.tsx)

References

• See README.md for Vite/ESLint setup details
• See src/context/ and src/hooks/ for app-specific state/data patterns

---

If any conventions or workflows are unclear, please ask for clarification or examples from the codebase.