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	Organization of folders and files
2	Configuration	Provider and appConfig.js
3	Data Flow	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 ->