Générateur automatisé de sites web professionnels pour artisans, propulsé par l'IA Claude d'Anthropic.

• À propos
• Fonctionnalités
• Technologies
• Installation
• Configuration
• Utilisation
• API
• Scripts
• Structure du projet
• Développement
• Déploiement
• Contribution

Ce projet permet de générer automatiquement des sites web complets pour artisans (plombiers, électriciens, maçons, etc.) en quelques clics. L'utilisateur remplit un simple formulaire et l'IA génère :

• Un site de 6 pages (Accueil, À propos, Services, Tarifs, Contact, Mentions légales)
• Du contenu SEO optimisé et personnalisé
• Des métadonnées et données structurées (schema.org)
• Un fichier ZIP téléchargeable
• Option de déploiement automatique sur Vercel

• ✅ Formulaire de génération simple et intuitif
• ✅ Génération de contenu via Claude API
• ✅ Templates de pages modernes et responsives
• ✅ SEO optimisé (meta tags, structured data, sitemap)
• ✅ Export ZIP du site complet
• ✅ Personnalisation des couleurs
• ✅ 10+ activités d'artisans supportées

• ⏳ Génération d'images par IA
• ⏳ Déploiement Vercel automatique
• ⏳ Dashboard de gestion des sites
• ⏳ Édition du contenu généré
• ⏳ Preview en temps réel

• Framework : Next.js 14 (App Router)
• Langage : TypeScript
• Styling : Tailwind CSS
• IA : Claude API (Anthropic)
• Archivage : Archiver
• Déploiement : Vercel

• Node.js 18+
• npm, yarn ou pnpm
• Clé API Anthropic (Claude)

1. Cloner le projet :

git clone <url-du-repo>
cd mini-site-generator

2. Installer les dépendances :

npm install
# ou
pnpm install
# ou
yarn install

3. Configurer les variables d'environnement :

cp .env.example .env

Éditer .env et ajouter votre clé API Anthropic :

ANTHROPIC_API_KEY=sk-ant-xxxxx

4. Lancer le serveur de développement :

npm run dev

5. Ouvrir http://localhost:3000

Créer un fichier .env à la racine du projet :

# Claude API (REQUIS)
ANTHROPIC_API_KEY=sk-ant-xxxxx
CLAUDE_MODEL=claude-3-5-sonnet-20241022

# Vercel (Optionnel)
VERCEL_TOKEN=your_token

# Application
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Limites (Optionnel)
MAX_SITES_PER_DAY=100

1. Modifier types/generator.ts :

export type ActivityType =
  | 'plombier'
  | 'votre-nouvelle-activité'
  | ...

2. Ajouter les services suggérés dans components/FormGenerator.tsx :

const COMMON_SERVICES: Record<ActivityType, string[]> = {
  'votre-nouvelle-activité': ['Service 1', 'Service 2', ...],
  ...
}

Les templates se trouvent dans lib/templates/. Chaque template exporte un objet PageTemplate avec :

• generateContent() : génère le HTML de la page
• getSEO() : génère les métadonnées SEO
• getStructuredData() : génère les données structurées

Exemple :

// lib/templates/ma-page.ts
export const maPageTemplate: PageTemplate = {
  generateContent(data, aiContent) {
    // Votre HTML ici
  },
  getSEO(data, aiContent) {
    // Vos métadonnées
  },
  getStructuredData(data) {
    // Vos structured data
  }
};

1. Accéder à http://localhost:3000
2. Remplir le formulaire :
   • Informations de base (nom, activité, ville)
   • Services proposés
   • Coordonnées de contact
   • Personnalisation (couleurs, style)
3. Cliquer sur "Générer mon site web"
4. Télécharger le ZIP ou prévisualiser

Génère un site complet.

Requête :

{
  "formData": {
    "name": "Jean Dupont",
    "activity": "plombier",
    "city": "Paris",
    "services": ["Dépannage", "Installation"],
    "contact": {
      "phone": "06 12 34 56 78",
      "email": "contact@example.com"
    },
    "colors": {
      "primary": "#0ea5e9",
      "secondary": "#d946ef"
    },
    "style": "modern"
  },
  "options": {
    "generateImages": false,
    "autoDeployVercel": false
  }
}

Réponse :

{
  "success": true,
  "clientId": "site-1234567890-abc123",
  "zipUrl": "/downloads/site-1234567890-abc123.zip",
  "previewUrl": "/generated/site-1234567890-abc123/index.html",
  "vercelUrl": "https://mon-site.vercel.app"
}

