# Module 5 : Architecture SmartMaker

> Ce module présente l'architecture globale de SmartMaker : comment les différentes couches s'articulent, de l'interface React jusqu'au backend Dolibarr.


## Prérequis

- Modules 1 à 4 complétés
- Comprendre les concepts React (composants, hooks, Redux)
- Connaissance de base de Dolibarr


## Vue d'ensemble

SmartMaker est un framework pour construire des Progressive Web Apps (PWA) connectées à Dolibarr. Il combine :

- **Frontend React** : Interface utilisateur moderne
- **SmartCommon** : Bibliothèque de composants et hooks
- **SmartAuth** : Authentification JWT
- **Backend PHP** : API REST intégrée à Dolibarr


## Stack technique

^ Couche ^ Technologie ^ Usage ^
| Framework | React 19 | Composants UI |
| Build | Vite 6 | Bundling et dev server |
| CSS | TailwindCSS 4 | Styles utilitaires |
| State | Redux Toolkit 2 | État global |
| HTTP | ky | Requêtes API avec JWT |
| Validation | Zod 4 | Schémas de validation |
| Router | React Router 7 | Navigation |
| i18n | i18next | Traductions |
| DB locale | Dexie | IndexedDB wrapper |
| Animation | Framer Motion | Transitions de pages |


## Chapitres

^ # ^ Chapitre ^ Contenu ^
| 1 | [[:15_training:module5-architecture-smartmaker:structure-projet|Structure du projet]] | Organisation des dossiers et fichiers |
| 2 | [[:15_training:module5-architecture-smartmaker:configuration|Configuration]] | Provider et appConfig.js |
| 3 | [[:15_training:module5-architecture-smartmaker:flux-donnees|Flux de données]] | Du clic utilisateur au rendu |


## Objectifs du module

À la fin de ce module, vous comprendrez :

- Comment est organisé un projet SmartMaker
- Le rôle de chaque dossier et fichier
- Comment configurer l'application via appConfig.js
- Le flux de données complet (UI → API → Dolibarr → UI)


## Schéma global

```
┌─────────────────────────────────────────────────────────────┐
│                     NAVIGATEUR                               │
│  ┌─────────────────────────────────────────────────────┐    │
│  │                   React App                          │    │
│  │  ┌───────────┐  ┌────────────┐  ┌───────────────┐   │    │
│  │  │ Components│  │ SmartCommon│  │ Redux Store   │   │    │
│  │  │ (Pages)   │←→│ (Hooks)    │←→│ (Global State)│   │    │
│  │  └───────────┘  └──────┬─────┘  └───────────────┘   │    │
│  │                        │                             │    │
│  │                   useApi()                           │    │
│  └────────────────────────┼─────────────────────────────┘    │
│                           │ JWT Auth                          │
└───────────────────────────┼─────────────────────────────────┘
                            │ HTTPS
┌───────────────────────────┼─────────────────────────────────┐
│                     SERVEUR                                  │
│  ┌────────────────────────┼─────────────────────────────┐   │
│  │                   pwa/api.php                         │   │
│  │  ┌─────────────────────▼───────────────────────┐     │   │
│  │  │              SmartAuth JWT                   │     │   │
│  │  └─────────────────────┬───────────────────────┘     │   │
│  │  ┌─────────────────────▼───────────────────────┐     │   │
│  │  │         Controllers + Mappers               │     │   │
│  │  └─────────────────────┬───────────────────────┘     │   │
│  └────────────────────────┼─────────────────────────────┘   │
│                           │                                  │
│  ┌────────────────────────▼─────────────────────────────┐   │
│  │                    DOLIBARR                           │   │
│  │              (Base de données + Objets)               │   │
│  └──────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘
```


## Liens avec les autres modules

^ Module ^ Ce qu'il apporte ici ^
| Module 6 | Composants SmartCommon (UI) |
| Module 7 | Hooks SmartCommon (logique) |
| Module 8 | Backend API (PHP) |
| Module 9 | Intégration complète |


[[:15_training:module5-architecture-smartmaker:structure-projet|Commencer : Structure du projet →]]