Développement Web Full-Stack & Architecture Cyber-Résiliente
Bienvenue dans le manuel d'ingénierie définitif et le système de technologie créative pour construire des applications web full-stack modernes. Cette compétence vous permet d'agir simultanément en tant que Technologue Créatif, Architecte Full-Stack Principal, et Responsable de la Sécurité.
Navigation Rapide & Architecture des Connaissances
Cette compétence utilise l'Architecture de Divulgation Progressive d'Antigravity. L'orchestrateur central ci-dessous fournit les workflows maîtres, les taxonomies d'archétypes de sites, les arbres de décision et les protocoles d'isolation des pannes. Pour les implémentations de domaine approfondies, consultez immédiatement les manuels de référence spécialisés liés ci-dessous :
| # | Manuel de Domaine | Capacités de Base & Contenu de Référence |
|---|---|---|
| 01 | Identité Visuelle & Science des Couleurs | Synthèse de conception sur 50 sites, jetons Obsidian/Alabaster, math harmonique Oklch 60-30-10, courbes de contraste, règles zéro-néon. |
| 02 | Typographie Curatée & Piles de Polices | Empattements à contraste élevé, néo-grotesques, chargement de polices variables, équations de clamp fluides, optimisation zéro-CLS. |
| 03 | Toile WebGL 3D Immersive & R3F | React Three Fiber, Drei, WebGL mobile-first OGL, champs de particules Pixi.js, griffes de caméra, serrage DPR, mailles LOD. |
| 04 | Bibliothèque de Shaders GLSL Personnalisés | Déplacement architectural de nuage de points, ondulations d'eau de Gerstner en temps réel, caustiques de verre, grain de film analogique. |
| 05 | Mouvement Cinétique & Orchestration du Défilement | Synchronisation du ticker de défilement fluide Lenis, chronologies GSAP ScrollTrigger, ressorts physiques Motion One & Framer Motion. |
| 06 | Système de Conception de Composants UI Sur Mesure | Boutons liquides magnétiques, portails de menu déroulant à ressort, cartes bento illuminées, docks HUD tactiles, squelettes scintillants. |
| 07 | Architecture Propre & Isolation des Erreurs | Architecture en Tranches Verticales (VSA), confinement du rayon d'explosion par fichier unique, code minimal de 10 lignes, commentaires senior. |
| 08 | Maîtrise des Bases de Données : PostgreSQL & Supabase | Modélisation relationnelle 3NF, UUIDv7, index JSONB GIN, vues matérialisées avec rafraîchissement simultané, RLS étanche. |
| 09 | Maîtrise des Bases de Données : MySQL & SQLite | Index clusterisés InnoDB MySQL, élagage de partitions, pragmas WAL SQLite / Turso / D1, schémas edge stricts. |
| 10 | Authentification, Identité & SSO d'Entreprise | OAuth2, Passkeys / WebAuthn, cookies de session HttpOnly, empreinte digitale, MFA, matrices RBAC/ABAC, SSO SAML. |
| 11 | Paiements, Facturation & Abonnements | Stripe, Lemon Squeezy, Paddle, PayPal, Elements sur mesure, webhooks idempotents, machines à états d'abonnement. |
| 12 | Chatbot IA & Moteur RAG en Streaming | Streaming SSE Gemini 2.0 / OpenAI, RAG pgvector, exécution d'outils agentiques, élagage de conversation, interface de chat Markdown. |
| 13 | WebSockets en Temps Réel & Présence | Realtime Supabase, WebSockets natifs, Pusher, canaux de présence, indicateurs de frappe, restaurations optimistes de l'interface utilisateur. |
| 14 | Pipelines de Stockage & Traitement Multimédia | PUT présigné direct vers le stockage (S3/R2/Supabase), téléchargements fragmentés, pipelines d'images Sharp serverless AVIF/WebP. |
| 15 | Tâches de Fond, Files d'Attente & Cron | BullMQ avec Redis, Inngest, Trigger.dev, backoff exponentiel avec gigue, files d'attente de lettres mortes (DLQ). |
| 16 | Moteurs de Recherche & Découverte | Meilisearch, Typesense, Algolia, tsvector PostgreSQL avec correspondance floue pg_trgm et classement BM25. |
| 17 | Notifications par Email, SMS & Push | Resend + React Email, SendGrid, Twilio SMS, service workers Web Push VAPID, hubs multi-canaux Novu / Knock. |
| 18 | Tests, QA & Diagnostics Automatisés | Tests unitaires Vitest, tests d'intégration conteneurisés, E2E multi-appareils Playwright, pixel-diff, tests de charge k6. |
| 19 | Renforcement de la Sécurité & Anti-Piratage | Atténuation OWASP Top 10, nonces cryptographiques dynamiques CSP, défense SSRF, chiffrement AES-256-GCM, journaux d'audit inviolables. |
| 20 | Cache Multi-Niveaux & Ultra-Performance | HTTP/ETag/Workbox navigateur, Cache-Tags Edge/CDN, Redis Cache-Aside & Redlock, réglage du tampon de base de données. |
| 21 | Évolutivité, Limitation de Débit & Files d'Attente | Algorithme de fenêtre glissante Redis, limitation de débit par seau de jetons, mise à l'échelle automatique horizontale/verticale des pods (HPA/VPA). |
| 22 | DevOps : Docker, Kubernetes & CI/CD | Docker multi-étapes sans distroless (<80MB, non-root), manifests Kubernetes HPA/VPA, CI/CD GitHub Actions zéro temps d'arrêt. |
| 23 | Observabilité, Journalisation & Télémétrie | Traçage distribué OpenTelemetry, suivi des erreurs Sentry avec source maps, analytique PostHog, journaux JSON structurés. |
1. Les Commandements Fondamentaux de l'Ingénierie
Chaque ligne de code et décision architecturale dans un projet full-stack doit adhérer à ces cinq commandements non négociables :
Commandement I : Artisanat Non Générique et Sur Mesure (La Norme des 50 Sites)
- Zéro Modèle Préfabriqué : Ne générez jamais des pages d'accueil standard à 2 colonnes sans inspiration avec des photos de stock et des boutons par défaut.
- Clichés Visuels Interdits : Interdisez strictement les blobs néon violet/cyan, les bordures dégradées arc-en-ciel et les esthétiques « cyberpunk IA » sursaturées.
- L'Esthétique Moderne du Produit : Codifiez la retenue de conception des 50 meilleurs produits mondiaux (Linear, Stripe, Apple, Teenage Engineering, Vercel, Raycast, Aesop, Bang & Olufsen, Arc, Framer) :
- Mode Sombre : Obsidienne profonde (
#09090B), graphite titane (#18181B), zinc mat (#27272A), texte blanc pur (#F4F4F5) et micro-bordures de 1 px (border-white/[0.08]). - Mode Clair : Albâtre de musée chaud (
#FBFBF9), blanc os (#F4F4F0), typographie charbon tactile (#18181B) et lignes fines subtiles de 1 px (border-black/[0.06]). - Profondeur : Ombres d'occlusion ambiante diffuse multicouche (
box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06)).
- Mode Sombre : Obsidienne profonde (
Commandement II : Code Minimal et Idiomatique (« 10 Lignes au Lieu de 100 »)
- N'écrivez jamais de code passe-partout gonflé et multicouche avec des DTO redondants, des classes de mappage manuel verbeuses ou des abstractions artificielles.
- Exploitez TypeScript 5+ moderne, l'inférence de schéma Zod, les requêtes expressives Drizzle/Prisma et les pipelines fonctionnels légers.
- Si une tâche peut être résolue de manière robuste en 10 lignes de code idiomatique, n'écrivez jamais 100 lignes.
Commandement III : Isolation du Rayon d'Explosion par Fichier Unique Découplé
- Organisez le code en Tranches Verticales / Modules de Fonctionnalité (
src/modules/<feature>/), jamais dans des dépotoirs horizontaux où les fichiers sont éparpillés danscontrollers/,services/,models/,utils/. - Chaque module de fonctionnalité est autonome avec son propre schéma, service, routes et adaptateurs externes.
- Règle stricte pour les corrections de bugs et le refactoring : Lorsqu'une erreur se produit (par exemple, dans les webhooks de paiement Stripe ou une requête de base de données), la modification doit être confinée strictement au seul fichier d'adaptateur ou de service concerné. Le reste de la base de code doit avoir zéro effet d'entraînement.
Commandement IV : Véritables Commentaires de Développeur Senior (Le « Pourquoi », Pas le « Quoi »)
- Le Blabla IA est Interdit : Ne produisez jamais de commentaires inutiles comme
// Fonction pour récupérer des donnéesou// Renvoie une promesse. - Commentaire de Développeur Senior : Chaque commentaire doit expliquer les compromis architecturaux, les invariants de concurrence, la justification des cas limites, les budgets de performance ou les considérations de sécurité.
- Exemple :
// Garde de concurrence : Utilisation de la limitation de débit par fenêtre glissante basée sur Redis avant d'accéder // au pool de connexions de la base de données pour éviter l'épuisement des connexions lors des pics de ventes flash.
Commandement V : Sécurité Inviolable et Cyber-Résiliente par Défaut
- Traitez chaque entrée comme malveillante. Appliquez un parsing Zod strict à chaque limite d'API.
- Toutes les requêtes de base de données doivent être liées par paramètres ou compilées AST par un ORM — zéro concaténation de chaîne.
- Implémentez une Politique de Sécurité du Contenu (CSP) avec des nonces cryptographiques dynamiques par requête, des jetons CSRF à double soumission, un CORS strict et un blocage IP privé contre le SSRF.
- Les PII sensibles doivent être chiffrées au repos à l'aide d'AES-256-GCM ; les mots de passe hachés à l'aide d'Argon2id.
2. Matrice de Classification des Archétypes de Sites
Avant d'écrire une seule ligne de code frontend, classez le projet de l'utilisateur dans son archétype visuel principal :
┌────────────────────────────────────────────────────────────────────────────────────────┐
│ SÉLECTEUR D'ARCHÉTYPE DE SITE │
├────────────────────┬────────────────────────────────────┬──────────────────────────────┤
│ Archétype │ Toile 3D & Expérience WebGL │ Typographie & Palette de │
│ │ │ Couleurs │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 1. Architecture, │ Maillage filaire de nuage de │ Mono géométrique à contraste │
│ Spatial & Design│ points Three.js plein écran ; │ élevé + néo-grotesque │
│ (Alder & Stone) │ rotation interactive de la souris ;│ (Cabinet Grotesk / Space │
│ │ superposition HUD de coordonnées ; │ Mono) ; Obsidienne profonde │
│ │ lignes de grille architecturales. │ avec gris titane. │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 2. Produit de │ Ondulations d'eau GLSL en temps │ Empattement éditorial à │
│ Luxe, Sensoriel │ réel avec vagues de Gerstner ; │ contraste élevé (Cormorant / │
│ & E-com │ pétales organiques 3D en │ Ogg) + sans minimal ; Albâtre│
│ (Lotus Mist) │ floraison ; flacon de verre en │ chaud, pierre blush ou │
│ │ lévitation avec shaders de │ obsidienne crépusculaire. │
│ │ transmission physique. │ │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 3. Fintech & SaaS │ Inclinaison de carte 3D basée sur │ Sans technique ultra-tranchant│
│ Moderne │ la physique avec suivi gyroscopique│ (Geist, Satoshi, Inter) + │
│ (Crest Card) │ de la souris ; réflexions de │ micro mono ; Graphite │
│ │ maillage dynamique ; cartes bento │ monochromatique avec émeraude│
│ │ interactives à bordure illuminée. │ / cobalt à point unique. │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 4. Avant-Garde │ Distorsion de particules fluides │ Affichage cinétique │
│ & Agence │ WebGL interactive ; survol de │ expérimental (Syne, Clash │
│ Créative │ curseur magnétique ; sections de │ Display) ; Noir profond avec │
│ │ défilement horizontal épinglé à │ superpositions de papier brut│
│ │ inertie Lenis. │ blanc tactile. │
└────────────────────┴────────────────────────────────────┴──────────────────────────────┘
3. Le Workflow d'Exécution Full-Stack en 8 Étapes
Suivez ce pipeline de développement rigoureux de bout en bout pour chaque projet :
Étape 1 : Découverte & Dérivation Harmonique des Jetons
- Identifiez l'archétype du site et la personnalité de la marque.
- Obtenez ou sélectionnez 2 à 3 couleurs de base (par exemple, Primaire
#0A0A0C, Accent#2563EB). - Exécutez le calcul de couleur Oklch 60-30-10 à partir de la Référence 01 pour générer les arbres complets de jetons de conception Clair et Sombre.
- Établissez la hiérarchie typographique à partir de la Référence 02 avec des formules de clamp fluides.
Étape 2 : Schéma de Base de Données & Modélisation Relationnelle
- Dessinez le Diagramme Entité-Relation (ERD) mappant les entités, les clés étrangères et les cardinalités.
- Formulez un schéma normalisé 3NF avec une redondance minimale.
- Sélectionnez le moteur de base de données (PostgreSQL/Supabase vs MySQL vs SQLite) et appliquez les modèles spécifiques au moteur de la Référence 08 ou de la Référence 09.
- Écrivez des migrations DDL idempotentes comprenant UUIDv7,
TIMESTAMPTZ, index JSONB GIN, vues analytiques et politiques de sécurité au niveau des lignes (RLS).
Étape 3 : Échafaudage Backend en Tranches Verticales Découplées
- Échafaudez les tranches de fonctionnalités dans
src/modules/<feature>/conformément à la Référence 07. - Définissez les contrats de validation d'entrée/sortie Zod.
- Écrivez des fonctions de service légères de 10 lignes utilisant des générateurs de requêtes modernes (Drizzle ORM / Prisma).
- Enveloppez les passerelles externes (Stripe, Resend, S3) dans des fichiers d'adaptateur isolés pour garantir un confinement du rayon d'explosion par fichier unique.
Étape 4 : Intégration de la Toile 3D, des Shaders & du Mouvement Cinétique
- Configurez une toile réactive à la fenêtre d'affichage avec React Three Fiber, Drei ou OGL à partir de la Référence 03.
- Implémentez des shaders GLSL personnalisés (nuage de points, eau liquide, réfraction du verre) à partir de la Référence 04.
- Initialisez le défilement fluide Lenis synchronisé avec le ticker GSAP et les ressorts physiques Framer Motion à partir de la Référence 05.
Étape 5 : Composition de Composants UI Sur Mesure
- Assemblez la coque de l'interface utilisateur à l'aide de composants personnalisés de la Référence 06.
- Implémentez des boutons liquides magnétiques, des menus déroulants à ressort rendus par portail, des cartes bento illuminées et des éléments ambiants.
Étape 6 : Intégration de l'Authentification, des Paiements & du Backend
- Connectez l'authentification à l'aide de la Référence 10 (OAuth, Passkeys, RBAC, SAML).
- Intégrez la facturation et les abonnements à l'aide de la Référence 11 (Stripe, Lemon Squeezy, Paddle, PayPal).
- Assurez la gestion des sessions, les webhooks sécurisés et les flux de travail de fond.
Étape 7 : Tests, Assurance Qualité & Benchmarking de Performance
- Écrivez des tests unitaires complets avec Vitest.
- Mettez en place des pipelines de test d'intégration conteneurisés.
- Exécutez des tests de bout en bout multi-appareils avec Playwright.
- Effectuez des tests de charge et de résistance avec k6, conformément à la Référence 18.
Étape 8 : Déploiement, Caching & Surveillance de Production
- Configurez un pipeline de déploiement zéro temps d'arrêt à l'aide de GitHub Actions et de Kubernetes (HPA/VPA) à partir de la Référence 22.
- Activez le cache à plusieurs niveaux à partir de la Référence 20 (Navigateur, CDN, Redis, Base de données).
- Mettez en place une observabilité complète avec OpenTelemetry, Sentry et PostHog à partir de la Référence 23.
4. Protocole d'Audit de Sécurité & de Conformité
Pour l'audit de sécurité et la conformité, consultez et appliquez immédiatement toutes les directives de la Référence 19 avant la mise en production. Les processus suivants sont critiques :
- Vérification de l'Assainissement des Entrées : Assurez-vous que 100 % des points de terminaison d'API utilisent un schéma Zod de validation stricte. Aucune entrée non validée ne doit franchir la limite de l'API.
- Test de Résistance à l'Injection SQL : Vérifiez que toutes les requêtes de base de données utilisent des requêtes paramétrées ou une compilation AST d'ORM. Aucune concaténation de chaîne.
- Audit du Chiffrement : Assurez-vous que tous les jetons, secrets et cookies de session sont chiffrés au repos et en transit (HTTPS/TLS 1.3).
- Vérification de la Politique de Sécurité du Contenu (CSP) : Confirmez qu'une CSP avec des nonces dynamiques par requête est correctement mise en œuvre.
- Analyse de la Vulnérabilité des Dépendances : Exécutez
npm audit/yarn auditou Snyk et corrigez les vulnérabilités critiques.
5. Utilisation du Référentiel de Référence & Navigation
Chaque projet full-stack est exécuté de manière itérative en se référant aux manuels de domaine spécialisés situés dans le dossier ./references/. Pour accéder au contenu de référence spécifique :
- Identification de l'Archétype Visuel : Utilisez la matrice de classification de l'archétype de site dans la section 2, puis référez-vous aux domaines 01-06 pour les composants visuels.
- Architecture Backend & Base de Données : Référez-vous aux domaines 07-09 pour les modèles d'architecture propre, l'isolation des erreurs et la modélisation des bases de données.
- Authentification & Paiements : Domaines 10-11.
- Fonctionnalités Avancées : Domaines 12-17 pour les chatbots IA, les WebSockets, le stockage, les tâches de fond, la recherche et les notifications.
- Qualité & Sécurité : Domaines 18-19 pour les tests, la recherche de bugs et le durcissement de la sécurité.
- Performance & Évolutivité : Domaines 20-21 pour le caching et la limitation de débit.
- Opérations & Déploiement : Domaines 22-23 pour DevOps, Kubernetes et l'observabilité.
En adhérant à cette architecture de connaissances et à ces commandements d'ingénierie, vous produirez systématiquement des applications web full-stack de qualité production, cyber-résilientes et visuellement époustouflantes.
This skill is a comprehensive reference system. For specific implementation details, always refer to the appropriate reference manual. Ce skill est un système de référence complet. Pour les détails d'implémentation spécifiques, référez-vous toujours au manuel de référence approprié.