====== Architecture Frontend NextJS 15 ======

===== Objectifs =====

Le frontend constitue la couche de présentation de la plateforme.

Objectifs :

  * SEO performant
  * Responsive Mobile / Tablet / Desktop
  * Accessibilité RGAA
  * Temps de chargement optimisés
  * Architecture modulaire
  * Réutilisation maximale des composants
  * Génération automatique du client API OpenAPI

Technologies retenues :

  * NextJS 15 (App Router)
  * React 19
  * TypeScript
  * Tailwind CSS
  * TanStack Query
  * React Hook Form
  * Zod
  * OpenAPI Generator
  * shadcn/ui

----

====== Architecture globale ======

<code>
Frontend

├── Front Office
│
├── Extranet Propriétaire
│
├── Back Office
│
└── Administration
</code>

----

====== Structure du projet ======

<code>
src/

├── app/
├── components/
├── features/
├── services/
├── hooks/
├── stores/
├── lib/
├── types/
├── providers/
├── styles/
└── generated/
</code>

----

====== App Router ======

===== Structure générale =====

<code>
app/

├── (public)
├── (auth)
├── (client)
├── (owner)
├── (backoffice)
└── api
</code>

----

====== Front Office ======

===== Pages publiques =====

<code>
(public)

/

/search

/property/[slug]

/about

/contact

/legal

/privacy

/terms
</code>

----

===== Authentification =====

<code>
(auth)

/login

/register

/forgot-password

/reset-password

/verify-email
</code>

----

===== Espace Client =====

<code>
(client)

/dashboard

/profile

/favorites

/reservations

/reservations/[id]

/contracts

/payments

/messages

/settings
</code>

----

====== Extranet Propriétaire ======

<code>
(owner)

/dashboard

/properties

/properties/[id]

/calendar

/reservations

/revenues

/contracts

/invoices

/messages

/profile
</code>

----

====== Back Office ======

<code>
(backoffice)

/dashboard

/properties

/properties/create

/properties/[id]

/reservations

/reservations/[id]

/owners

/owners/[id]

/customers

/customers/[id]

/contracts

/payments

/crm

/reports

/settings
</code>

----

====== Organisation métier ======

Chaque domaine métier devient une Feature.

<code>
features/

auth/

users/

owners/

properties/

reservations/

contracts/

payments/

crm/

messaging/

reporting/
</code>

----

====== Exemple Feature ======

<code>
features/properties

├── api
├── components
├── forms
├── hooks
├── schemas
├── types
└── pages
</code>

----

====== Génération OpenAPI ======

===== Client API =====

<code>
generated/

├── api.ts
├── models.ts
├── services.ts
└── schemas.ts
</code>

----

===== Génération =====

<code bash>
openapi-generator-cli generate \
-i openapi.yaml \
-g typescript-fetch \
-o src/generated
</code>

----

====== Gestion d'état ======

===== TanStack Query =====

Utilisation :

  * Cache API
  * Synchronisation serveur
  * Pagination
  * Invalidation cache

----

===== Exemple =====

<code ts>
useProperties()

useProperty(id)

useReservations()

usePayments()
</code>

----

====== Gestion des formulaires ======

===== Stack =====

<code>
React Hook Form

+

Zod

+

OpenAPI DTO
</code>

----

===== Exemple =====

<code ts>
PropertyFormSchema

ReservationFormSchema

CustomerFormSchema
</code>

----

====== Design System ======

===== Principes =====

  * Mobile First
  * Atomic Design
  * Accessibilité
  * Dark Mode Ready
  * Réutilisable

----

====== Tokens ======

===== Espacements =====

<code>
xs
sm
md
lg
xl
2xl
</code>

----

===== Rayons =====

<code>
sm
md
lg
xl
full
</code>

----

===== Ombres =====

<code>
sm
md
lg
xl
</code>

----

====== Couleurs ======

===== Primaire =====

<code>
Primary
PrimaryForeground
</code>

----

===== Secondaire =====

<code>
Secondary
SecondaryForeground
</code>

----

===== États =====

<code>
Success

Warning

Danger

Info
</code>

----

====== Bibliothèque de composants ======

===== Layout =====

<code>
AppLayout

DashboardLayout

PublicLayout

AuthLayout
</code>

