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

Frontend

├── Front Office
│
├── Extranet Propriétaire
│
├── Back Office
│
└── Administration

src/

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

app/

├── (public)
├── (auth)
├── (client)
├── (owner)
├── (backoffice)
└── api

(public)

/

/search

/property/[slug]

/about

/contact

/legal

/privacy

/terms

(auth)

/login

/register

/forgot-password

/reset-password

/verify-email

(client)

/dashboard

/profile

/favorites

/reservations

/reservations/[id]

/contracts

/payments

/messages

/settings

(owner)

/dashboard

/properties

/properties/[id]

/calendar

/reservations

/revenues

/contracts

/invoices

/messages

/profile

(backoffice)

/dashboard

/properties

/properties/create

/properties/[id]

/reservations

/reservations/[id]

/owners

/owners/[id]

/customers

/customers/[id]

/contracts

/payments

/crm

/reports

/settings

Chaque domaine métier devient une Feature.

features/

auth/

users/

owners/

properties/

reservations/

contracts/

payments/

crm/

messaging/

reporting/

features/properties

├── api
├── components
├── forms
├── hooks
├── schemas
├── types
└── pages

generated/

├── api.ts
├── models.ts
├── services.ts
└── schemas.ts

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

Utilisation :

• Cache API
• Synchronisation serveur
• Pagination
• Invalidation cache

useProperties()
 
useProperty(id)
 
useReservations()
 
usePayments()

React Hook Form

+

Zod

+

OpenAPI DTO

PropertyFormSchema
 
ReservationFormSchema
 
CustomerFormSchema

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

xs
sm
md
lg
xl
2xl

sm
md
lg
xl
full

sm
md
lg
xl

Primary
PrimaryForeground

Secondary
SecondaryForeground

Success

Warning

Danger

Info

AppLayout

DashboardLayout

PublicLayout

AuthLayout

Navbar

Sidebar

Breadcrumb

Pagination

Tabs

Input

Textarea

Select

MultiSelect

Checkbox

Radio

DatePicker

FileUpload

Card

Badge

Avatar

Table

DataGrid

Timeline

Calendar

Alert

Toast

Modal

Drawer

Skeleton

Spinner

Sections :

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

Composants :

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

Sections :

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

Étapes :

1. Choix dates
2. Informations client
3. Paiement
4. Signature
5. Confirmation

Widgets :

• Revenus
• Réservations
• Occupation
• Alertes

Vue :

• Cartes
• Tableau

Graphiques :

• Mensuel
• Annuel
• Par bien

KPIs :

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

Actions :

• Créer
• Modifier
• Publier
• Archiver

Actions :

• Consulter
• Modifier
• Historique

Pipeline :

Prospect

↓

Qualifié

↓

Visite

↓

Négociation

↓

Client

Accueil

↓

Recherche

↓

Fiche Bien

↓

Réservation

↓

Paiement

↓

Signature

↓

Confirmation

Connexion

↓

Dashboard

↓

Mes Biens

↓

Revenus

↓

Export

Dashboard

↓

Réservation

↓

Contrat

↓

Paiement

↓

Facturation

• JWT
• Refresh Token
• Auto Refresh

ProtectedRoute

RoleGuard

PermissionGuard

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

Vitest

React Testing Library

Playwright

Nombre estimé :

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

À 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.