E-commerce

Initialiser le projet Next.js

Un projet Next.js qui démarre en local, avec Tailwind et shadcn/ui prêts à l'emploi.

Prérequis : Node.js installé. Terminal ouvert dans le dossier du projet.

1. Installe pnpm si besoin

   npm install -g pnpm

   pnpm est le gestionnaire de paquets choisi pour ce projet — plus rapide et plus économe en espace disque que npm.
   👁 Comment voir le résultat : tape pnpm -v. Un numéro de version s'affiche (ex. 9.12.0) — sinon l'installation a échoué.
2. Crée le projet Next.js

   pnpm create next-app@latest . --typescript --tailwind --eslint --app --src-dir=false --import-alias "@/*"

   Le nom du dossier ne doit pas contenir de majuscules (contrainte npm). S'il en contient, crée le projet dans un dossier temporaire au nom valide puis déplace tout son contenu dans ton dossier de travail.
   👁 Comment voir le résultat : tape ls. Tu dois voir apparaître app/, package.json, tailwind.config.ts — la commande a rempli ton dossier de fichiers.
3. Initialise shadcn/ui

   pnpm dlx shadcn@latest init

   Ça crée components.json et lib/utils.ts, et prépare Tailwind pour recevoir des composants shadcn/ui prêts à copier.
   👁 Comment voir le résultat : tape ls components.json lib/utils.ts — les deux fichiers doivent exister, sans message d'erreur « No such file ».
4. Crée l'arborescence du projet

   mkdir -p lib/auth lib/db lib/validations prisma testsmkdir lib/auth, lib/db, lib/validations, prisma, tests

   On sépare dès le départ : authentification, accès base de données, schémas de validation. Ça évite le fichier fourre-tout de 2000 lignes plus tard.
   👁 Comment voir le résultat : tape ls lib — les dossiers auth, db, validations doivent apparaître.
5. Initialise Git et fais le premier commit

   git init
   git add -A
   git commit -m "chore: init projet Next.js"

   👁 Comment voir le résultat : tape git log --oneline — une ligne avec ton message de commit doit s'afficher.
6. Lance le serveur et vérifie

   pnpm dev

   Ouvre http://localhost:3000. Si tu as une erreur 500 mentionnant un module introuvable (ex. Can't resolve 'xxx') alors qu'il est bien dans package.json : supprime node_modules, pnpm-lock.yaml et .next, relance pnpm install puis pnpm dev. C'est presque toujours une installation incomplète, pas un bug de code.
   👁 Comment voir le résultat : dans ton navigateur, ouvre localhost:3000. Tu dois voir la page d'accueil par défaut de Next.js. Le terminal affiche Ready et n'affiche pas d'erreur rouge.

Base de données — Prisma + Supabase

Une base PostgreSQL en ligne, avec les tables Produit, Commande et LigneCommande créées via Prisma.

Prérequis : étape 1 validée.

1. Crée un projet sur Supabase
   Va sur supabase.com → New project. Choisis un nom, une région proche, et un mot de passe de base de données — note-le quelque part.
   👁 Comment voir le résultat : le tableau de bord Supabase affiche ton projet avec un statut « Active » (après ~1-2 minutes).
2. Récupère l'URL de connexion
   Dans le projet Supabase : Project Settings → Database → Connection string, mode URI. Copie l'URL complète (mot de passe inclus).
3. Installe Prisma

   pnpm add prisma --save-dev
   pnpm add @prisma/client
   pnpm dlx prisma init

   Crée prisma/schema.prisma et un fichier .env avec une variable DATABASE_URL vide.
   👁 Comment voir le résultat : tape ls prisma/schema.prisma — le fichier doit exister.
4. Colle l'URL dans .env

   # .env
   DATABASE_URL="postgresql://postgres:[MOT-DE-PASSE]@[HOST]:5432/postgres"

   Ce fichier ne doit jamais être commit (déjà dans .gitignore par défaut) — il contient un mot de passe.
