Ce site a été construit par Claude Code en une journée

Tu es en train de lire le résultat

Tu lis cette leçon sur formation.linedev.fr. Ce site, je ne l’ai pas codé à la main. Je l’ai décrit, découpé en étapes et vérifié. Claude Code a écrit le code.

Le projet a été demandé le 29 septembre 2026. Le même jour, le site complet était enregistré dans git, l’outil qui garde l’historique du code (un enregistrement daté s’appelle un commit). Pas une maquette : une application qui gère des comptes, encaisse de l’argent et décide qui peut lire quoi.

Dans cette formation, je te montre comment. Pas avec une démo arrangée : avec le vrai code, ses choix, et ce qui restait à régler.

Ce que fait le site

Voici ce qu’un visiteur traverse, du lien de la vidéo jusqu’au paiement.

• Un lien par vidéo. À la fin d’une vidéo, je donne un lien court comme formation.linedev.fr/mp4. Le site retient d’où vient le visiteur et compte les visites de chaque lien.
• Des leçons gratuites. Le début de chaque formation se lit sans compte. On juge sur pièce.
• Un compte sans mot de passe. Pas besoin de compte pour payer : Stripe demande ton e-mail, et le compte est créé avec. Pour revenir plus tard, tu donnes ton e-mail, tu reçois un code à 6 chiffres, tu le recopies.
• Deux façons de payer. Un abonnement (mensuel ou annuel) ouvre tout le catalogue. L’achat à l’unité ouvre une seule formation. Le paiement passe par Stripe, un service de paiement en ligne qui héberge la page de carte bancaire.
• Un espace élève. Progression, factures, changement de carte, résiliation, suppression du compte.
• Une administration. J’y écris les formations, je crée les liens de vidéo et je vois ce que chaque vidéo rapporte.

Un détail qui montre la méthode

Pourquoi un code à recopier, plutôt qu’un lien magique dans l’e-mail ? La réponse est écrite en tête du fichier src/lib/connexion.ts. Voici le commentaire réel, raccourci :

/**
 * Connexion sans mot de passe : l'élève donne son e-mail, reçoit un code à 6 chiffres, le recopie.
 * Pourquoi un code plutôt qu'un lien magique : depuis TikTok ou Instagram, la page s'ouvre dans le
 * navigateur intégré de l'appli ; un lien cliqué dans l'e-mail s'ouvrirait dans un autre navigateur,
 * où l'élève ne serait pas connecté. Un code se recopie dans la page déjà ouverte.
 */

Ce choix ne sort pas d’un modèle de code générique. Il vient du parcours réel de mes visiteurs : ils arrivent depuis une application de réseau social, pas depuis un ordinateur de bureau. Je l’avais décrit avant la première ligne de code.

C’est tout le sujet de cette formation. Claude code bien ce que tu as bien cadré. Et le « pourquoi » reste écrit dans le code, pour la prochaine session et pour toi dans six mois.

Ce qu’il y a sous le capot

La pile technique, en une phrase : Payload CMS (un outil d’administration et de base de données écrit en TypeScript, du JavaScript dont les types sont vérifiés), Next.js 16 (le framework qui fabrique les pages), une base SQLite (toute la base tient dans un seul fichier) et Stripe.

Quelques chiffres, comptés dans le commit du 29 septembre, hors fichiers générés :

• environ 6 400 lignes de TypeScript, réparties dans 87 fichiers ;
• 12 collections en base : formations, leçons, membres, achats, progression, liens de vidéo, sessions, codes de connexion, évènements Stripe, et quelques autres ;
• 39 tests unitaires, plus un parcours complet joué dans un vrai navigateur ;
• un script de déploiement qui sauvegarde la base avant chaque mise à jour ;
• trois documents : la stratégie, la procédure de mise en ligne, et les règles du projet pour Claude.

Les obligations de la vente en ligne sont là aussi. Deux cases distinctes à cocher avant de payer. La preuve de l’accord, conservée sur le compte. Un bouton qui ouvre directement la résiliation de l’abonnement. La suppression du compte par l’élève lui-même.

Ce que Claude n’a pas fait seul

Il faut être honnête sur ce point, parce que c’est là que les projets « faits par l’IA » déraillent.

Les décisions restent les miennes : le modèle économique, les prix, ce qui compte pour mes visiteurs. Claude peut proposer et argumenter, il ne sait pas ce que je veux vendre. Il n’a pas non plus rempli les pages légales : elles contiennent des passages [À COMPLÉTER : …] que moi seul peux remplir, comme le numéro SIRET ou le médiateur de la consommation.

Et tout n’était pas réglé le premier jour. La configuration d’ESLint (l’outil qui relit le code à la recherche d’erreurs) livrée avec le modèle de Payload ne fonctionnait pas avec la version 16 de eslint-config-next. Ce défaut est écrit noir sur blanc dans les règles du projet, sur une ligne « Connu ». Il n’est pas caché sous un « tout fonctionne ».

J’ai aussi changé d’avis en route. Le site devait d’abord ouvrir un essai gratuit de 72 heures à chaque nouveau compte. Le jour même, j’ai préféré laisser le début de chaque formation en accès libre et réserver la suite. Tu verras dans le chapitre 2 pourquoi, dans la décision d’accès, ce changement tient en une ligne retirée. Le 18 octobre, j’ai aussi supprimé le compte à créer avant de payer : on paie d’abord, le compte suit.

Avant de commencer : ce qu’il te faut

Pour refaire la même chose chez toi, voici le matériel. Les liens et les commandes d’installation arrivent au fil de la formation, au moment où tu en as besoin.

• Un ordinateur sous Windows 11, macOS 14 (Sonoma) ou plus récent, ou un Linux récent (Ubuntu 22.04 ou plus, Debian 12 ou plus). C’est Playwright, l’outil qui teste le site dans un vrai navigateur, qui fixe ce minimum. Claude Code demande au moins 4 Go de mémoire.
• Un abonnement Claude qui inclut Claude Code (Pro, Max, Team ou Enterprise), ou un compte Console. L’offre gratuite de claude.ai ne suffit pas.
• Un compte Stripe. Tout le paiement se teste avec des clés de test et une carte de test, sans encaisser un centime.
• Des logiciels à installer : Node.js (le moteur qui fait tourner JavaScript hors du navigateur), pnpm (l’installateur de dépendances), git et Claude Code. Puis la Stripe CLI pour le paiement, et Mailpit pour les e-mails de test.
• Pour la mise en ligne seulement : un serveur Linux loué (un VPS) et un nom de domaine.

Si tu n’as jamais installé Claude Code, la formation Claude Code : bien démarrer t’accompagne pas à pas.

Ce que tu vas apprendre ensuite

La leçon suivante, gratuite elle aussi, présente la méthode en trois gestes : cadrer, découper, exiger des preuves. Tu y verras les vrais fichiers qui ont guidé Claude.

Ensuite, le chapitre 2 pose les fondations : le cahier des charges écrit avec Claude, le choix de la pile et le démarrage du projet, puis la règle d’accès unique, décrite par ses tests.

Le chapitre 3 attaque les parties sensibles : le paiement Stripe branché sans ouvrir d’accès à tort, la vérification du parcours complet dans un vrai navigateur, et la mise en ligne avec ce qu’il faut surveiller ensuite.