Aller au contenu principal

Structure du Projet

La base de code suit une Architecture Basée sur les Fonctionnalités combinée avec le Next.js App Router.

Aperçu des Dossiers​

Le projet utilise le Next.js App Router avec les dossiers à la racine du dépôt (pas de wrapper src/) :

├── app/                  # Routing (Pages & Layouts)
├── components/
│   └── ui/               # Primitives ShadCN (Bouton, Input, Carte)
├── features/             # Domaines Métier (La logique coeur)
│   ├── cameras/
│   ├── users/
│   └── ...
├── hooks/                # Logique partagée (Vidéo, Sockets)
├── lib/                  # Utilitaires (Auth, Client API)
└── providers/            # Contextes React Globaux

Modules de Fonctionnalité (features/)​

Nous évitons de tout mettre dans un dossier components géant. Au lieu de cela, nous groupons le code par Domaine Métier.

Dans features/cameras/, par exemple, vous trouverez typiquement :

  • components/ : Composants UI spécifiques aux caméras (ex: CameraStream.tsx, PTZControls.tsx).
  • hooks/ : Logique spécifique au domaine (ex: useCameraStatus.tsx).
  • api/ : Appels API liés aux caméras (ex: fetchCameras).
  • types/ : Interfaces TypeScript.

Règle : Si un composant est UNIQUEMENT utilisé au sein de la fonctionnalité "Caméra", il appartient ici, pas dans le dossier components global.

App Router (app/)​

Le dossier app gère le Routing et les Layouts. Il ne devrait idéalement pas contenir de logique métier.

  • page.tsx : Récupère les données (Server Component) et les passe à un Composant de Feature.
  • layout.tsx : Définit la coquille (Sidebar, Navbar).

UI Partagée (components/ui/)​

Ce sont des primitives Atomic Design propulsées par ShadCN UI.

  • Ils sont "bêtes" : ils reçoivent des props et affichent l'UI.
  • Ils n'ont AUCUNE connaissance de la logique métier (pas d'appels API à l'intérieur).