5. Écris le schéma
   Dans prisma/schema.prisma, sous les blocs generator/datasource déjà présents, ajoute :

   model Produit {
     id        String   @id @default(cuid())
     nom       String
     prix      Int      // en centimes, pour éviter les erreurs d'arrondi
     stock     Int      @default(0)
     createdAt DateTime @default(now())
   }
   
   model Commande {
     id        String   @id @default(cuid())
     clientId  String
     statut    String   @default("EN_ATTENTE")
     total     Int
     createdAt DateTime @default(now())
     lignes    LigneCommande[]
   }
   
   model LigneCommande {
     id           String   @id @default(cuid())
     commandeId   String
     commande     Commande @relation(fields: [commandeId], references: [id])
     produitId    String
     quantite     Int
     prixUnitaire Int
   }

   Les prix sont stockés en centimes (entiers) plutôt qu'en euros décimaux — évite les erreurs d'arrondi classiques avec les nombres flottants.
6. Applique la migration et vérifie

   pnpm dlx prisma migrate dev --name init
   pnpm dlx prisma studio

   migrate dev crée les tables et génère le client Prisma typé. studio ouvre une interface web locale pour voir/éditer les données à la main.
   👁 Comment voir le résultat : prisma studio ouvre localhost:5555 — les tables Produit, Commande et LigneCommande doivent apparaître dans la liste de gauche.

Piège fréquent : connexion refusée → vérifie qu'aucun caractère spécial du mot de passe (@, #...) n'est mal encodé dans l'URL. Supabase propose un bouton pour copier l'URL déjà encodée.

Authentification — Better Auth

Des comptes clients — historique de commandes, adresse — et une zone /dashboard protégée pour l'admin.

Prérequis : étape 2 validée (schéma Prisma en place).

1. Installe Better Auth

   pnpm add better-auth

   👁 Comment voir le résultat : better-auth apparaît dans package.json.
2. Crée le client Prisma partagé

   touch lib/db/client.tsNew-Item -ItemType File -Force -Path lib/db/client.ts

   Le dossier lib/db existe déjà depuis l'étape 1 — il ne manque que le fichier. Ouvre-le et colle ce contenu :

   // lib/db/client.ts
   import { PrismaClient } from "@prisma/client";
   
   const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
   
   export const prisma = globalForPrisma.prisma ?? new PrismaClient();
   
   if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

   Une instance unique de PrismaClient, réutilisée partout via import { prisma } from "@/lib/db/client" — évite d'en recréer une à chaque appel (et les erreurs « too many connections » que ça provoque avec le rechargement à chaud de Next.js en développement).
3. Crée la config serveur

   touch lib/auth/auth.tsNew-Item -ItemType File -Force -Path lib/auth/auth.ts

   // lib/auth/auth.ts
   import { betterAuth } from "better-auth";
   import { prismaAdapter } from "better-auth/adapters/prisma";
   import { prisma } from "@/lib/db/client";
   
   export const auth = betterAuth({
     database: prismaAdapter(prisma, { provider: "postgresql" }),
     emailAndPassword: { enabled: true },
   });

4. Ajoute les tables auth au schéma

   pnpm dlx @better-auth/cli generate
   pnpm dlx prisma migrate dev --name add_auth

   Better Auth génère automatiquement les modèles User, Session, Account dans schema.prisma.
   👁 Comment voir le résultat : ouvre prisma studio — les tables User, Session, Account doivent apparaître.
5. Ajoute le secret dans .env

   # .env
   BETTER_AUTH_SECRET="génère une chaîne aléatoire longue"
   BETTER_AUTH_URL="http://localhost:3000"

