📝 Formulaire React – TP d’Intégration & Déploiement

Projet réalisé dans le cadre du TP "Intégration & Déploiement".
Objectif : construire un formulaire d'inscription React complet avec validation, tests, documentation, couverture, déploiement GitHub Pages et publication NPM.

---

🚀 Fonctionnalités

• Formulaire avec champs : Nom, Prénom, Email, Date de naissance, Ville, Code postal
• ✅ Validation personnalisée des champs
• ✅ Blocage des -18 ans
• ✅ Vérification du format email, nom/prénom/ville (avec accents)
• ✅ Format du code postal français (5 chiffres)
• ✅ Bouton de soumission désactivé tant que tous les champs ne sont pas remplis
• ✅ Affichage des erreurs sous les champs concernés
• ✅ Sauvegarde dans le localStorage
• ✅ Toasts de succès ou d'erreur
• ✅ Réinitialisation automatique du formulaire après enregistrement
• ✅ Couverture de tests 100% avec Vitest
• ✅ Documentation technique générée automatiquement avec JSDoc
• ✅ Déploiement automatique via GitHub Actions + GitHub Pages

---

🛠️ Stack technique

Outil	Usage
React 19	Framework frontend
Vite	Bundler ultra rapide
Vitest	Tests unitaires et intégration
Testing Library	Tests orientés utilisateur
JSDoc	Génération de documentation
GitHub Actions	CI/CD automatisé
GitHub Pages	Hébergement de la démo
Codecov	Visualisation de couverture

---

📦 Installation

npm install

---

🧪 Lancer les tests

npm run test

📈 Rapport de couverture

npm run coverage

Le rapport est généré dans coverage/index.html.
📡 Couverture visible sur Codecov :
👉 Voir la couverture sur Codecov

---

🌍 Déploiement

L'application est automatiquement déployée après tests réussis.
👉 Voir le site en ligne

---

📚 Documentation technique

npm run jsdoc

Accessible ensuite ici :
📁 public/docs/index.html

---

📤 Publication NPM

npm i andreascastello-cicd

---

✅ Tests couverts

Test	Status
Le calcul de l'âge	✅
L'âge > 18 ans	✅
Le format du code postal	✅
Le format des noms/prénoms (y compris accents/tirets)	✅
Le format de l'email	✅
Le bouton désactivé si les champs sont vides	✅
La sauvegarde dans le localStorage et le toaster de succès	✅
Le toaster d'erreur et erreurs sous les champs	✅
La disparition des erreurs quand corrigées	✅

---

✍️ Auteur

Projet réalisé par Andréas