Génère des suggestions d'images (à venir).

npm run dev              # Lancer le serveur de développement
npm run build            # Build de production
npm run start            # Lancer le serveur de production
npm run type-check       # Vérification TypeScript
npm run lint             # Linter ESLint
npm run format           # Formatage avec Prettier

npm run test             # Lancer tous les tests (mode watch)
npm run test:unit        # Tests unitaires uniquement
npm run test:integration # Tests d'intégration uniquement
npm run test:e2e         # Tests End-to-End (Playwright)
npm run test:coverage    # Tests avec rapport de couverture
npm run test:watch       # Tests en mode watch
npm run test:ui          # Interface UI pour les tests

Les tests unitaires testent les fonctions isolées:

npm run test:unit

Exemple de test:

// tests/unit/lib/generator.test.ts
import { generateClientId } from '@/lib/generator';

it('should generate unique ID', () => {
  const id = generateClientId();
  expect(id).toMatch(/^site-\d+-[a-z0-9]+$/);
});

Les tests d'intégration testent les API routes:

npm run test:integration

Les tests End-to-End testent le flux complet avec Playwright:

npm run test:e2e

Les tests E2E lancent automatiquement le serveur de développement.

Pour débugger les tests E2E:

npx playwright test --debug
npx playwright test --ui

Générer un rapport de couverture complet:

npm run test:coverage

Le rapport HTML est généré dans coverage/index.html.

Seuils de couverture requis:

• Statements: 90%
• Branches: 85%
• Functions: 90%
• Lines: 90%

Visualiser le rapport:

# Ouvrir le rapport HTML
open coverage/index.html  # macOS
xdg-open coverage/index.html  # Linux
start coverage/index.html  # Windows

La documentation est générée automatiquement depuis les commentaires JSDoc:

npm run docs:generate

La documentation générée se trouve dans docs-autogen/.

Visualiser la documentation:

cd docs-autogen
npx serve

La documentation complète se trouve dans /docs:

• ARCHITECTURE.md - Architecture technique détaillée
• DEVELOPMENT_GUIDE.md - Guide complet pour développeurs
• CONTRIBUTING.md - Guide de contribution
• TESTING_STRATEGY.md - Stratégie de tests
• SECURITY.md - Politique de sécurité
• DEPLOYMENT.md - Guide de déploiement
• SCALABILITY.md - Architecture scalable
• MAINTENANCE.md - Maintenance et opérations

npm run create-zip <clientId>       # Créer un ZIP manuellement
npm run deploy-vercel <clientId>    # Déployer sur Vercel manuellement

mini-site-generator/
├── app/                       # Next.js App Router
│   ├── api/
│   │   └── generate-site/     # API de génération
│   ├── preview/[clientId]/    # Page de prévisualisation
│   ├── generated/             # Sites générés (gitignored)
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   └── FormGenerator.tsx      # Formulaire principal
├── lib/                       # Logique métier
│   ├── claude-api.ts          # Intégration Claude
│   ├── generator.ts           # Orchestrateur principal
│   ├── seo.ts                 # Utilitaires SEO
│   ├── templates/             # Templates de pages
│   │   ├── base.ts
│   │   ├── home.ts
│   │   ├── about.ts
│   │   ├── services.ts
│   │   ├── pricing.ts
│   │   ├── contact.ts
│   │   └── legal.ts
│   └── utils/
│       ├── zip.ts             # Création ZIP
│       ├── cleanup.ts         # Nettoyage automatique
│       └── vercel.ts          # Déploiement Vercel
├── tests/                     # Tests professionnels
│   ├── unit/                  # Tests unitaires (60%)
│   │   ├── lib/
│   │   └── components/
│   ├── integration/           # Tests d'intégration (30%)
│   ├── e2e/                   # Tests E2E (10%)
│   ├── regression/            # Tests de non-régression
│   ├── security/              # Tests de sécurité
│   ├── fixtures/              # Données de test
│   └── setup.ts               # Configuration globale
├── docs/                      # Documentation complète
│   ├── ARCHITECTURE.md
│   ├── DEVELOPMENT_GUIDE.md
│   ├── CONTRIBUTING.md
│   ├── TESTING_STRATEGY.md
│   ├── SECURITY.md
│   ├── DEPLOYMENT.md
│   ├── SCALABILITY.md
│   └── MAINTENANCE.md
├── docs-autogen/              # Documentation générée (TypeDoc)
├── scripts/
│   ├── create-zip.ts
│   └── deploy-vercel.ts
├── types/                     # Types TypeScript
│   ├── generator.ts
│   ├── templates.ts
│   └── api.ts
├── .github/                   # CI/CD et templates
│   ├── workflows/
│   │   ├── ci.yml             # Tests automatiques
│   │   └── deploy.yml         # Déploiement
│   ├── ISSUE_TEMPLATE/
│   └── PULL_REQUEST_TEMPLATE.md
├── public/
│   └── downloads/             # ZIPs téléchargeables (gitignored)
├── coverage/                  # Rapports de couverture (gitignored)
├── vitest.config.ts           # Configuration Vitest
├── playwright.config.ts       # Configuration Playwright
├── typedoc.json              # Configuration TypeDoc
├── CONVENTIONS.md            # Conventions de code
├── AI_HANDOVER.md            # Guide pour Claude Code AI
├── context.md                # Architecture complète
└── README.md