6. Crée la route API

   mkdir -p "app/api/auth/[...all]" && touch "app/api/auth/[...all]/route.ts"New-Item -ItemType Directory -Force -Path "app/api/auth/[...all]"; New-Item -ItemType File -Force -Path "app/api/auth/[...all]/route.ts"

   Le nom de dossier [...all] (avec les crochets) est la syntaxe Next.js pour capturer toutes les sous-routes — ne le renomme pas.

   // app/api/auth/[...all]/route.ts
   import { auth } from "@/lib/auth/auth";
   import { toNextJsHandler } from "better-auth/next-js";
   
   export const { GET, POST } = toNextJsHandler(auth);

   👁 Comment voir le résultat : relance pnpm dev et ouvre un endpoint Better Auth (ex. localhost:3000/api/auth/ok) — tu dois obtenir une réponse JSON, pas une erreur 404.
7. Crée le client auth

   touch lib/auth/client.tsNew-Item -ItemType File -Force -Path lib/auth/client.ts

   // lib/auth/client.ts
   import { createAuthClient } from "better-auth/react";
   
   export const authClient = createAuthClient();

   C'est ce client (côté navigateur) que les pages /signup et /login vont utiliser pour appeler signUp.email(...) et signIn.email(...).
8. Crée les pages d'inscription et de connexion

   mkdir -p app/signup app/login && touch app/signup/page.tsx app/login/page.tsxmkdir app/signup, app/login; New-Item -ItemType File -Force -Path app/signup/page.tsx, app/login/page.tsx

   // app/signup/page.tsx
   "use client";
   import { useState } from "react";
   import { authClient } from "@/lib/auth/client";
   
   export default function SignupPage() {
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
   
     async function handleSubmit(e: React.FormEvent) {
       e.preventDefault();
       await authClient.signUp.email({ email, password, name: email });
     }
   
     return (
       <form onSubmit={handleSubmit} className="p-8 flex flex-col gap-2 max-w-sm">
         <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} required />
         <input type="password" placeholder="Mot de passe" value={password} onChange={(e) => setPassword(e.target.value)} required />
         <button type="submit">Créer un compte</button>
       </form>
     );
   }

   // app/login/page.tsx
   "use client";
   import { useState } from "react";
   import { authClient } from "@/lib/auth/client";
   
   export default function LoginPage() {
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
   
     async function handleSubmit(e: React.FormEvent) {
       e.preventDefault();
       await authClient.signIn.email({ email, password });
     }
   
     return (
       <form onSubmit={handleSubmit} className="p-8 flex flex-col gap-2 max-w-sm">
         <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} required />
         <input type="password" placeholder="Mot de passe" value={password} onChange={(e) => setPassword(e.target.value)} required />
         <button type="submit">Se connecter</button>
       </form>
     );
   }

   👁 Comment voir le résultat : crée un compte test sur localhost:3000/signup, puis vérifie dans Prisma Studio qu'une ligne apparaît dans la table User. Reconnecte-toi ensuite depuis /login avec les mêmes identifiants.