----

===== Navigation =====

<code>
Navbar

Sidebar

Breadcrumb

Pagination

Tabs
</code>

----

===== Inputs =====

<code>
Input

Textarea

Select

MultiSelect

Checkbox

Radio

DatePicker

FileUpload
</code>

----

===== Data Display =====

<code>
Card

Badge

Avatar

Table

DataGrid

Timeline

Calendar
</code>

----

===== Feedback =====

<code>
Alert

Toast

Modal

Drawer

Skeleton

Spinner
</code>

----

====== Écrans Front Office ======

===== Accueil =====

Sections :

  * Hero Search
  * Destinations populaires
  * Derniers biens
  * Promotions
  * Témoignages

----

===== Recherche =====

Composants :

  * Barre de recherche
  * Carte interactive
  * Liste résultats
  * Filtres

----

===== Fiche Bien =====

Sections :

  * Galerie
  * Description
  * Équipements
  * Calendrier
  * Carte
  * Réservation

----

===== Réservation =====

Étapes :

  - Choix dates
  - Informations client
  - Paiement
  - Signature
  - Confirmation

----

====== Écrans Extranet Propriétaire ======

===== Dashboard =====

Widgets :

  * Revenus
  * Réservations
  * Occupation
  * Alertes

----

===== Mes Biens =====

Vue :

  * Cartes
  * Tableau

----

===== Revenus =====

Graphiques :

  * Mensuel
  * Annuel
  * Par bien

----

====== Écrans Back Office ======

===== Dashboard =====

KPIs :

  * CA
  * Réservations
  * Taux occupation
  * Nouveaux clients

----

===== Gestion des biens =====

Actions :

  * Créer
  * Modifier
  * Publier
  * Archiver

----

===== Gestion clients =====

Actions :

  * Consulter
  * Modifier
  * Historique

----

===== CRM =====

Pipeline :

<code>
Prospect

↓

Qualifié

↓

Visite

↓

Négociation

↓

Client
</code>

----

====== Parcours UX ======

===== Parcours Client =====

<code>
Accueil

↓

Recherche

↓

Fiche Bien

↓

Réservation

↓

Paiement

↓

Signature

↓

Confirmation
</code>

----

===== Parcours Propriétaire =====

<code>
Connexion

↓

Dashboard

↓

Mes Biens

↓

Revenus

↓

Export
</code>

----

===== Parcours Gestionnaire =====

<code>
Dashboard

↓

Réservation

↓

Contrat

↓

Paiement

↓

Facturation
</code>

----

====== Sécurité Frontend ======

===== Auth =====

  * JWT
  * Refresh Token
  * Auto Refresh

----

===== Contrôle accès =====

<code>
ProtectedRoute

RoleGuard

PermissionGuard
</code>

----

====== Performance ======

===== Optimisations =====

  * Server Components
  * Streaming
  * Lazy Loading
  * Image Optimization
  * ISR
  * Cache API

----

====== Tests ======

===== Unitaires =====

<code>
Vitest
</code>

----

===== Composants =====

<code>
React Testing Library
</code>

----

===== E2E =====

<code>
Playwright
</code>

----

====== Structure finale ======

Nombre estimé :

^ Élément ^ Volume ^
| Pages | 80+ |
| Composants | 150+ |
| Features | 12 |
| Formulaires | 40+ |
| Hooks | 80+ |
| API Calls | 250+ |

----

====== Livrables générés ======

  * Architecture Frontend
  * Design System
  * Bibliothèque UI
  * Arborescence complète
  * Parcours utilisateurs
  * Organisation des Features
  * Convention de développement

----

====== Étape suivante ======

À partir de cette architecture Frontend, nous pouvons désormais produire :

  * Wireframes détaillés de tous les écrans
  * Maquettes UX basse fidélité
  * Maquettes UI haute fidélité (Figma)
  * Charte graphique complète
  * Design Tokens
  * Bibliothèque de composants Figma
  * Prototype cliquable complet
  * Plan de sprints Scrum (Sprint 0 à Sprint 20)

Le prochain livrable recommandé est :

**Dossier UX/UI complet (Wireframes + Maquettes + Design System Figma)**

afin de permettre à l'équipe produit et aux designers de lancer immédiatement la phase de conception visuelle.