Architecture React

Statut

Document de cadrage frontend — version initiale.

Vue d'ensemble

L'architecture frontend repose sur React 19, avec deux modes d'application visibles :

• dmv-public utilise Next.js App Router ;
• dmv_backoffice utilise Vite et React Router.

Cette dualité est cohérente avec les usages actuels : SEO et pages publiques côté DMV public, SPA d'administration côté backoffice.

État actuel visible

Sujet	dmv-public	dmv_backoffice
Framework	Next.js 16.1.1	Vite 7.2.4
React	19.2.3	19.2.x
Routing	App Router	React Router DOM
Styling	Tailwind CSS 4	Tailwind CSS 4
Données	Supabase JS, fetch, SWR ponctuel	Supabase JS, fetch externe ponctuel
Cartographie	Leaflet / React Leaflet	Leaflet
Build	next build, export en production	vite build

Principes d'architecture

• Séparer pages, composants, librairies utilitaires et accès données.
• Limiter la logique métier dans les composants.
• Préférer des composants lisibles à des abstractions prématurées.
• Isoler progressivement les accès API/Supabase dans des services dédiés.
• Garder les états locaux proches de leur usage.
• Éviter les dépendances globales inutiles.

Server et client components

Dans dmv-public, Next.js permet de combiner :

• pages serveur pour le SEO, les métadonnées et certaines données publiques ;
• composants client pour interactions, favoris, modales, cartes, recherche et formulaires.

Les composants client doivent rester ciblés. Toute page publique n'a pas vocation à devenir entièrement interactive.

Backoffice SPA

Le backoffice est une SPA React/Vite avec :

• guards d'authentification ;
• vérification de rôle admin ;
• lazy loading des pages ;
• layout applicatif ;
• routes fonctionnelles par domaine.

Cette architecture est adaptée à un outil d'administration, à condition de ne pas disperser les règles métier côté client.

Vision cible

La cible est une architecture React pragmatique :

• composants partagés quand cela réduit la duplication ;
• services d'accès données documentés ;
• conventions de routing claires ;
• design system stable ;
• séparation progressive entre UI et logique métier ;
• alignement avec l'API Laravel centrale.

Points à clarifier

• Niveau de mutualisation possible entre dmv-public et dmv_backoffice.
• Convention de services API cible.
• Découpage futur des interfaces PlayLoop, AssoSuite et Mairie.
• Stratégie de migration des accès directs Supabase côté frontend.