Le projet suit des standards professionnels stricts:

• ✅ TypeScript strict mode : Type-safety complet
• ✅ ESLint : Linting automatique
• ✅ Prettier : Formatage cohérent
• ✅ Tests : Couverture >= 90%
• ✅ Documentation : Complète et à jour
• ✅ Conventional Commits : Messages normalisés

Chaque Pull Request déclenche automatiquement:

1. Type Checking : Vérification TypeScript
2. Linting : ESLint sur tout le code
3. Tests : Tous les tests (unit + integration + E2E)
4. Coverage : Vérification >= 90%
5. Build : Compilation réussie
6. Security : npm audit + secret scanning

Les tests tournent sur Node.js 18 et 20 pour garantir la compatibilité.

1. Créer un fichier dans lib/templates/
2. Implémenter l'interface PageTemplate
3. Exporter dans lib/templates/index.ts
4. Utiliser dans lib/generator.ts

Le prompt de génération se trouve dans lib/claude-api.ts :

function buildContentGenerationPrompt(formData: FormData): string {
  // Modifier le prompt ici
}

# Développement
npm run dev

# Build de production
npm run build

# Lancer la version de production
npm run start

1. Créer un compte sur Vercel
2. Importer le projet GitHub
3. Configurer les variables d'environnement :
   • ANTHROPIC_API_KEY
4. Déployer

Le projet peut être déployé sur toute plateforme supportant Next.js :

• Netlify
• Railway
• Render
• AWS Amplify

Nous accueillons les contributions! Consultez CONTRIBUTING.md pour le guide complet.

1. Fork le projet
2. Clone votre fork
3. Branch : git checkout -b feature/ma-fonctionnalite
4. Develop en suivant les conventions
5. Test : npm run test && npm run test:coverage
6. Lint : npm run lint && npm run type-check
7. Commit : Messages Conventional Commits
8. Push : git push origin feature/ma-fonctionnalite
9. PR : Ouvrir une Pull Request avec le template

Format obligatoire:

type(scope): description courte

feat: Nouvelle fonctionnalité
fix: Correction de bug
docs: Documentation
test: Tests
refactor: Refactorisation
chore: Maintenance

Exemples:

git commit -m "feat(generator): add PDF export support"
git commit -m "fix(api): handle missing contact fields"
git commit -m "docs: update installation guide"

• Tests passent : npm run test
• Coverage >= 90% : npm run test:coverage
• Lint OK : npm run lint
• Type-check OK : npm run type-check
• Build OK : npm run build
• Documentation à jour
• Commit messages Conventional
• Pas de secrets dans le code

• TypeScript : Strict mode, pas de any
• Nommage : camelCase (variables), PascalCase (types/composants)
• Imports : Ordre: externe > interne > types
• Tests : TDD recommandé, AAA pattern
• Documentation : JSDoc pour les fonctions complexes

Voir CONVENTIONS.md pour les détails complets.

MIT

Pour toute question :

• Consulter context.md pour l'architecture
• Ouvrir une issue sur GitHub
• Contacter l'équipe de développement

Dernière mise à jour : 2025-11-15 Version : 1.0.0 (Industrialized) Status : Production Ready ✅

Stack Complète:

• Tests: Vitest + Playwright
• Coverage: >= 90% requis
• CI/CD: GitHub Actions
• Documentation: TypeDoc + Markdown
• Quality: ESLint + Prettier + TypeScript strict