Ton premier projet

Les modes, le CLAUDE.md, le prompting, tu as tous les outils. Il est temps de construire.

On va créer une landing page de waitlist fonctionnelle en 15 minutes. Pas une TODO app. Une vraie page avec un formulaire d'inscription, un stockage des emails et un compteur de personnes inscrites. C'est une mini-version de LaunchList, le projet fil rouge du parcours Premium.

À la fin de ce chapitre, tu auras quelque chose que tu pourras montrer, et tu te diras : "J'ai fait ça en 15 minutes ?"

Ce qu'on va construire

Une landing page Next.js avec :

• Un titre accrocheur et une description du produit
• Un formulaire d'inscription par email
• Un stockage des emails dans un fichier JSON (simple, pas de base de données)
• Un compteur qui affiche le nombre de personnes sur la waitlist
• Un message de confirmation après l'inscription

C'est volontairement simple. Pas de base de données, pas d'authentification. Juste une page qui fonctionne, pour démontrer la puissance du workflow Claude Code.

npx create-next-app@latest waitlist-page --typescript --tailwind
cd waitlist-page

claude

Crée un fichier CLAUDE.md à la racine avec ces informations :

## Projet
Landing page de waitlist. Stack : Next.js, TypeScript, Tailwind CSS.

## Conventions
- App Router (src/app/)
- Server Actions pour la logique serveur
- Fichier JSON pour stocker les emails (data/waitlist.json)
- Validation côté serveur

## Commandes
- npm run dev : serveur de développement
- npm run build : build de production

Crée une landing page de waitlist avec les éléments suivants :

Page principale (src/app/page.tsx) :
- Titre "Rejoins la waitlist" avec une description courte
- Formulaire avec un champ email et un bouton "S'inscrire"
- Compteur affichant "X personnes déjà inscrites"
- Message de confirmation après inscription réussie

Logique serveur :
- Server Action pour traiter le formulaire
- Lire/écrire dans data/waitlist.json
- Valider le format de l'email
- Empêcher les doublons

Style : moderne, centré sur la page, responsive.

'use server'

import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs'
import { join } from 'path'

const DATA_PATH = join(process.cwd(), 'data', 'waitlist.json')

interface WaitlistData {
  emails: string[]
}

function getWaitlistData(): WaitlistData {
  if (!existsSync(DATA_PATH)) {
    return { emails: [] }
  }
  const raw = readFileSync(DATA_PATH, 'utf-8')
  return JSON.parse(raw)
}

function saveWaitlistData(data: WaitlistData) {
  const dir = join(process.cwd(), 'data')
  if (!existsSync(dir)) {
    mkdirSync(dir, { recursive: true })
  }
  writeFileSync(DATA_PATH, JSON.stringify(data, null, 2))
}

export async function joinWaitlist(formData: FormData) {
  const email = formData.get('email') as string

  // Validation
  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    return { error: 'Adresse email invalide.' }
  }

  const data = getWaitlistData()

  // Doublon
  if (data.emails.includes(email)) {
    return { error: 'Cette adresse est déjà inscrite.' }
  }

  data.emails.push(email)
  saveWaitlistData(data)

  return { success: true, count: data.emails.length }
}

npm run dev

Ajoute un compteur visible au-dessus du formulaire qui affiche
"X personnes sont déjà sur la waitlist".

Le compteur doit :
- Se mettre à jour après chaque inscription (sans recharger la page)
- Afficher 0 si la liste est vide
- Utiliser un style qui attire l'oeil (badge ou texte accentué)

Le gap avec un vrai MVP

Prends un moment pour réaliser ce que tu viens de faire. En 15 minutes, tu as :

• Configuré un projet Next.js
• Créé un CLAUDE.md pour cadrer le travail
• Utilisé Plan Mode pour valider l'approche
• Généré une landing page fonctionnelle avec Server Actions
• Debuggé des erreurs réelles
• Itéré pour ajouter des features

C'est impressionnant. Mais soyons honnêtes : ce n'est pas un MVP.

Ta landing page stocke les emails dans un fichier JSON. Il n'y a pas de base de données, pas d'authentification, pas de paiement. Si ton serveur redémarre sur un hébergement serverless, tu perds tes données. Si 50 personnes s'inscrivent en même temps, le fichier JSON risque de se corrompre.

Un vrai MVP, c'est LaunchList, le projet du parcours Premium :

• PostgreSQL avec Drizzle ORM pour des données fiables et requêtables
• Better-Auth pour l'authentification (login, inscription, sessions)
• Stripe (Checkout + Connect) pour les pré-commandes et les paiements
• Dashboard avec analytics temps réel pour les créateurs
• Déploiement Vercel avec domaine personnalisé

Ce que tu as appris

Ce chapitre t'a fait pratiquer chaque concept vu jusqu'ici, dans un vrai projet :

• Créer un CLAUDE.md pour cadrer le projet dès le départ, même pour 15 minutes de travail
• Utiliser le Plan Mode pour valider l'approche avant d'écrire une seule ligne de code
• Écrire un prompt structuré avec le contexte, les contraintes techniques et le résultat attendu
• Itérer quand le résultat n'est pas parfait, en donnant des instructions précises
• Debugger les erreurs courantes de Claude (fichiers manquants, validations oubliées) sans paniquer

Le réflexe à garder : planifier, implémenter, tester, itérer. C'est la boucle qui te rendra efficace avec Claude Code, quel que soit le projet.