9. Protège /dashboard

   touch middleware.tsNew-Item -ItemType File -Force -Path middleware.ts

   // middleware.ts (à la racine du projet, à côté de package.json)
   import { NextRequest, NextResponse } from "next/server";
   import { auth } from "@/lib/auth/auth";
   
   export async function middleware(request: NextRequest) {
     const session = await auth.api.getSession({ headers: request.headers });
     if (!session && request.nextUrl.pathname.startsWith("/dashboard")) {
       return NextResponse.redirect(new URL("/login", request.url));
     }
     return NextResponse.next();
   }
   
   export const config = { matcher: ["/dashboard/:path*"] };

   Le matcher limite le middleware aux routes /dashboard/* — il ne s'exécute pas sur le reste du site.
   👁 Comment voir le résultat : en navigation privée (non connecté), va sur localhost:3000/dashboard — tu dois être redirigé vers /login.

Piège fréquent : si la doc officielle de Better Auth diffère de ce qui est écrit ici, suis la doc — c'est une librairie qui évolue vite. Dis-le moi si un nom de fonction a changé, on ajuste.

Paiement — Stripe

Encaisser un vrai paiement carte, en toute sécurité.

Prérequis : étape 3 validée.

1. Crée un compte Stripe (mode test)
   Sur stripe.com — le mode test permet de simuler des paiements sans vraie carte bancaire, avec le numéro 4242 4242 4242 4242.
2. Installe le SDK

   pnpm add stripe

   👁 Comment voir le résultat : stripe apparaît dans package.json.
3. Ajoute les clés dans .env

   # .env
   STRIPE_SECRET_KEY="sk_test_..."
   STRIPE_WEBHOOK_SECRET="whsec_..."

   Les deux se trouvent dans le tableau de bord Stripe, section Développeurs.
4. Crée une session de paiement

   mkdir -p lib/stripe && touch lib/stripe/checkout.tsmkdir lib/stripe; New-Item -ItemType File -Force -Path lib/stripe/checkout.ts

   // lib/stripe/checkout.ts
   "use server";
   import Stripe from "stripe";
   const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
   
   export async function createCheckoutSession(commandeId: string, items: { nom: string; prix: number; quantite: number }[]) {
     const session = await stripe.checkout.sessions.create({
       mode: "payment",
       line_items: items.map((i) => ({
         price_data: {
           currency: "eur",
           product_data: { name: i.nom },
           unit_amount: i.prix,
         },
         quantity: i.quantite,
       })),
       metadata: { commandeId },
       success_url: `${process.env.BETTER_AUTH_URL}/commande/succes`,
       cancel_url: `${process.env.BETTER_AUTH_URL}/panier`,
     });
     return session.url;
   }

   metadata: { commandeId } permet au webhook de retrouver quelle commande marquer comme payée — sans ça, impossible de savoir quel paiement correspond à quelle ligne en base.
   👁 Comment voir le résultat : se testera concrètement une fois la page panier branchée à l'étape 5 — pour l'instant, vérifie juste que le fichier ne contient pas d'erreur TypeScript dans ton éditeur.
5. Crée la route webhook

   mkdir -p app/api/stripe/webhook && touch app/api/stripe/webhook/route.tsmkdir app/api/stripe/webhook; New-Item -ItemType File -Force -Path app/api/stripe/webhook/route.ts

   // app/api/stripe/webhook/route.ts
   import { headers } from "next/headers";
   import Stripe from "stripe";
   import { prisma } from "@/lib/db/client";
   
   const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
   
   export async function POST(request: Request) {
     const body = await request.text();
     const signature = (await headers()).get("stripe-signature")!;
   
     const event = stripe.webhooks.constructEvent(body, signature, process.env.STRIPE_WEBHOOK_SECRET!);
   
     if (event.type === "checkout.session.completed") {
       const session = event.data.object as Stripe.Checkout.Session;
       const commandeId = session.metadata?.commandeId;
       if (commandeId) {
         await prisma.commande.update({
           where: { id: commandeId },
           data: { statut: "PAYEE" },
         });
       }
     }
   
     return new Response(null, { status: 200 });
   }

   Ne marque jamais une commande payée depuis le navigateur (côté client) — seul le webhook, signé par Stripe, fait foi. Sinon n'importe qui peut appeler ton API et se déclarer « payé » sans payer. session.metadata.commandeId vient de l'étape précédente : c'est ce qui cible la bonne commande.
   👁 Comment voir le résultat : lance stripe listen --forward-to localhost:3000/api/stripe/webhook dans un terminal séparé — il doit afficher Ready! Your webhook signing secret is whsec_.... Fais un paiement test (carte 4242 4242 4242 4242) : ce terminal doit logguer l'événement checkout.session.completed.

Piège fréquent : en local, Stripe ne peut pas atteindre localhost pour envoyer le webhook — utilise stripe listen --forward-to localhost:3000/api/stripe/webhook (CLI Stripe) pendant le développement.

Catalogue, panier & commandes

Parcourir les produits, les mettre au panier, passer commande.

Prérequis : étape 4 validée.

1. Installe et crée le store du panier

   pnpm add zustand

   mkdir -p lib/store && touch lib/store/panier.tsmkdir lib/store; New-Item -ItemType File -Force -Path lib/store/panier.ts

   // lib/store/panier.ts
   import { create } from "zustand";
   
   type ArticlePanier = { id: string; nom: string; prix: number; quantite: number };
   
   type PanierStore = {
     articles: ArticlePanier[];
     ajouter: (produit: { id: string; nom: string; prix: number }) => void;
     retirer: (id: string) => void;
     vider: () => void;
   };
   
   export const usePanier = create<PanierStore>((set) => ({
     articles: [],
     ajouter: (produit) =>
       set((state) => {
         const existant = state.articles.find((a) => a.id === produit.id);
         if (existant) {
           return {
             articles: state.articles.map((a) =>
               a.id === produit.id ? { ...a, quantite: a.quantite + 1 } : a
             ),
           };
         }
         return { articles: [...state.articles, { ...produit, quantite: 1 }] };
       }),
     retirer: (id) => set((state) => ({ articles: state.articles.filter((a) => a.id !== id) })),
     vider: () => set({ articles: [] }),
   }));

   Le panier vit dans le navigateur avant le paiement — pas besoin de base de données pour ça. Zustand garde l'état du panier accessible depuis n'importe quel composant, sans tout faire remonter via les props.
2. Crée le bouton « Ajouter au panier »

   touch components/ajouter-au-panier-button.tsxNew-Item -ItemType File -Force -Path components/ajouter-au-panier-button.tsx

   // components/ajouter-au-panier-button.tsx
   "use client";
   import { usePanier } from "@/lib/store/panier";
   
   export default function AjouterAuPanierButton({ produit }: { produit: { id: string; nom: string; prix: number } }) {
     const ajouter = usePanier((state) => state.ajouter);
     return <button onClick={() => ajouter(produit)}>Ajouter au panier</button>;
   }

   Ce bouton doit être un composant client à part ("use client") car usePanier utilise du state du navigateur — la page catalogue, elle, peut rester un Server Component qui lit Prisma directement.
3. Page catalogue

   mkdir -p app/produits && touch app/produits/page.tsxmkdir app/produits; New-Item -ItemType File -Force -Path app/produits/page.tsx

   // app/produits/page.tsx
   import { prisma } from "@/lib/db/client";
   import AjouterAuPanierButton from "@/components/ajouter-au-panier-button";
   
   export default async function ProduitsPage() {
     const produits = await prisma.produit.findMany();
   
     return (
       <main className="p-8 grid grid-cols-1 sm:grid-cols-3 gap-4">
         {produits.map((p) => (
           <div key={p.id} className="border rounded-lg p-4">
             <h2 className="font-bold">{p.nom}</h2>
             <p>{(p.prix / 100).toFixed(2)} €</p>
             <AjouterAuPanierButton produit={{ id: p.id, nom: p.nom, prix: p.prix }} />
           </div>
         ))}
       </main>
     );
   }

   👁 Comment voir le résultat : ouvre localhost:3000/produits — les produits que tu as ajoutés dans Prisma Studio doivent s'afficher, un par carte, avec leur prix converti en euros.
4. Page panier et commande avant paiement

   mkdir -p app/panier && touch app/panier/page.tsx app/panier/actions.tsmkdir app/panier; New-Item -ItemType File -Force -Path app/panier/page.tsx, app/panier/actions.ts

   // app/panier/actions.ts
   "use server";
   import { prisma } from "@/lib/db/client";
   import { createCheckoutSession } from "@/lib/stripe/checkout";
   
   type ArticlePanier = { id: string; nom: string; prix: number; quantite: number };
   
   export async function creerCommandeEtPayer(articles: ArticlePanier[]) {
     const total = articles.reduce((sum, a) => sum + a.prix * a.quantite, 0);
   
     const commande = await prisma.commande.create({
       data: {
         clientId: "TODO: remplace par l'id de l'utilisateur connecté (session Better Auth)",
         statut: "EN_ATTENTE",
         total,
         lignes: {
           create: articles.map((a) => ({
             produitId: a.id,
             quantite: a.quantite,
             prixUnitaire: a.prix,
           })),
         },
       },
     });
   
     return createCheckoutSession(commande.id, articles);
   }

   // app/panier/page.tsx
   "use client";
   import { usePanier } from "@/lib/store/panier";
   import { creerCommandeEtPayer } from "./actions";
   
   export default function PanierPage() {
     const { articles, retirer } = usePanier();
     const total = articles.reduce((sum, a) => sum + a.prix * a.quantite, 0);
   
     async function handlePayer() {
       const url = await creerCommandeEtPayer(articles);
       window.location.href = url;
     }
   
     return (
       <main className="p-8">
         <h1 className="text-2xl font-bold mb-4">Panier</h1>
         <ul>
           {articles.map((a) => (
             <li key={a.id} className="flex justify-between gap-4">
               <span>{a.nom} × {a.quantite}</span>
               <span>{((a.prix * a.quantite) / 100).toFixed(2)} €</span>
               <button onClick={() => retirer(a.id)}>Retirer</button>
             </li>
           ))}
         </ul>
         <p className="mt-4 font-bold">Total : {(total / 100).toFixed(2)} €</p>
         <button onClick={handlePayer} disabled={articles.length === 0}>Payer</button>
       </main>
     );
   }

   Remplace le TODO de clientId par l'id récupéré via auth.api.getSession(...) (étape 3) une fois l'utilisateur connecté — sans ça, aucune commande ne peut être reliée à un client. creerCommandeEtPayer crée d'abord la Commande en base avec statut EN_ATTENTE, puis redirige vers Stripe — le webhook de l'étape 4 la fera ensuite passer à PAYEE.
   👁 Comment voir le résultat : depuis le catalogue, ajoute 2-3 produits au panier puis ouvre localhost:3000/panier — ils doivent y être listés avec le bon total. Clique sur « Payer » : juste avant la redirection vers Stripe, une nouvelle ligne EN_ATTENTE doit apparaître dans la table Commande (Prisma Studio).

Habillage — Tailwind & shadcn/ui

Un rendu visuel cohérent sur tout le site, et une méthode simple pour le modifier plus tard.

Prérequis : étape 5 validée.

1. Comprends où vit le style
   Il n'y a pas un fichier .css par page. Deux niveaux seulement : les variables de thème globales dans app/globals.css (couleurs, arrondi — générées par shadcn init à l'étape 1, chargées une seule fois par app/layout.tsx), et les classes Tailwind écrites directement dans le className de chaque composant.
2. Personnalise les couleurs du thème
   Ouvre app/globals.css — repère le bloc :root { ... } généré par shadcn init, qui contient des variables comme --primary ou --background. Change leurs valeurs directement dans ce fichier.
   👁 Comment voir le résultat : modifie la valeur de --primary, enregistre, recharge localhost:3000 — n'importe quel composant shadcn/ui déjà installé doit changer de couleur automatiquement, sans toucher au code des pages.
3. Crée une mise en page cohérente, réutilisée sur chaque page

   touch components/container.tsxNew-Item -ItemType File -Force -Path components/container.tsx

   // components/container.tsx
   export default function Container({ children }: { children: React.ReactNode }) {
     return (
       <div className="max-w-5xl mx-auto px-4 py-12">
         {children}
       </div>
     );
   }

   Sans ça, tu répètes les mêmes classes d'espacement (max-w-5xl mx-auto px-4 py-12) dans chaque fichier page.tsx (catalogue, panier...) — un seul endroit à modifier si tu changes la largeur ou les marges du site.
   👁 Comment voir le résultat : enveloppe le contenu retourné par app/page.tsx, la page catalogue et la page panier avec <Container>...</Container> — chaque page doit s'afficher centrée, avec la même marge, une fois rechargée.
4. Remplace le HTML brut par les composants shadcn/ui déjà installés

   // components/ajouter-au-panier-button.tsx — avant
   <button onClick={() => ajouter(produit)}>Ajouter au panier</button>
   
   // après
   import { Button } from "@/components/ui/button";
   <Button onClick={() => ajouter(produit)}>Ajouter au panier</Button>

   Le composant Button hérite automatiquement des variables de thème définies plus haut — un <button> HTML brut, non. Fais le même remplacement pour le bouton « Retirer » et le bouton « Payer » du panier (étape 5).
5. Pour modifier le style plus tard
   Garde pnpm dev lancé en continu — le rechargement à chaud applique tes changements dans le navigateur dès que tu sauvegardes, sans redémarrer le serveur. Ouvre le fichier de la page ou du composant concerné, change les classes dans className, enregistre. Pour ajouter un nouveau composant shadcn/ui : pnpm dlx shadcn@latest add <nom> (liste sur ui.shadcn.com). Pour savoir ce que fait une classe (p-4, rounded-lg, text-xl...), consulte le lexique ou tailwindcss.com/docs.

Tests — Vitest & Playwright

Automatiser la vérification du parcours critique.

Prérequis : étapes 4 et 5 validées.

1. Installe et configure Vitest

   pnpm add -D vitest

   Écris un test dans tests/panier.validation.test.ts qui vérifie que calculTotalPanier calcule correctement le total du panier avec plusieurs articles.
2. Installe et configure Playwright

   pnpm create playwright

   Répond aux questions de l'installateur (TypeScript, dossier tests-e2e). Écris un test qui : crée un compte → ajoute un produit au panier → paie avec une carte de test Stripe → vérifie que la commande apparaît en base.
3. Lance les tests

   pnpm exec vitest run
   pnpm exec playwright test

   👁 Comment voir le résultat : le terminal affiche un résumé avec un nombre de tests « passed » en vert. Playwright peut aussi ouvrir un rapport HTML (pnpm exec playwright show-report) qui montre le parcours étape par étape, avec captures d'écran si un test échoue.

Déploiement — Vercel

Une URL publique et fonctionnelle.

Prérequis : étape 7 validée.

1. Ajoute la génération Prisma au build

   // package.json
   "scripts": { "postinstall": "prisma generate" }

   Sans ça, le build Vercel plante — le client Prisma doit être régénéré après chaque install en production.
2. Pousse le code sur GitHub

   git remote add origin URL-DE-TON-DEPOT
   git push -u origin master

   👁 Comment voir le résultat : rafraîchis la page du dépôt sur GitHub — tes fichiers doivent y apparaître.
3. Importe le projet sur Vercel
   Sur vercel.com → Add New → Project → sélectionne le dépôt GitHub.
   👁 Comment voir le résultat : le tableau de bord Vercel passe de « Building » à « Ready », avec un lien de prévisualisation cliquable.
4. Renseigne les variables d'environnement
   Copie DATABASE_URL, BETTER_AUTH_SECRET, BETTER_AUTH_URL (URL Vercel finale), STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET dans Settings → Environment Variables.
   👁 Comment voir le résultat : pas d'effet visible immédiatement — redéploie (« Redeploy ») puis teste à l'étape suivante.
5. Configure le webhook Stripe en production
   Dans le tableau de bord Stripe : ajoute un endpoint pointant vers https://tondomaine.vercel.app/api/stripe/webhook — l'URL locale utilisée avec la CLI ne fonctionne plus une fois déployé.
   👁 Comment voir le résultat : dans le tableau de bord Stripe, section Webhooks, l'endpoint doit afficher un statut vert « Enabled ».
6. Déploie et vérifie en ligne
   Ouvre l'URL fournie par Vercel, refais le parcours critique à la main : créer un compte → ajouter un produit au panier → payer avec une carte de test → vérifier la commande.
   👁 Comment voir le résultat : sur l'URL *.vercel.app, un paiement test complet doit faire passer la commande en PAYEE — vérifiable dans Prisma Studio ou directement dans Supabase.