@enzoooooo/ci-cd-project

📋 CI/CD Project — Gestion d'inscriptions (React + Python + MySQL)

Application full-stack : un front React + TypeScript avec un formulaire d'inscription (validation + notifications toast) qui sauvegarde les inscrits en base de données MySQL via une API Python (FastAPI). Un compte administrateur peut se connecter pour consulter les informations privées des inscrits et les supprimer. Le tout avec une architecture Docker et une pipeline CI/CD complète (tests unitaires, intégration, infrastructure, end-to-end, déploiements).

🚀 Liens

Front (GitHub Pages) : https://Keil-ENZO.github.io/ci-cd-project/
Back (Vercel) : https://ci-cd-project-topaz.vercel.app
Documentation TypeDoc : https://Keil-ENZO.github.io/ci-cd-project/docs/
Package npm : @enzoooooo/ci-cd-project
Couverture Codecov : codecov.io/gh/Keil-ENZO/ci-cd-project

✨ Fonctionnalités

Visiteur

Formulaire d'inscription à 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 + toasts d'erreur à la soumission invalide
À l'inscription valide : enregistrement en base MySQL, toast de succès, champs vidés

Administrateur (connexion par email / mot de passe)

Authentification JWT (mot de passe haché en bcrypt)
Affichage de la liste des utilisateurs avec leurs informations privées (email, date de naissance, code postal)
Suppression d'un inscrit
En mode admin, le formulaire d'inscription public est masqué

L'administrateur est créé automatiquement au premier démarrage de la base, à partir de variables d'environnement (ADMIN_EMAIL / ADMIN_PASSWORD).

🏗️ Architecture

┌──────────────┐      ┌───────────────────┐      ┌──────────────┐
│  React (Vite)│ ───► │  FastAPI (Python)  │ ───► │    MySQL     │
│    front     │ HTTP │   API REST + JWT   │ SQL  │    base      │
└──────────────┘      └───────────────────┘      └──────────────┘

Environnement	Front	Back	Base de données
Local	Vite (Docker)	FastAPI (Docker)	MySQL (Docker) + Adminer + Dozzle
Production	GitHub Pages	Vercel (serverless)	Aiven (MySQL managé, SSL)

API (FastAPI)

Méthode	Route	Accès	Description
`GET`	`/`	public	Santé du service
`GET`	`/users`	public	Liste des inscrits (infos réduites : nom, prénom, ville)
`POST`	`/users`	public	Inscription
`POST`	`/login`	public	Connexion admin → renvoie un token JWT
`GET`	`/users/details`	admin	Liste avec infos privées
`DELETE`	`/users/{id}`	admin	Suppression d'un inscrit

✅ Règles de validation

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

🛠️ Installation et lancement

Avec Docker (stack complète)

# Créer le fichier .env à partir de l'exemple
cp .env.example .env

# Construire l'image MySQL de migration puis lancer toute la stack
docker build -t migration_mysql .
docker compose up -d --build

Service	URL
Front React	http://localhost:3000/ci-cd-project/
API FastAPI	http://localhost:8000
Adminer (DB)	http://localhost:8080
Dozzle (logs)	http://localhost:8081

Front seul (développement)

npm install
npm run dev          # http://localhost:5173/ci-cd-project/

En local, le front cible http://localhost:8000. En production, l'URL du backend est injectée au build via la variable VITE_API_URL.

🧪 Tests

Couverture > 95 % (statements, branches, functions, lines — hors composants UI ShadCN).

Tests unitaires

Vitest (src/tests/unitaire/) : checkAge, checkName, checkCP, checkMail
Jest (src/tests/unitaire/api.test.ts) : client API axios (countUsers, addUser)

Tests d'intégration (`src/tests/integration/`, Vitest + Testing Library)

app.test.tsx — compteur, inscription, erreurs serveur, parcours admin (login → suppression → logout)
homePage.test.tsx — validation des champs et soumission
loginForm.test.tsx — connexion admin (succès / échec), déconnexion
usersList.test.tsx — liste réduite vs privée, suppression

Tests end-to-end (`cypress/`, Cypress)

Exécutés contre la vraie stack Docker : inscription réelle en base, connexion admin, affichage des infos privées, suppression. Inclut des scénarios mode offline (réseau coupé via cy.intercept) qui vérifient les messages d'erreur (chargement, inscription, connexion).

