ci-cd-jbsaintebeuve

Application React d'inscription avec validation de formulaire, persistance locale et pipeline CI/CD complet.

Fonctionnalités

• Formulaire d'inscription avec validation en temps réel (nom, prénom, email, date de naissance, ville, code postal)
• Sélecteur de date avec react-day-picker
• Validation côté client (nom, email, code postal, majorité 18+)
• Liste des inscrits mise à jour automatiquement (stockage localStorage + événements cross-onglets)
• Notifications toast avec sonner
• Interface responsive avec Tailwind CSS v4 et shadcn/ui

Stack technique

| Technologie | Version | |-------------|---------| | React | 19 | | TypeScript | ~6.0 | | Vite | 8 | | Tailwind CSS | 4 | | shadcn/ui | — | | Vitest | 3 | | JSDoc | 4 |

Prérequis

• Node.js 20+

Installation

npm install

Scripts

| Commande | Description | |----------|-------------| | npm run dev | Lance le serveur de développement | | npm run build | Compile TypeScript + build production | | npm run preview | Prévisualise le build de production | | npm test | Exécute les tests avec couverture | | npm run lint | Vérifie le code avec ESLint | | npm run jsdoc | Génère la documentation JSDoc dans public/docs/ |

Structure du projet

src/
├── main.tsx                       # Point d'entrée
├── App.tsx                        # Composant racine
├── index.css                      # Styles Tailwind
├── components/
│   ├── RegistrationForm.tsx       # Formulaire d'inscription
│   ├── UserList.tsx               # Liste des inscrits
│   └── ui/                        # Primitives shadcn/ui
│       ├── button.tsx
│       ├── calendar.tsx
│       ├── input.tsx
│       ├── label.tsx
│       └── popover.tsx
├── lib/
│   └── utils.ts                   # Utilitaire de classes Tailwind (cn)
├── services/
│   └── storageService.ts          # Persistance localStorage
└── utils/
    └── validation.ts              # Fonctions de validation

CI/CD

Sur chaque push ou Pull Request vers main, le pipeline GitHub Actions :

1. Installe les dépendances
2. Génère la documentation JSDoc
3. Compile le projet
4. Exécute les tests avec couverture (istanbul)
5. Publie sur npm (version taguée)
6. Déploie sur GitHub Pages

Documentation

La documentation JSDoc est accessible à l'adresse :

https://jbsaintebeuve.github.io/ci-cd/docs/

Génération locale :

npm run jsdoc

Licence

ISC