---
title: "SmartMaker - Front (React)"
weight: 30
description: "La partie front de SmartMaker est construite avec React 19, Vite, et TailwindCSS 4."
category: "Briques techniques"
type: "librairie"
---

# SmartMaker - Front (React)

La partie front de SmartMaker est construite avec **React 19**, **Vite**, et **TailwindCSS 4**.

## Stack technique

| Technologie | Version | Description |
| --- | --- | --- |
| React | 19.x | Framework UI |
| Vite | 6.x | Build tool et dev server |
| TailwindCSS | 4.x | Framework CSS utility-first |
| Redux Toolkit | 2.x | State management |
| i18next | 24.x | Internationalisation |
| Framer Motion | 12.x | Animations |
| Dexie | 4.x | IndexedDB wrapper |
| ky | 1.x | HTTP client |
| Zod | 4.x | Validation de schémas |

## SmartCommon

**SmartCommon** est la bibliothèque de composants React partagés pour toutes les applications SmartMaker.

Repository : https://inligit.fr/cap-rel/dolibarr/smartmaker/smartcommon

### Installation

```
npm install @cap-rel/smartcommon
```

Voir [SmartCommon](/front/smartcommon) pour la documentation complète.

## Contenu de SmartCommon

### Providers

Composants qui fournissent le contexte à l'application (`Provider`, `ApiProvider`, `ReduxProvider`, etc.).

### Composants de formulaire
- `Input`, `Textarea`, `Select`
- `Calendar`, `Timer`
- `AddressInput`, `Gps`
- `PhotosUploader`, `AudiosUploader`, `VideosUploader`
- `ColorPicker`, `IconSelect`
- `SignaturePad`
- `Editor` (markdown)

### Composants d'affichage
- `String`, `Text`, `Number`
- `Datetime`, `Duration`
- `Email`, `Url`, `PhoneNumber`
- `Address`, `Coordinates`
- `Color`, `Icon`, `Tags`

### Composants UI
- `Page`, `Block`, `Panel`, `Popup`
- `List`, `ListItem`
- `Carousel`, `DataTable`, `Chart`
- `Navbar`, `Sidebar`, `Tabbar`
- `Button`, `Icon`, `Spinner`, `Tag`

### Hooks
- `useApi` - Appels API avec auth JWT
- `useGlobalStates` - État global persistant
- `useStates` - État local
- `useForm` - Gestion de formulaires
- `useDb` - Base IndexedDB via Dexie
- `useNavigation` - Navigation router
- `useIntl` - Formatage dates/nombres
- `useCachedQuery` - Cache API avec stratégies (NetworkFirst, CacheFirst, SWR)
- `useSyncClient` - Synchronisation offline complète
- `useOnlineStatus` - Détection état réseau
- `useAuthenticatedImage` - Chargement d'images avec JWT
- `useIsDesktop` - Détection viewport desktop
- `useWindow` - Orientation, dimensions, scroll, darkMode
- `useConfirm` - Dialogues de confirmation
- `usePWAUpdate` - Mise à jour du Service Worker

Voir [Hooks](/front/hooks) pour la documentation complète.

## Documentation
- [Architecture](/front/architecture) - Structure des fichiers
- [SmartCommon](/front/smartcommon) - Liste des composants
- [Hooks](/front/hooks) - Documentation des hooks
- [Routage](/front/routage) - Navigation et routes
- [Requêtes API](/front/requetes-api) - Appels serveur
- [Stockage de données](/front/stockage-de-donnees) - Persistance locale
- [Traductions](/front/traductions) - Internationalisation
- [Thèmes](/front/themes) - Personnalisation CSS
- [PWA](/front/pwa) - Configuration Progressive Web App
- [Astuces](/front/astuces) - Bonnes pratiques