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	Structure du projet	Organisation des dossiers et fichiers
2	Configuration	Provider et appConfig.js
3	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

Commencer : Structure du projet →