---
source_hash: "07ea3eb5"
title: "Module 5: SmartMaker Architecture"
weight: 480
description: "SmartMaker is a framework for building Progressive Web Apps (PWA) connected to Dolibarr. It combines:"
category: "Training"
type: "training"
---

# Module 5: SmartMaker Architecture

> This module presents the overall architecture of SmartMaker: how the different layers articulate, from the React interface to the Dolibarr backend.

## Prerequisites

- Modules 1 to 4 completed
- Understanding React concepts (components, hooks, Redux)
- Basic knowledge of Dolibarr

## Overview

SmartMaker is a framework for building Progressive Web Apps (PWA) connected to Dolibarr. It combines:

- **React Frontend**: Modern user interface
- **SmartCommon**: Library of components and hooks
- **SmartAuth**: JWT authentication
- **PHP Backend**: REST API integrated with Dolibarr

## Technical Stack

| Layer | Technology | Usage |
| --- | --- | --- |
| Framework | React 19 | UI components |
| Build | Vite 6 | Bundling and dev server |
| CSS | TailwindCSS 4 | Utility styles |
| State | Redux Toolkit 2 | Global state |
| HTTP | ky | API requests with JWT |
| Validation | Zod 4 | Validation schemas |
| Router | React Router 7 | Navigation |
| i18n | i18next | Translations |
| Local DB | Dexie | IndexedDB wrapper |
| Animation | Framer Motion | Page transitions |

## Chapters

| # | Chapter | Content | |
| --- | --- | --- | --- |
| 1 | [Project Structure](/training/module5-architecture-smartmaker/structure-projet) | Organization of folders and files |
| 2 | [Configuration](/training/module5-architecture-smartmaker/configuration) | Provider and appConfig.js |
| 3 | [Data Flow](/training/module5-architecture-smartmaker/flux-donnees) | From user click to rendering |

## Module Objectives

By the end of this module, you will understand:

- How a SmartMaker project is organized
- The role of each folder and file
- How to configure the application via appConfig.js
- The complete data flow (UI -> API -> Dolibarr -> UI)

## Global Schema

```
┌─────────────────────────────────────────────────────────────┐
│                     BROWSER                               │
│  ┌─────────────────────────────────────────────────────┐    │
│  │                   React App                          │    │
│  │  ┌───────────┐  ┌────────────┐  ┌───────────────┐   │    │
│  │  │ Components│  │ SmartCommon│  │ Redux Store   │   │    │
│  │  │ (Pages)   │<->│ (Hooks)    │<->│ (Global State)│   │    │
│  │  └───────────┘  └──────┬─────┘  └───────────────┘   │    │
│  │                        │                             │    │
│  │                   useApi()                           │    │
│  └────────────────────────┼─────────────────────────────┘    │
│                           │ JWT Auth                          │
└───────────────────────────┼─────────────────────────────────┘
                            │ HTTPS
┌───────────────────────────┼─────────────────────────────────┐
│                     SERVER                                  │
│  ┌────────────────────────┼─────────────────────────────┐   │
│  │                   pwa/api.php                         │   │
│  │  ┌─────────────────────▼───────────────────────┐     │   │
│  │  │              SmartAuth JWT                   │     │   │
│  │  └─────────────────────┬───────────────────────┘     │   │
│  │  ┌─────────────────────▼───────────────────────┐     │   │
│  │  │         Controllers + Mappers               │     │   │
│  │  └─────────────────────┬───────────────────────┘     │   │
│  └────────────────────────┼─────────────────────────────┘   │
│                           │                                  │
│  ┌────────────────────────▼─────────────────────────────┐   │
│  │                    DOLIBARR                           │   │
│  │              (Database + Objects)               │   │
│  └──────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘
```

## Links with Other Modules

| Module | What it brings here |
| --- | --- |
| Module 6 | SmartCommon Components (UI) |
| Module 7 | SmartCommon Hooks (logic) |
| Module 8 | Backend API (PHP) |
| Module 9 | Complete Integration |

[Start: Project Structure ->](/training/module5-architecture-smartmaker/structure-projet)