Quelle approche avez-vous utilisée lors de la construction de l'architecture de votre projet?

J'ai utilisé une approche basée sur les composants, en suivant les principes du design atomique. J'ai divisé le projet en petits composants réutilisables, regroupés par niveaux d'abstraction : atomes, molécules, organismes, modèles et pages.

• Atomes : éléments de base (boutons, entrées, icônes).
• Molécules : combinaisons d'atomes (champ de saisie avec bouton).
• Organismes : groupes de molécules et/ou d'atomes (en-tête, pied de page).
• Modèles : compositions d'organismes et de molécules qui définissent la structure de la page (mise en page).
• Pages : instances concrètes de modèles avec des données réelles.

Cela a permis d'obtenir :

• Une haute réutilisabilité du code
• Facilité de maintenance et de montée en charge
• Facilité de test des composants
• Une meilleure interaction entre designers et développeurs

J'ai utilisé React (ou Vue.js, selon le framework utilisé dans le projet), en gérant l'état via Redux (ou Vuex).

La structure des dossiers est organisée par composants, et non par type de fichier, ce qui améliore la recherche et la cohérence du code.

// Exemple de structure de dossiers
src/
  components/
    atoms/
      Button/
        Button.js
        Button.module.css
    molecules/
      InputWithButton/
        InputWithButton.js
        InputWithButton.module.css
    organisms/
      Header/
        Header.js
        Header.module.css
  containers/ // Pour les composants liés à la logique et aux données
    UserList/
      UserList.js
      UserList.module.css
  pages/
    HomePage/
      HomePage.js
      HomePage.module.css
  redux/ // Ou vuex
    actions/
    reducers/
    store.js
  utils/ // Fonctions auxiliaires
  api/ // Travail avec API