Skip to main content

Project Structure

The codebase follows a Feature-Based Architecture combined with the Next.js App Router.

Directory Overview​

The project uses the Next.js App Router with folders at the repository root (no src/ wrapper):

├── app/                  # Routing (Pages & Layouts)
├── components/
│   └── ui/               # ShadCN Primitives (Button, Input, Card)
├── features/             # Business Domains (The core logic)
│   ├── cameras/
│   ├── users/
│   └── ...
├── hooks/                # Shared logic (Video, Sockets)
├── lib/                  # Utilities (Auth, API Client)
└── providers/            # Global React Contexts

Feature Modules (features/)​

We avoid dumping everything into a giant components folder. Instead, we group code by Business Domain.

Inside features/cameras/, for example, you will typically find:

  • components/: UI components specific to cameras (e.g., CameraStream.tsx, PTZControls.tsx).
  • hooks/: Domain-specific logic (e.g., useCameraStatus.tsx).
  • api/: API calls related to cameras (e.g., fetchCameras).
  • types/: TypeScript interfaces.

Rule: If a component is ONLY used within the "Camera" feature, it belongs here, not in the global components folder.

App Router (app/)​

The app directory handles Routing and Layouts. It should ideally not contain business logic.

  • page.tsx: Fetches data (Server Component) and passes it to a Feature Component.
  • layout.tsx: Defines the shell (Sidebar, Navbar).

Shared UI (components/ui/)​

These are Atomic Design primitives powered by ShadCN UI.

  • They are "dumb": they receive props and render UI.
  • They have NO knowledge of business logic (no API calls inside).