Skip to main content

Components Strategy

We differentiate between UI Primitives and Feature Components.

1. UI System (components/ui)​

We use ShadCN UI. These are "dumb" components that have no business logic.

  • Buttons, Inputs, Dialogs, Cards.
  • Do not modify these files unless you are changing the global design system.

2. Feature Components (components/dashboard, components/auth, features/*/components)​

These contain business logic handling. Domain-specific components live under features/<domain>/components/.

  • features/cameras/components/camera-card.tsx (CameraCard): Displays a camera stream and its status.
  • features/cameras/components/camera-alerts-panel.tsx, camera-events-timeline.tsx: Alert history and event timelines.
  • features/cameras/components/camera-form.tsx: Camera create/edit form (often used inside a modal).

Server vs Client Components​

  • Server Components (Default): Use for fetching data.
    • app/**/page.tsx, layout.tsx.
    • direct DB access or secure API calls.
  • Client Components: Use for interaction.
    • Forms and modals (e.g. camera-form, filter-dialog) that need useState.
    • Charts and real-time views (e.g. TrendLineChart, RealTimeMetrics) that need useEffect.