@enzoooooo/ci-cd-project
    Preparing search index...

    @enzoooooo/ci-cd-project

    📋 CI/CD Project — Formulaire d'inscription React

    CI/CD codecov npm

    Application React + TypeScript permettant à un utilisateur de s'inscrire via un formulaire, avec validation des champs, notifications toast, sauvegarde dans le localStorage et pipeline CI/CD complet.

    • Formulaire d'inscription avec 6 champs : Prénom, Nom, Email, Date de naissance, Ville, Code Postal
    • Bouton désactivé tant que tous les champs ne sont pas valides
    • Messages d'erreur en rouge sous chaque champ invalide (au fur et à mesure de la saisie)
    • Toaster d'erreur lors d'une tentative de soumission invalide (un toast par champ en erreur)
    • Toaster de succès + sauvegarde dans le localStorage + vidage des champs après inscription réussie
    • Documentation accessible depuis l'application
    Champ Règle
    Prénom / Nom / Ville Minimum 2 caractères, lettres uniquement (accents, tréma, tiret acceptés), pas de chiffres ni caractères spéciaux
    Email Format valide : nom@domaine.extension
    Date de naissance L'utilisateur doit avoir au moins 18 ans
    Code postal Format français : exactement 5 chiffres 
    # Installer les dépendances
    npm install

    # Lancer en développement
    npm run dev

    # Lancer les tests avec couverture
    npm test

    # Build de production
    npm run build

    # Générer la documentation
    npm run docs

    # Déployer sur GitHub Pages
    npm run deploy

    Le projet dispose d'une couverture de tests à 100% (hors composants UI ShadCN).

    Tests unitaires (src/tests/unitaire/)

    Fichier Fonctions testées
    age.test.ts checkAge — calcul de l'âge, validation des 18 ans, dates invalides
    form.test.ts checkName — noms/prénoms valides/invalides, checkCP — codes postaux
    mail.test.ts checkMail — formats d'emails valides et invalides

    Tests d'intégration (src/tests/integration/)

    Fichier Scénarios testés
    app.test.tsx Soumission valide → localStorage + champs vidés
    Messages d'erreur sous les champs invalides
    Bouton désactivé pour un mineur
    Soumission d'un formulaire vide 
    # Lancer les tests
    npm test

    # Lancer en mode watch
    npm run test:watch

    src/
    ├── components/
    │   └── ui/              # Composants ShadCN UI (button, input, field, dialog…)
    ├── pages/
    │   └── HomePage/
    │       └── HomePage.tsx # Page principale avec le formulaire
    ├── utils/
    │   ├── age.ts           # Validation de l'âge (checkAge)
    │   ├── form.ts          # Validation nom/prénom/ville/CP (checkName, checkCP)
    │   └── mail.ts          # Validation email (checkMail)
    ├── tests/
    │   ├── unitaire/        # Tests unitaires des fonctions de validation
    │   └── integration/     # Tests d'intégration du formulaire
    └── lib/
        └── utils.ts         # Utilitaires (cn — class merger)

    Le workflow .github/workflows/build_test_deploy_react.yml exécute automatiquement à chaque push sur main :

    1. Installation (npm ci)
    2. Build (tsc && vite build)
    3. Tests + Couverture (vitest --coverage)
    4. Upload Codecov (rapport de couverture)
    5. Génération de la documentation TypeDoc → dist/docs/
    6. Publication du package sur npm (@enzoooooo/ci-cd-project)
    7. Déploiement sur GitHub Pages
    Technologie Usage
    React 19 Framework UI
    TypeScript Typage statique
    Vite Bundler et serveur de développement
    Vitest Tests unitaires et d'intégration
    ShadCN UI Composants UI
    Sonner Notifications toast
    TailwindCSS Styling
    TypeDoc Génération de documentation
    Codecov Rapport de couverture de tests

    Settings

    Member Visibility

    On This Page

    📋 CI/CD Project — Formulaire d'inscription React