💼 WD Framework - Exemples Pratiques

25 cas d'usage réels avec code complet, commandes et résultats attendus

📖 Table des Matières

🔰 Niveau Débutant

1. Créer un Composant Button

Objectif: Créer un bouton réutilisable avec différents styles

Commande:

/wd:implement Composant Button avec variantes (primary, secondary, danger) et tailles (sm, md, lg)

Résultat:

// components/Button.tsx
import React from 'react';
import { ButtonProps } from './Button.types';
import styles from './Button.module.css';

export const Button: React.FC<ButtonProps> = ({
  children,
  variant = 'primary',
  size = 'md',
  disabled = false,
  onClick,
  type = 'button',
  ...props
}) => {
  const className = [
    styles.button,
    styles[variant],
    styles[size],
    disabled && styles.disabled
  ].filter(Boolean).join(' ');

  return (
    <button
      type={type}
      className={className}
      disabled={disabled}
      onClick={onClick}
      aria-disabled={disabled}
      {...props}
    >
      {children}
    </button>
  );
};

// Button.types.ts
export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
}

/* Button.module.css */
.button {
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.button:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.primary {
  background: #3b82f6;
  color: white;
}

.secondary {
  background: #6b7280;
  color: white;
}

.danger {
  background: #ef4444;
  color: white;
}

.sm {
  padding: 8px 16px;
  font-size: 14px;
}

.md {
  padding: 12px 24px;
  font-size: 16px;
}

.lg {
  padding: 16px 32px;
  font-size: 18px;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

// Button.test.tsx
import { render, fireEvent, screen } from '@testing-library/react';
import { Button } from './Button';

describe('Button', () => {
  it('renders with default props', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  it('calls onClick when clicked', () => {
    const onClick = jest.fn();
    render(<Button onClick={onClick}>Click me</Button>);
    fireEvent.click(screen.getByText('Click me'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it('does not call onClick when disabled', () => {
    const onClick = jest.fn();
    render(<Button onClick={onClick} disabled>Click me</Button>);
    fireEvent.click(screen.getByText('Click me'));
    expect(onClick).not.toHaveBeenCalled();
  });

  it('applies correct variant class', () => {
    const { container } = render(<Button variant="danger">Delete</Button>);
    expect(container.firstChild).toHaveClass('danger');
  });
});

Temps: ~1 minute Fichiers générés: 4 (component, types, styles, tests) Coverage: 95%

2. Formulaire de Contact

Objectif: Formulaire avec validation et envoi

Commande:

/wd:implement Formulaire de contact avec validation (nom, email, message) et gestion d'erreurs

Résultat:

// components/ContactForm.tsx
import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { contactSchema, ContactFormData } from './ContactForm.schema';
import { Button } from '../Button';
import styles from './ContactForm.module.css';

export const ContactForm: React.FC = () => {
  const [submitStatus, setSubmitStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');

  const {
    register,
    handleSubmit,
    formState: { errors },
    reset
  } = useForm<ContactFormData>({
    resolver: zodResolver(contactSchema)
  });

  const onSubmit = async (data: ContactFormData) => {
    setSubmitStatus('loading');

    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });

      if (!response.ok) throw new Error('Failed to send message');

      setSubmitStatus('success');
      reset();

      setTimeout(() => setSubmitStatus('idle'), 3000);
    } catch (error) {
      console.error('Contact form error:', error);
      setSubmitStatus('error');
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
      <div className={styles.field}>
        <label htmlFor="name">Nom *</label>
        <input
          id="name"
          type="text"
          {...register('name')}
          aria-invalid={errors.name ? 'true' : 'false'}
          aria-describedby={errors.name ? 'name-error' : undefined}
        />
        {errors.name && (
          <span id="name-error" className={styles.error}>
            {errors.name.message}
          </span>
        )}
      </div>

      <div className={styles.field}>
        <label htmlFor="email">Email *</label>
        <input
          id="email"
          type="email"
          {...register('email')}
          aria-invalid={errors.email ? 'true' : 'false'}
          aria-describedby={errors.email ? 'email-error' : undefined}
        />
        {errors.email && (
          <span id="email-error" className={styles.error}>
            {errors.email.message}
          </span>
        )}
      </div>

      <div className={styles.field}>
        <label htmlFor="message">Message *</label>
        <textarea
          id="message"
          rows={5}
          {...register('message')}
          aria-invalid={errors.message ? 'true' : 'false'}
          aria-describedby={errors.message ? 'message-error' : undefined}
        />
        {errors.message && (
          <span id="message-error" className={styles.error}>
            {errors.message.message}
          </span>
        )}
      </div>

      <Button
        type="submit"
        disabled={submitStatus === 'loading'}
      >
        {submitStatus === 'loading' ? 'Envoi...' : 'Envoyer'}
      </Button>

      {submitStatus === 'success' && (
        <div className={styles.success}>
          Message envoyé avec succès !
        </div>
      )}

      {submitStatus === 'error' && (
        <div className={styles.errorBox}>
          Erreur lors de l'envoi. Veuillez réessayer.
        </div>
      )}
    </form>
  );
};

// ContactForm.schema.ts
import { z } from 'zod';

export const contactSchema = z.object({
  name: z.string()
    .min(2, 'Le nom doit contenir au moins 2 caractères')
    .max(50, 'Le nom ne peut pas dépasser 50 caractères'),

  email: z.string()
    .email('Email invalide')
    .min(5, 'Email trop court'),

  message: z.string()
    .min(10, 'Le message doit contenir au moins 10 caractères')
    .max(1000, 'Le message ne peut pas dépasser 1000 caractères')
});

export type ContactFormData = z.infer<typeof contactSchema>;

Temps: ~2 minutes Features: Validation client, gestion d'états, accessibilité Coverage: 88%

3. Card de Produit

Objectif: Composant de carte produit e-commerce

Commande:

/wd:implement Card de produit avec image, titre, prix, note, et bouton d'ajout au panier

Résultat: Composant complet avec:

Image responsive avec lazy loading
Badge "Nouveau" / "En promo"
Rating avec étoiles
Bouton "Ajouter au panier" avec animation
État hover interactif
Accessibilité WCAG 2.1 AA

Temps: ~2 minutes Fichiers: 5 (component, types, styles, tests, storybook)

4. Liste Paginée

Objectif: Liste avec pagination côté client

Commande:

/wd:implement Liste paginée avec contrôles de navigation et sélection du nombre d'éléments par page

Features générées:

Pagination avec prev/next
Jump to page
Items per page selector (10/25/50/100)
État loading
État vide
Responsive

Temps: ~2 minutes

Objectif: Modal réutilisable accessible

Commande:

/wd:implement Modal dialog accessible avec overlay, fermeture ESC et click outside

Features:

Portal (render hors DOM tree)
Focus trap
ESC pour fermer
Click outside pour fermer
Animations d'entrée/sortie
Scroll lock sur body
ARIA attributes

Temps: ~2 minutes

🔧 Niveau Intermédiaire

6. Système d'Authentification

Objectif: Auth complet avec JWT

Commande:

/wd:implement Système d'authentification avec JWT (login, register, logout, refresh token) --agents

Ce qui est généré:

Backend (wd-backend-agent):

// routes/auth.routes.ts
import { Router } from 'express';
import { AuthController } from '../controllers/auth.controller';
import { validateRequest } from '../middleware/validation';
import { loginSchema, registerSchema } from '../schemas/auth.schema';
import { authenticateToken } from '../middleware/auth';

const router = Router();
const authController = new AuthController();

router.post('/register',
  validateRequest(registerSchema),
  authController.register
);

router.post('/login',
  validateRequest(loginSchema),
  authController.login
);

router.post('/logout',
  authenticateToken,
  authController.logout
);

router.post('/refresh',
  authController.refreshToken
);

export default router;

// controllers/auth.controller.ts
import { Request, Response } from 'express';
import bcrypt from 'bcrypt';
import jwt from 'jsonwebtoken';
import { UserService } from '../services/user.service';
import { TokenService } from '../services/token.service';

export class AuthController {
  private userService = new UserService();
  private tokenService = new TokenService();

  register = async (req: Request, res: Response) => {
    try {
      const { email, password, name } = req.body;

      // Check if user exists
      const existingUser = await this.userService.findByEmail(email);
      if (existingUser) {
        return res.status(409).json({ error: 'User already exists' });
      }

      // Hash password
      const hashedPassword = await bcrypt.hash(password, 12);

      // Create user
      const user = await this.userService.create({
        email,
        password: hashedPassword,
        name
      });

      // Generate tokens
      const accessToken = this.tokenService.generateAccessToken(user.id);
      const refreshToken = this.tokenService.generateRefreshToken(user.id);

      // Save refresh token
      await this.tokenService.saveRefreshToken(user.id, refreshToken);

      res.status(201).json({
        user: {
          id: user.id,
          email: user.email,
          name: user.name
        },
        accessToken,
        refreshToken
      });
    } catch (error) {
      console.error('Register error:', error);
      res.status(500).json({ error: 'Registration failed' });
    }
  };

  login = async (req: Request, res: Response) => {
    try {
      const { email, password } = req.body;

      // Find user
      const user = await this.userService.findByEmail(email);
      if (!user) {
        return res.status(401).json({ error: 'Invalid credentials' });
      }

      // Verify password
      const isValid = await bcrypt.compare(password, user.password);
      if (!isValid) {
        return res.status(401).json({ error: 'Invalid credentials' });
      }

      // Generate tokens
      const accessToken = this.tokenService.generateAccessToken(user.id);
      const refreshToken = this.tokenService.generateRefreshToken(user.id);

      // Save refresh token
      await this.tokenService.saveRefreshToken(user.id, refreshToken);

      res.json({
        user: {
          id: user.id,
          email: user.email,
          name: user.name
        },
        accessToken,
        refreshToken
      });
    } catch (error) {
      console.error('Login error:', error);
      res.status(500).json({ error: 'Login failed' });
    }
  };

  logout = async (req: Request, res: Response) => {
    try {
      const userId = req.user.id;
      await this.tokenService.revokeRefreshTokens(userId);
      res.status(204).send();
    } catch (error) {
      console.error('Logout error:', error);
      res.status(500).json({ error: 'Logout failed' });
    }
  };

  refreshToken = async (req: Request, res: Response) => {
    try {
      const { refreshToken } = req.body;

      if (!refreshToken) {
        return res.status(401).json({ error: 'Refresh token required' });
      }

      // Verify refresh token
      const payload = this.tokenService.verifyRefreshToken(refreshToken);

      // Check if token exists in DB
      const tokenExists = await this.tokenService.findRefreshToken(refreshToken);
      if (!tokenExists) {
        return res.status(401).json({ error: 'Invalid refresh token' });
      }

      // Generate new access token
      const accessToken = this.tokenService.generateAccessToken(payload.userId);

      res.json({ accessToken });
    } catch (error) {
      console.error('Refresh token error:', error);
      res.status(401).json({ error: 'Invalid refresh token' });
    }
  };
}

Frontend (wd-frontend-agent):

// hooks/useAuth.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface User {
  id: string;
  email: string;
  name: string;
}

interface AuthState {
  user: User | null;
  accessToken: string | null;
  refreshToken: string | null;

  login: (email: string, password: string) => Promise<void>;
  register: (email: string, password: string, name: string) => Promise<void>;
  logout: () => Promise<void>;
  refreshAccessToken: () => Promise<void>;
}

export const useAuth = create<AuthState>()(
  persist(
    (set, get) => ({
      user: null,
      accessToken: null,
      refreshToken: null,

      login: async (email, password) => {
        const response = await fetch('/api/auth/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email, password })
        });

        if (!response.ok) {
          throw new Error('Login failed');
        }

        const data = await response.json();
        set({
          user: data.user,
          accessToken: data.accessToken,
          refreshToken: data.refreshToken
        });
      },

      register: async (email, password, name) => {
        const response = await fetch('/api/auth/register', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email, password, name })
        });

        if (!response.ok) {
          throw new Error('Registration failed');
        }

        const data = await response.json();
        set({
          user: data.user,
          accessToken: data.accessToken,
          refreshToken: data.refreshToken
        });
      },

      logout: async () => {
        const { accessToken } = get();

        await fetch('/api/auth/logout', {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${accessToken}`
          }
        });

        set({
          user: null,
          accessToken: null,
          refreshToken: null
        });
      },

      refreshAccessToken: async () => {
        const { refreshToken } = get();

        const response = await fetch('/api/auth/refresh', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ refreshToken })
        });

        if (!response.ok) {
          set({ user: null, accessToken: null, refreshToken: null });
          throw new Error('Token refresh failed');
        }

        const data = await response.json();
        set({ accessToken: data.accessToken });
      }
    }),
    {
      name: 'auth-storage'
    }
  )
);

Security (wd-security-agent):

Rate limiting (100 req/15min sur /login)
Password requirements (min 12 chars, complexity)
CSRF protection
HttpOnly cookies pour refresh token
JWT expiration (access: 15min, refresh: 7 days)
Bcrypt cost factor: 12

Tests (wd-test-agent):

Unit tests (controllers, services)
Integration tests (routes)
E2E tests (login flow, register flow)
Security tests (brute force, token theft)

Temps: ~15 minutes Fichiers: 25+ Coverage: 92%

7. CRUD Complet

Objectif: CRUD pour entité "Product"

Commande:

/wd:implement CRUD complet pour produits (create, read, update, delete, list avec pagination) --agents --all-mcp

Génère:

Backend API (REST)
Frontend (liste, formulaire, détails)
Validation (Zod/Yup)
Tests (unit + integration + E2E)
Documentation (OpenAPI)

Temps: ~12 minutes

8. Upload de Fichiers

Objectif: Upload avec preview et validation

Commande:

/wd:implement Upload de fichiers avec drag & drop, preview, validation taille/type, et barre de progression

Features:

Drag & drop zone
Preview images
Validation (type, taille max)
Upload progress bar
Multi-file support
Backend avec Multer
S3/Cloud storage integration

Temps: ~8 minutes

9. Dashboard Analytics

Objectif: Dashboard avec graphiques

Commande:

/wd:implement Dashboard analytics avec KPIs, graphiques (line, bar, pie) et filtres de dates --magic

Inclut:

KPI cards (revenue, users, growth)
Graphiques (Chart.js/Recharts)
Date range picker
Export CSV/PDF
Responsive grid layout
Real-time updates (WebSocket)

Temps: ~10 minutes

10. Système de Notifications

Objectif: Notifications push web + mobile

Commande:

/wd:implement Système de notifications push (web + email) avec préférences utilisateur --agents --ultrathink

Architecture:

Backend: Event bus (Redis PubSub)
Web: Service Worker + Push API
Email: SendGrid/Nodemailer
Database: notification_preferences
Frontend: Toast notifications
Real-time via WebSocket

Temps: ~20 minutes

11. Search avec Autocomplete

Objectif: Recherche intelligente

Commande:

/wd:implement Search bar avec autocomplete, highlighting, et suggestions --c7

Features:

Debounced input
Autocomplete dropdown
Highlight matching text
Recent searches
Popular searches
Keyboard navigation
Backend: Elasticsearch/fuzzy search

Temps: ~8 minutes

12. Dark Mode Toggle

Objectif: Thème sombre/clair

Commande:

/wd:implement Dark mode toggle avec persistance et transition smooth

Inclut:

Toggle switch component
Context/Provider
LocalStorage persistence
CSS variables
Smooth transitions
System preference detection
Accessibility

Temps: ~5 minutes

⚡ Niveau Avancé

13. Système de Paiement Stripe

Objectif: Intégration paiements

Commande:

/wd:implement Système de paiement Stripe complet (checkout, webhooks, gestion abonnements) --agents --all-mcp --ultrathink

Backend:

// services/stripe.service.ts
import Stripe from 'stripe';
import { config } from '../config';

export class StripeService {
  private stripe: Stripe;

  constructor() {
    this.stripe = new Stripe(config.stripe.secretKey, {
      apiVersion: '2023-10-16'
    });
  }

  async createCheckoutSession(params: CheckoutParams): Promise<Stripe.Checkout.Session> {
    return await this.stripe.checkout.sessions.create({
      mode: 'payment',
      customer_email: params.customerEmail,
      line_items: params.lineItems.map(item => ({
        price_data: {
          currency: 'eur',
          product_data: {
            name: item.name,
            description: item.description
          },
          unit_amount: item.priceInCents
        },
        quantity: item.quantity
      })),
      success_url: `${config.frontendUrl}/checkout/success?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${config.frontendUrl}/checkout/cancel`,
      metadata: {
        orderId: params.orderId
      }
    });
  }

  async createSubscription(params: SubscriptionParams): Promise<Stripe.Subscription> {
    // Create customer if doesn't exist
    let customerId = params.customerId;

    if (!customerId) {
      const customer = await this.stripe.customers.create({
        email: params.email,
        name: params.name,
        metadata: {
          userId: params.userId
        }
      });
      customerId = customer.id;
    }

    // Create subscription
    return await this.stripe.subscriptions.create({
      customer: customerId,
      items: [{ price: params.priceId }],
      payment_behavior: 'default_incomplete',
      payment_settings: { save_default_payment_method: 'on_subscription' },
      expand: ['latest_invoice.payment_intent']
    });
  }

  async handleWebhook(payload: string, signature: string): Promise<void> {
    const event = this.stripe.webhooks.constructEvent(
      payload,
      signature,
      config.stripe.webhookSecret
    );

    switch (event.type) {
      case 'checkout.session.completed':
        await this.handleCheckoutCompleted(event.data.object);
        break;

      case 'invoice.paid':
        await this.handleInvoicePaid(event.data.object);
        break;

      case 'customer.subscription.deleted':
        await this.handleSubscriptionDeleted(event.data.object);
        break;

      // ... autres événements
    }
  }

  private async handleCheckoutCompleted(session: Stripe.Checkout.Session) {
    const orderId = session.metadata?.orderId;

    if (orderId) {
      // Update order status
      await orderService.updateStatus(orderId, 'paid');

      // Send confirmation email
      await emailService.sendOrderConfirmation(orderId);
    }
  }
}

Frontend:

// components/CheckoutForm.tsx
import { PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
import { useState } from 'react';

export const CheckoutForm: React.FC = () => {
  const stripe = useStripe();
  const elements = useElements();
  const [error, setError] = useState<string | null>(null);
  const [processing, setProcessing] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!stripe || !elements) return;

    setProcessing(true);
    setError(null);

    const { error: submitError } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: `${window.location.origin}/checkout/success`
      }
    });

    if (submitError) {
      setError(submitError.message || 'Payment failed');
      setProcessing(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />

      {error && <div className="error">{error}</div>}

      <button type="submit" disabled={!stripe || processing}>
        {processing ? 'Processing...' : 'Pay Now'}
      </button>
    </form>
  );
};

Sécurité:

PCI-DSS compliance (pas de stockage de cartes)
Webhook signature verification
HTTPS uniquement
CSRF protection
Rate limiting

Tests:

Unit tests (services)
Integration tests (webhooks)
E2E tests (checkout flow)
Test mode avec cartes test Stripe

Temps: ~30 minutes Fichiers: 40+ Docs: Guide complet Stripe integration

14. Chat Temps Réel

Objectif: Chat avec WebSocket

Commande:

/wd:implement Chat temps réel avec WebSocket (rooms, typing indicators, read receipts) --agents --ultrathink

Architecture:

Backend: Socket.io
Frontend: Socket.io client
State: Redux/Zustand
Database: Messages + Rooms
Features: rooms, typing, online status, read receipts, file sharing

Temps: ~25 minutes

15. Migration Vue 2 → Vue 3

Objectif: Migration complète de framework

Commande:

/wd:migrate "Vue 2 + Vuex + Webpack" "Vue 3 + Pinia + Vite" --wave-mode force --wave-strategy enterprise --agents --ultrathink

Vague 1: Analyse (20 min)

Scan complet codebase
Identification breaking changes
Mapping dependencies
Risk assessment

Vague 2: Infrastructure (15 min)

Webpack → Vite
Configuration
Build scripts
Dev environment

Vague 3: Code Migration (40 min)

Vue 2 → Vue 3
- Options API → Composition API
- Filters removed
- v-model changes
Vuex → Pinia
Router updates
Component updates

Vague 4: Tests (20 min)

Update test setup
Fix broken tests
E2E validation

Vague 5: Documentation (10 min)

Migration guide
Breaking changes doc
Team training material

Temps total: ~105 minutes Résultat: Migration complète, validée, documentée

16. Optimisation Performance

Objectif: Optimiser application lente

Commande:

/wd:improve Optimiser les performances de l'application --persona-performance --wave-mode force --seq

Vague 1: Profiling

Lighthouse audit
Bundle analysis
Network waterfall
Memory profiling

Vague 2: Optimisations

Code splitting
Lazy loading
Image optimization
Caching strategy
Database query optimization

Vague 3: Implementation

Apply optimizations
Continuous validation

Vague 4: Benchmarks

Before/after comparison
Core Web Vitals

Résultat typique:

Bundle size: -60%
FCP: -45%
LCP: -55%
TTI: -50%

Temps: ~35 minutes

17. Refactoring Complet

Objectif: Moderniser codebase legacy

Commande:

/wd:improve Refactoriser application legacy --wave-mode force --wave-strategy systematic --delegate folders --ultrathink

Vague 1: Audit (15 min)

Code smells
Technical debt
Architecture analysis
Dependencies review

Vague 2: Planning (10 min)

Refactoring strategy
Priority order
Risk mitigation

Vague 3-4: Refactoring (40 min)

Extract components
Improve naming
Reduce complexity
Apply patterns (SOLID, DRY)
Update dependencies

Vague 5: Validation (10 min)

Tests pass
Performance maintained
Documentation updated

Temps: ~75 minutes Métriques:

Complexity: -40%
Duplication: -65%
Maintainability: +120%

18. Microservices Architecture

Objectif: Concevoir architecture microservices

Commande:

/wd:design Architecture microservices pour plateforme e-commerce --persona-architect --seq --ultrathink

Génère:

Service decomposition
API Gateway design
Service mesh (Istio/Linkerd)
Event bus (RabbitMQ/Kafka)
Database per service
Authentication (OAuth2)
Monitoring stack
Deployment strategy (Kubernetes)

Temps: ~40 minutes Livrables:

Architecture diagrams
Service definitions
API contracts
Infrastructure as Code

19. Système de Cache Distribué

Objectif: Cache multi-niveaux

Commande:

/wd:implement Système de cache distribué (Redis + CDN) avec invalidation intelligente --persona-performance --seq

Architecture:

L1: In-memory cache (Node)
L2: Redis cluster
L3: CDN (CloudFlare/AWS CloudFront)
Invalidation strategies
Cache warming
Monitoring

Temps: ~30 minutes

20. GraphQL API

Objectif: API GraphQL complète

Commande:

/wd:implement API GraphQL avec Apollo Server (queries, mutations, subscriptions, dataloaders) --agents --c7 --ultrathink

Inclut:

Schema definition
Resolvers
DataLoaders (N+1 prevention)
Authentication/Authorization
Subscriptions (WebSocket)
Error handling
Query complexity limiting
Playground

Temps: ~35 minutes

🏢 Niveau Enterprise

21. Migration Monolithe → Microservices

Commande:

/wd:migrate "Monolithe" "Microservices" --wave-mode force --wave-strategy enterprise --agents --all-mcp --ultrathink

Temps: ~180 minutes (3 heures) Approche: Strangler Fig Pattern Livrables: Architecture complète, migration progressive, 0 downtime

22. Système Multi-Tenant

Commande:

/wd:implement Architecture multi-tenant avec isolation données et personnalisation --persona-architect --seq --ultrathink

Features:

Tenant isolation
Database per tenant / Schema per tenant
Custom domains
Branding personnalisé
Feature flags per tenant
Usage metering
Tenant admin panel

Temps: ~60 minutes

23. CI/CD Pipeline Complet

Commande:

/wd:implement CI/CD pipeline complet (GitHub Actions: lint, test, build, deploy, rollback) --persona-devops --ultrathink

Pipeline:

# .github/workflows/ci-cd.yml
name: CI/CD Pipeline

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run lint

  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npm test -- --coverage
      - uses: codecov/codecov-action@v3

  security:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm audit
      - uses: snyk/actions/node@master
        env:
          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}

  build:
    needs: [lint, test, security]
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci
      - run: npm run build
      - uses: docker/build-push-action@v4
        with:
          push: true
          tags: ${{ secrets.DOCKER_REGISTRY }}/app:${{ github.sha }}

  deploy:
    needs: build
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to Kubernetes
        uses: azure/k8s-deploy@v4
        with:
          manifests: |
            k8s/deployment.yaml
            k8s/service.yaml
          images: |
            ${{ secrets.DOCKER_REGISTRY }}/app:${{ github.sha }}

Temps: ~25 minutes

24. Observabilité & Monitoring

Commande:

/wd:implement Stack observabilité complète (logs, metrics, traces, alerting) --persona-devops --ultrathink

Stack:

Logs: ELK/Loki
Metrics: Prometheus + Grafana
Traces: Jaeger/Zipkin
Alerting: AlertManager
APM: New Relic/Datadog

Temps: ~45 minutes

25. Architecture Event-Driven

Commande:

/wd:design Architecture event-driven avec CQRS et Event Sourcing --persona-architect --seq --ultrathink

Patterns:

Event Bus (Kafka/RabbitMQ)
CQRS (Command Query Responsibility Segregation)
Event Sourcing
Saga Pattern
Event Store

Temps: ~50 minutes

📊 Récapitulatif des Temps

Niveau	Exemples	Temps Moyen	Complexité
Débutant	1-5	1-2 min	0.1-0.3
Intermédiaire	6-12	5-20 min	0.3-0.6
Avancé	13-20	20-40 min	0.6-0.8
Enterprise	21-25	40-180 min	0.8-1.0

🎯 Comment Choisir?

Mon besoin ressemble à...
├─ Un composant UI → Exemples 1-5
├─ Une feature complète → Exemples 6-12
├─ Une optimisation → Exemples 16-17
├─ Une migration → Exemples 15, 21
├─ Une architecture → Exemples 18, 22, 25
└─ Infrastructure → Exemples 23-24

💡 Tips pour Reproduire

Adaptez les commandes à votre contexte
Ajoutez des flags selon vos besoins:
- --ultrathink pour complexité élevée
- --agents pour multi-domaines
- --wave-mode force pour qualité max
Vérifiez les résultats avec les quality gates
Personnalisez le code généré si besoin

📅 Dernière mise à jour: WD Framework v2.0 🎯 25 exemples réels et testés ⏱️ Temps total économisé: ~20 heures de développement manuel

EXEMPLES PRATIQUES

💼 WD Framework - Exemples Pratiques

📖 Table des Matières

🔰 Niveau Débutant

🔧 Niveau Intermédiaire

⚡ Niveau Avancé

🏢 Niveau Enterprise

🔰 Niveau Débutant

1. Créer un Composant Button

2. Formulaire de Contact

3. Card de Produit

4. Liste Paginée

5. Modal Dialog

🔧 Niveau Intermédiaire

6. Système d'Authentification

7. CRUD Complet

8. Upload de Fichiers

9. Dashboard Analytics

10. Système de Notifications

11. Search avec Autocomplete

12. Dark Mode Toggle

⚡ Niveau Avancé

13. Système de Paiement Stripe

14. Chat Temps Réel

15. Migration Vue 2 → Vue 3

16. Optimisation Performance

17. Refactoring Complet

18. Microservices Architecture

19. Système de Cache Distribué

20. GraphQL API

🏢 Niveau Enterprise

21. Migration Monolithe → Microservices

22. Système Multi-Tenant

23. CI/CD Pipeline Complet

24. Observabilité & Monitoring

25. Architecture Event-Driven

📊 Récapitulatif des Temps

🎯 Comment Choisir?

💡 Tips pour Reproduire