npm test           # Vitest (unitaires Vitest + intégration) + couverture
npm run test:unit  # Jest (test unitaire de l'API)
npm run cypress    # Cypress (E2E, interface) — stack Docker requise

📁 Structure du projet

.
├── server/
│   └── server.py            # API FastAPI (auth JWT, CRUD utilisateurs, seed admin)
├── migration/               # Scripts SQL (création DB + table, init Docker)
├── src/
│   ├── components/
│   │   ├── LoginForm.tsx     # Connexion administrateur
│   │   ├── UsersList.tsx     # Liste des inscrits (vue admin)
│   │   └── ui/               # Composants ShadCN UI
│   ├── pages/HomePage/       # Formulaire d'inscription
│   ├── utils/                # Validations (age, form, mail)
│   ├── lib/api.ts            # Client HTTP (axios) vers le backend
│   └── tests/                # unitaire/ + integration/
├── cypress/                  # Tests end-to-end
├── docker-compose.yml        # Stack mysql / adminer / python / react / dozzle
├── vercel.json               # Déploiement du backend Python sur Vercel
└── .github/workflows/        # Pipelines CI/CD

⚙️ Pipeline CI/CD (GitHub Actions)

Les déploiements sont conditionnés à la réussite des tests (pas de tests verts → pas de déploiement).

`build_test_deploy_react.yml` — Front

Installation (npm ci)
Tests unitaires Jest (npm run test:unit)
Tests unitaires + intégration Vitest (npm test, avec couverture → Codecov)
Publication du package npm
Build du front (avec VITE_API_URL) + documentation TypeDoc
Déploiement GitHub Pages (dépend de la réussite des tests)

`docker.yml` — Back & infrastructure

Build & push des images Docker (front + back)
Tests d'infrastructure : démarrage de la stack + vérification des healthchecks
Tests end-to-end Cypress contre la stack
Déploiement du backend sur Vercel (dépend de la réussite des tests d'infra + E2E, uniquement sur main)

🔧 Stack technique

Technologie	Usage
React 19 + TypeScript	Front
Vite	Bundler / dev server
FastAPI (Python)	API REST
MySQL	Base de données
JWT (PyJWT) + bcrypt	Authentification
Docker / Docker Compose	Conteneurisation
Vercel	Hébergement du backend
Aiven	MySQL managé (prod)
Vitest + Jest	Tests unitaires / intégration
Cypress	Tests end-to-end
ShadCN UI + TailwindCSS + Sonner	UI
TypeDoc + Codecov	Documentation / couverture

@enzoooooo/ci-cd-project

📋 CI/CD Project — Gestion d'inscriptions (React + Python + MySQL)

🚀 Liens

✨ Fonctionnalités

🏗️ Architecture

API (FastAPI)

✅ Règles de validation

🛠️ Installation et lancement

Avec Docker (stack complète)

Front seul (développement)

🧪 Tests

Tests unitaires

Tests d'intégration (`src/tests/integration/`, Vitest + Testing Library)

Tests end-to-end (`cypress/`, Cypress)

📁 Structure du projet

⚙️ Pipeline CI/CD (GitHub Actions)

`build_test_deploy_react.yml` — Front

`docker.yml` — Back & infrastructure

🔧 Stack technique

Settings

On This Page

@enzoooooo/ci-cd-project

📋 CI/CD Project — Gestion d'inscriptions (React + Python + MySQL)

🚀 Liens

✨ Fonctionnalités

🏗️ Architecture

API (FastAPI)

✅ Règles de validation

🛠️ Installation et lancement

Avec Docker (stack complète)

Front seul (développement)

🧪 Tests

Tests unitaires

Tests d'intégration (src/tests/integration/, Vitest + Testing Library)

Tests end-to-end (cypress/, Cypress)

📁 Structure du projet

⚙️ Pipeline CI/CD (GitHub Actions)

build_test_deploy_react.yml — Front

docker.yml — Back & infrastructure

🔧 Stack technique

Settings

On This Page

Tests d'intégration (`src/tests/integration/`, Vitest + Testing Library)

Tests end-to-end (`cypress/`, Cypress)

`build_test_deploy_react.yml` — Front

`docker.yml` — Back & infrastructure