Créer un SaaS avec IA : Vibe Coding Full-Stack avec Claude Code

Construire un SaaS complet avec Claude Code : du zéro au déploiement

Le vibe coding a démocratisé la création d'applications. Mais construire un vrai SaaS — avec authentification, base de données, paiement et déploiement — reste un défi qui nécessite une approche structurée. Dans ce guide, nous allons construire une application SaaS complète en utilisant Claude Code comme copilote de développement.

L'objectif : passer d'une idée à une application fonctionnelle déployée en production, en quelques heures au lieu de plusieurs semaines.

Sommaire

Prérequis recommandés

Avant de créer votre SaaS avec le vibe coding, familiarisez-vous avec :

La stack technique idéale pour un SaaS en 2026

Avant de coder, il faut choisir les bons outils. Voici la stack que nous recommandons pour maximiser la productivité avec Claude Code :

Cette stack est parfaitement supportée par Claude Code qui connaît en profondeur chacune de ces technologies.

Phase 1 : Initialisation du projet

Créer le projet avec Claude Code

Ouvrez votre terminal et lancez Claude Code :

# Créer le répertoire du projet
mkdir mon-saas && cd mon-saas

# Lancer Claude Code
claude

# Donner l'instruction initiale
> Initialise un projet Next.js 16 avec TypeScript, Tailwind CSS 4,
  Prisma avec PostgreSQL, et shadcn/ui. Configure ESLint et Prettier.
  Crée un CLAUDE.md avec les conventions du projet.

Claude Code va :

Le fichier CLAUDE.md : votre contrat avec l'IA

Le CLAUDE.md est crucial pour la qualité du code produit. Voici un exemple optimisé pour un projet SaaS :

# Mon SaaS - Conventions

## Stack
- Next.js 16 App Router, TypeScript strict
- Prisma ORM avec PostgreSQL
- Tailwind CSS 4 + shadcn/ui
- NextAuth v5 pour l'authentification

## Conventions de code
- Composants React : fonction fléchée + export nommé
- Server Components par défaut, "use client" uniquement si nécessaire
- API routes dans /app/api/ avec validation Zod
- Erreurs gérées avec des error boundaries

## Structure
/src/app - Pages et routes
/src/components - Composants réutilisables
/src/lib - Utilitaires et configurations
/prisma - Schéma et migrations

## Commandes
- npm run dev : serveur de développement
- npm run build : build de production
- npx prisma migrate dev : appliquer les migrations

Phase 2 : Base de données et modèles

Définir le schéma Prisma

Demandez à Claude Code de créer votre schéma de données :

> Crée un schéma Prisma pour un SaaS de gestion de projets avec :
  - Users (email, name, role, subscription plan)
  - Teams (name, members)
  - Projects (name, description, status, team)
  - Tasks (title, description, status, assignee, priority, due date)
  - Subscriptions (plan, status, stripe customer ID, stripe subscription ID)

Claude Code génère le schéma complet avec les relations, les index et les enum :

model User {
  id            String    @id @default(cuid())
  email         String    @unique
  name          String?
  role          Role      @default(MEMBER)
  teams         TeamMember[]
  tasks         Task[]
  subscription  Subscription?
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt
}

enum Role {
  ADMIN
  MEMBER
}

enum SubscriptionPlan {
  FREE
  PRO
  ENTERPRISE
}

Appliquer les migrations

> Applique la migration Prisma et génère le client

Claude Code exécute npx prisma migrate dev --name init et vérifie que tout est en ordre.

Phase 3 : Authentification

Configurer NextAuth v5

L'authentification est souvent la partie la plus complexe. Avec Claude Code, elle se configure en une instruction :

