Frontend

Architecture de l'application

L'application frontend est construite avec Nuxt 4, utilisant la Composition API et les modules Nuxt pour une architecture modulaire et maintenable.

flowchart TD
    A[Pages] --> B[Layouts]
    A --> C[Composants]
    C --> D[Composables]
    D --> E[Services API]
    E --> F[Backend]
    B --> A
    C --> |Utilise| G[Store Pinia]
    G --> |Persistance| H[LocalStorage/API]

Structure des dossiers

front/sources/
├── app/                    # Dossier principal de l'application
│   ├── components/         # Composants réutilisables
│   ├── composables/        # Logique réutilisable
│   ├── layouts/            # Mises en page globales
│   ├── pages/              # Routes de l'application
│   └── stores/             # Gestion d'état avec Pinia
├── public/                # Fichiers statiques
└── nuxt.config.ts         # Configuration Nuxt

Fonctionnalités clés

1. Système de routage

• Gestion des routes avec Nuxt file-based routing
• Middleware pour l'authentification et les autorisations
• Navigation guard personnalisée

2. Gestion d'état

• Utilisation de Pinia pour la gestion d'état globale
• Stores modulaires par domaine fonctionnel
• Persistance des données utilisateur

3. UI/UX

• Composants Nuxt UI pour une interface cohérente
• Thème personnalisé avec variables CSS
• Design responsive et accessible

4. Sécurité

• Gestion des tokens JWT
• Protection des routes
• Validation des entrées avec Zod

Bonnes pratiques

Structure des composants

<template>
  <!-- Template avec une seule racine -->
  <div class="component">
    <!-- Contenu -->
  </div>
</template>

<script setup lang="ts">
// Imports en haut
import { ref, onMounted } from 'vue'

// Props avec validation TypeScript
const props = defineProps({
  title: {
    type: String,
    required: true
  }
})

// État réactif
const count = ref(0)

// Méthodes
function increment() {
  count.value++
}

// Hooks de cycle de vie
onMounted(() => {
  // Initialisation
})
</script>

<style scoped>
/* Styles avec scoping */
.component {
  /* styles */
}
</style>

Gestion des erreurs

• Utilisation de try/catch pour les appels API
• Affichage d'erreurs utilisateur claires
• Journalisation des erreurs côté client

Performance

• Chargement paresseux des composants
• Mise en cache des données fréquemment utilisées
• Optimisation des images avec Nuxt Image

Workflow de développement

1. Créer un nouveau composant
   • Placer le composant dans le dossier approprié
   • Suivre les conventions de nommage (PascalCase)
   • Documenter les props et les événements
2. Tester le composant
   • Écrire des tests unitaires
   • Tester les états d'erreur
   • Vérifier l'accessibilité
3. Revue de code
   • Vérifier la conformité avec les standards
   • S'assurer de la couverture de tests
   • Valider l'accessibilité

Outils de développement

• Débogage : Vue DevTools, Redux DevTools
• Tests : Vitest, Testing Library
• Linting : ESLint avec configuration personnalisée
• Formatage : Prettier avec règles de style

Pages de documentation

Pages

• Pages
  • Page de contrat
  • Page de refus de souscription
  • Gestion des statuts et actions

Composants

• Composants
  • Composants réutilisables
  • Composants de layout
  • Composants métier

Composables

• Composables
  • useAuth - Authentification
  • useForm - Formulaire de contrat
  • useTroubleshootingForm - Formulaire de dépannage
  • useParameter - Paramètres système

Outils

• Sentry
  • Configuration et monitoring des erreurs

Prochaines étapes

• Découvrir les pages de gestion de contrat
• Explorer le formulaire de dépannage et le formulaire de contrat
• Découvrir les composables partagés
• Comprendre le système d'authentification