Aller au contenu principal

Module 14 – Projet final Inertia

Niveau 5.2 – Laravel Inertia (React & Vue)

Objectif​

Consolider tout le Niveau 5.2 en réalisant un mini-projet complet avec Laravel + Inertia (React ou Vue) : authentification, au moins une ressource en CRUD (liste avec pagination et filtres, création, édition, suppression), formulaires validés, layouts, données partagées (utilisateur, flash), et tests de base. Ce module sert de synthèse et de tremplin vers le Projet 4 – Application Inertia (section Projets de la formation).

Critères de validation du projet final​

Pour valider le projet final (et s’assurer que vous maîtrisez les concepts du niveau), votre application doit respecter les points suivants.

Stack et structure​

  • Laravel (version récente) + Inertia + React ou Vue (un seul front, cohérent sur tout le projet).
  • Structure claire : Pages/ (par domaine : Users/, Articles/, etc.), Layouts/ (AppLayout, éventuellement GuestLayout), et Components/ si vous avez des composants réutilisables (Pagination, etc.).

Authentification​

  • Login (et optionnellement Register) : pages Inertia avec useForm, soumission vers les routes Laravel, affichage des erreurs de validation et des erreurs « identifiants incorrects ».
  • Routes protégées par le middleware auth (dashboard, liste, etc.) ; routes guest pour login/register.
  • Utilisateur connecté exposé via share() et affiché dans le layout (nom, lien Déconnexion). Déconnexion : Link avec method="post" vers la route logout.

CRUD et données​

  • Au moins une ressource (ex. utilisateurs, articles, tâches) avec :
    • Liste : page Index avec données paginées (prop users ou articles avec data, links), et filtres (recherche et/ou tri) envoyés en query string et gérés par le contrôleur.
    • Création : page Create avec formulaire useForm, validation Laravel, redirect vers la liste avec flash success en cas de succès, affichage des errors par champ en cas d’échec.
    • Édition : page Edit avec formulaire pré-rempli (props de la ressource), useForm avec put (ou patch) vers la route de mise à jour, même gestion succès/erreurs.
    • Suppression : soit lien/bouton avec method="delete" (ou router.delete), soit modale de confirmation (état local) puis appel à router.delete. Redirect avec flash success après suppression.

Formulaires et UX​

  • Tous les formulaires : labels sur les champs, affichage des errors sous chaque champ, bouton de soumission désactivé pendant processing (avec libellé « Enregistrement... » ou équivalent).
  • Flash messages : partagés via share() (success, error) et affichés dans le layout (bandeau en haut ou toast). Vérifier qu’après une création/édition/suppression, le message s’affiche bien sur la page de destination.

Qualité et tests​

  • Pas de duplication de logique métier côté client : les listes, filtres, tri et validation restent côté Laravel ; le front affiche les props et envoie les formulaires.
  • Au moins un test Laravel (Feature) qui utilise assertInertia sur une page (ex. users.index ou dashboard) pour vérifier le composant et la présence des props attendues.

Bonus (optionnel)​

  • Composant Pagination réutilisable à partir de users.links (ou équivalent).
  • Modale de confirmation avant suppression (état local React/Vue).
  • TypeScript : typage des props des pages principales.
  • Tests de composants (Vitest + Testing Library) sur au moins une page (liste ou formulaire).

Déroulement recommandé​

  1. Créer le projet Laravel, installer Inertia (côté Laravel + React ou Vue), configurer la root view et le middleware (module 2).
  2. Créer les layouts AppLayout et GuestLayout et les utiliser dans les pages (module 4).
  3. Configurer share() pour auth.user et flash (module 7).
  4. Implémenter login (et register si souhaité), routes guest et auth, et déconnexion (module 9).
  5. Implémenter le CRUD : routes, contrôleurs (index avec pagination + filtres, create, store, edit, update, destroy), et pages Inertia (Index, Create, Edit) avec useForm et affichage des erreurs (modules 3, 5, 10).
  6. Ajouter les flash messages dans les redirects (store, update, destroy) et vérifier l’affichage dans le layout (module 12).
  7. Écrire au moins un test Feature avec assertInertia (module 13).
  8. Optionnel : modale de confirmation, composant Pagination, TypeScript, tests de composants.

À retenir​

Le projet final valide que vous savez enchaîner toutes les briques du niveau : routes, contrôleurs, Inertia::render, layouts, useForm, validation, pagination, filtres, auth, shared data, flash, et tests assertInertia. Il vous prépare au Projet 4 – Application Inertia (section Projets), où les contraintes sont proches mais le scope peut être plus large (plusieurs ressources, upload, etc.). Choisir React ou Vue et rester cohérent sur tout le projet.