---
title: "Module 5 : Architecture SmartMaker"
weight: 480
description: "SmartMaker est un framework pour construire des Progressive Web Apps (PWA) connectées à Dolibarr. Il combine :"
category: "Formation"
type: "formation"
---

# 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](/training/module5-architecture-smartmaker/structure-projet) | Organisation des dossiers et fichiers |
| 2 | [Configuration](/training/module5-architecture-smartmaker/configuration) | Provider et appConfig.js |
| 3 | [Flux de données](/training/module5-architecture-smartmaker/flux-donnees) | 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 ->](/training/module5-architecture-smartmaker/structure-projet)