Architecture Frontend

Le tableau de bord FirstBreath Showcase est construit avec des technologies web modernes pour offrir une expérience utilisateur réactive et hautement interactive.

Stack Technologique

• Framework : Next.js 14 (App Router)
• Langage : TypeScript
• Style : Tailwind CSS
• Bibliothèque UI : shadcn/ui (Radix Primitives)
• Icônes : Lucide React
• Graphiques : Recharts

Structure du Projet

Nous suivons les conventions du Next.js App Router :

app/
├── (auth)/             # Routes d'authentification (connexion, inscription) - Layout groupé
├── (dashboard)/        # Routes protégées (requiert une connexion)
│   ├── dashboard/      # Vue d'ensemble principale
│   ├── cameras/        # Gestion des caméras
│   └── layout.tsx      # Coquille du Dashboard (Barre latérale + Barre de navigation)
├── api/                # Routes API Next.js (Proxy vers le Backend)
├── layout.tsx          # Layout racine (Providers : Thème, Auth)
└── page.tsx            # Page d'accueil

Concepts Clés

Composants Serveur vs Client

Nous privilégions les Composants Serveur pour la récupération de données afin de réduire la taille du bundle client et d'améliorer le SEO.

• Composants Serveur (page.tsx) : Récupèrent les données directement depuis l'API Backend ou la Base de Données.
• Composants Client ("use client") : Utilisés uniquement pour l'interactivité (Formulaires, Graphiques, Boutons).

Système de Design

Nous ne réinventons pas la roue. Nous utilisons ShadCN UI qui fournit des composants accessibles prêts à l'emploi. Tous les composants se trouvent dans components/ui.

Règle : Ne modifiez pas components/ui directement sauf si vous personnalisez le thème global. Utilisez components/feature-name pour les composants spécifiques au métier.