---
source_hash: "886de247"
title: "SmartMaker - Front (React)"
weight: 30
description: "The front part of SmartMaker is built with React 19, Vite and TailwindCSS 4."
category: "Briques techniques"
type: "librairie"
---

# SmartMaker - Front (React)

The front part of SmartMaker is built with **React 19**, **Vite** and **TailwindCSS 4**.

## Technical stack

| Technology | Version | Description |
| --- | --- | --- |
| React | 19.x | UI framework |
| Vite | 6.x | Build tool and dev server |
| TailwindCSS | 4.x | Utility-first CSS framework |
| Redux Toolkit | 2.x | State management |
| i18next | 24.x | Internationalization |
| Framer Motion | 12.x | Animations |
| Dexie | 4.x | IndexedDB wrapper |
| ky | 1.x | HTTP client |
| Zod | 4.x | Schema validation |

## SmartCommon

**SmartCommon** is the shared React component library for every SmartMaker application.

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

### Installation

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

See [SmartCommon](/front/smartcommon) for the complete documentation.

## SmartCommon contents

### Providers

Components that supply the context to the application (`Provider`, `ApiProvider`, `ReduxProvider`, etc.).

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

### Display components
- `String`, `Text`, `Number`
- `Datetime`, `Duration`
- `Email`, `Url`, `PhoneNumber`
- `Address`, `Coordinates`
- `Color`, `Icon`, `Tags`

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

### Hooks
- `useApi` - API calls with JWT auth
- `useGlobalStates` - Persistent global state
- `useStates` - Local state
- `useForm` - Form handling
- `useDb` - IndexedDB database through Dexie
- `useNavigation` - Router navigation
- `useIntl` - Date/number formatting
- `useCachedQuery` - API cache with strategies (NetworkFirst, CacheFirst, SWR)
- `useSyncClient` - Complete offline synchronization
- `useOnlineStatus` - Network status detection
- `useAuthenticatedImage` - Image loading with JWT
- `useIsDesktop` - Desktop viewport detection
- `useWindow` - Orientation, dimensions, scroll, darkMode
- `useConfirm` - Confirmation dialogs
- `usePWAUpdate` - Service Worker update

See [Hooks](/front/hooks) for the complete documentation.

## Documentation
- [Architecture](/front/architecture) - File structure
- [SmartCommon](/front/smartcommon) - Component list
- [Hooks](/front/hooks) - Hooks documentation
- [Routing](/front/routage) - Navigation and routes
- [API requests](/front/requetes-api) - Server calls
- [Data storage](/front/stockage-de-donnees) - Local persistence
- [Translations](/front/traductions) - Internationalization
- [Themes](/front/themes) - CSS customization
- [PWA](/front/pwa) - Progressive Web App configuration
- [Tips](/front/astuces) - Best practices