> Configure NextAuth v5 avec :
  - Provider Google OAuth
  - Provider email (magic link) via Resend
  - Adapter Prisma pour stocker les sessions en base
  - Middleware pour protéger les routes /dashboard/*
  - Pages de login/signup personnalisées avec notre design system

Claude Code crée tous les fichiers nécessaires : auth.ts, middleware.ts, les pages de connexion, et met à jour le schéma Prisma avec les tables de session.

Protéger les routes API

> Crée un helper withAuth pour les API routes qui vérifie la session
  et renvoie une 401 si l'utilisateur n'est pas connecté.
  Ajoute aussi un helper withRole pour les routes admin.

Phase 4 : Fonctionnalités métier

Le CRUD principal

C'est ici que Claude Code brille vraiment. Pour chaque entité, demandez :

> Crée le CRUD complet pour Projects :
  - Server Components pour la liste et le détail
  - Server Actions pour create, update, delete
  - Formulaires avec validation Zod
  - Composants UI avec shadcn (Table, Dialog, Form)
  - Gestion des erreurs et loading states
  - Pagination côté serveur

Claude Code génère en une seule passe :

Utiliser les sous-agents pour paralléliser

Pour aller plus vite, utilisez les [Agent Teams](/blog/claude-code-agent-teams) :

> Utilise des sous-agents pour créer en parallèle :
  - Agent 1 : CRUD des Projects
  - Agent 2 : CRUD des Tasks
  - Agent 3 : Gestion des Teams et membres
  - Agent 4 : Dashboard avec métriques

Les sous-agents travaillent chacun dans leur worktree isolé, puis les résultats sont fusionnés automatiquement.

Phase 5 : Système de paiement

Intégrer Stripe

Le paiement est un point critique. Voici comment l'aborder avec Claude Code :

> Intègre Stripe pour la gestion des abonnements :
  - 3 plans : Free, Pro (29€/mois), Enterprise (99€/mois)
  - Page de pricing avec comparatif des features
  - Checkout Session pour l'abonnement
  - Webhook pour gérer les événements (subscription.created,
    subscription.updated, subscription.deleted, invoice.paid)
  - Customer portal pour gérer son abonnement
  - Middleware qui vérifie le plan de l'utilisateur pour les features premium

Points d'attention pour le paiement

Claude Code connaît les bonnes pratiques Stripe, mais vérifiez toujours :

Phase 6 : Dashboard et interface

Créer le dashboard

> Crée un dashboard admin avec :
  - Sidebar responsive avec navigation
  - Page overview : métriques clés (users, revenue, projects actifs)
  - Graphiques avec Recharts (revenue mensuelle, croissance users)
  - Table des dernières inscriptions
  - Notifications en temps réel

Optimiser l'UX avec les Server Components

Un avantage de Next.js 16 : les Server Components chargent les données côté serveur, éliminant les loading spinners. Claude Code les utilise par défaut :

// app/dashboard/page.tsx - Server Component par défaut
export default async function DashboardPage() {
  const metrics = await getMetrics();
  const recentUsers = await getRecentUsers();

  return (
    <div className="grid gap-6">
      <MetricsCards metrics={metrics} />
      <RecentUsersTable users={recentUsers} />
    </div>
  );
}

Phase 7 : Déploiement

Préparer le déploiement

> Prépare le projet pour le déploiement sur Vercel :
  - Vérifie que le build passe sans erreur
  - Configure les variables d'environnement nécessaires
  - Ajoute un fichier .env.example avec toutes les variables requises
  - Configure les headers de sécurité dans next.config.ts
  - Optimise les images et les fonts

Déployer

# Installer Vercel CLI
npm i -g vercel

# Déployer
vercel --prod

Configurer le domaine et le SSL

Vercel gère automatiquement le SSL. Il suffit de configurer votre domaine dans le dashboard Vercel et d'ajouter les enregistrements DNS.

Bonnes pratiques pour le développement SaaS avec Claude Code

1. Itérez par couches, pas par features

Au lieu de construire feature par feature (auth complète, puis paiement complet, etc.), construisez couche par couche :

2. Utilisez le mode plan pour les décisions architecturales

Avant de coder une feature complexe, passez en [mode auto](/blog/claude-code-auto-mode-permissions-intelligentes) pour que Claude Code propose un plan :

> /plan Comment structurer le système de permissions par rôle
  pour supporter Free/Pro/Enterprise avec des features différentes ?

3. Testez au fur et à mesure

Ne laissez pas les tests pour la fin. Après chaque feature :

> Écris les tests pour le CRUD Projects :
  - Tests unitaires pour les server actions
  - Tests d'intégration pour les API routes
  - Tests E2E pour le parcours utilisateur avec Playwright

4. Sécurisez dès le début

Comme détaillé dans notre guide sur la [sécurité des assistants IA](/blog/securite-assistants-ia-code-2026), vérifiez systématiquement :

5. Documentez avec CLAUDE.md

Mettez à jour votre CLAUDE.md au fur et à mesure. Plus le contexte est riche, plus Claude Code produit du code cohérent avec votre architecture.

Résultat : un SaaS fonctionnel en quelques heures

En suivant cette méthodologie, vous obtenez une application avec :

Ce qui aurait pris des semaines en développement traditionnel se fait en quelques heures avec Claude Code — non pas parce que le code est bâclé, mais parce que l'IA élimine le travail répétitif et les recherches de documentation.

Pour aller plus loin

Pour maîtriser Claude Code et construire vos propres applications SaaS, notre [formation complète](https://go.saas-ia.io/se-faire-remplacer-par-lia) vous guide pas à pas avec des projets concrets et un accès à une communauté de développeurs.

---

*Sources : Anthropic Claude Code Documentation, Next.js Documentation, Stripe Developer Docs, mars 2026.*