Il existe des centaines de langages de programmation, de frameworks et d'outils. En tant que debutant, c'est paralysant. Lequel devrais-tu apprendre ? Lequel est "le meilleur" ?
Voici le raccourci du vibe coder : choisis une stack bien supportee, populaire, et tiens-toi a elle. L'objectif n'est pas d'apprendre chaque outil — c'est de construire quelque chose de reel.
Notre stack (et pourquoi)
Concept
Une "stack technique" est la combinaison de langages de programmation, de frameworks et d'outils utilises pour construire une application. Pense a ca comme choisir tes ingredients avant de cuisiner — tu n'as pas besoin de chaque epice du magasin, juste des bonnes pour ta recette.Next.js — ton framework d'application
Next.js est un framework React pour construire des applications web. Un seul framework gere les deux :
- Frontend — ce que les utilisateurs voient dans leur navigateur (pages, boutons, formulaires)
- Backend — la logique serveur qui se passe en coulisses (sauvegarder des donnees, envoyer des emails)
Pourquoi Next.js ? Une enorme communaute, une excellente documentation, et Claude le connait extremement bien. Il utilise des "composants" React (des blocs de construction reutilisables pour ton interface) et a un routing integre (chaque page est un chemin URL).
TypeScript — JavaScript avec des garde-fous
TypeScript est du JavaScript avec des annotations de type — des indices supplementaires qui aident a detecter les erreurs avant qu'elles ne se produisent.
Pourquoi TypeScript ? Claude genere du TypeScript nettement meilleur que du JavaScript simple. Les types agissent comme un contrat entre les differentes parties de ton code, donc quand Claude ecrit une partie, elle a moins de chances de casser une autre.
Tu n'as pas besoin d'apprendre la syntaxe TypeScript. Claude s'en occupe. Tu as juste besoin de savoir que ca existe et que ca detecte des erreurs pour toi en arriere-plan.
Tailwind CSS — le style simplifie
Tailwind CSS est un framework CSS utility-first. Au lieu d'ecrire des fichiers de style separes, tu ajoutes des classes directement aux elements HTML.
Pourquoi Tailwind ? Ca se lit comme de l'anglais abrege, et Claude le maitrise incroyablement bien.
Quelques exemples :
bg-blue-500signifie "fond bleu"text-lgsignifie "grand texte"p-4signifie "padding de tous les cotes"flex items-centersignifie "disposer les elements en ligne, centres verticalement"
DynamoDB — ta base de donnees cloud (plus tard)
Amazon DynamoDB est la base de donnees serverless d'AWS. Nous l'ajouterons dans les Lecons 9-10.
Pourquoi DynamoDB ? Un free tier genereux — 25 Go de stockage et 200 millions de requetes par mois, gratuit pour toujours. Aucun serveur a gerer. Les donnees sont stockees sous forme de documents flexibles de type JSON.
Ce que nous n'utilisons PAS (et pourquoi)
- Pas de PHP, Ruby ou Java — pas parce qu'ils sont mauvais, mais parce que notre stack est optimisee pour le developpement assiste par IA
- Pas de WordPress — nous construisons quelque chose de personnalise, et nous apprenons comment les applications fonctionnent sous le capot
- Pas de Docker — trop de complexite pour un premier projet. Peut-etre la prochaine fois.
Note honnete
Il n'y a pas de "meilleure" stack technique. Il y a des compromis partout. Nous avons choisi cette stack parce qu'elle fonctionne extremement bien avec le developpement assiste par IA, qu'elle a une enorme communaute pour le depannage, et qu'elle tourne sur le Free Tier d'AWS. Si tu veux plus tard explorer Python, Go ou d'autres outils, les competences de vibe coding que tu apprends ici se transfereront directement.Creer le projet
Maintenant, creons vraiment notre projet Next.js. Ouvre Claude Code dans ton dossier waitlist-wizard :
Essaie
Dans Claude Code, tape : "Create a new Next.js project with TypeScript and Tailwind CSS in this folder. Use the app router."Claude executera
npx create-next-app@latest avec les bons drapeaux de configuration. Ca prend environ une minute.
Ce qui a ete cree
Apres la generation du projet, tu verras un tas de nouveaux fichiers. Voici les importants :
| Fichier/Dossier | Ce qu'il fait |
|---|---|
app/ |
Tes pages et routes vivent ici |
app/page.tsx |
La page d'accueil de ton application |
app/layout.tsx |
Le layout partage qui enveloppe toutes les pages |
public/ |
Fichiers statiques (images, favicon) |
package.json |
Liste les dependances de ton projet |
tailwind.config.ts |
Configuration de Tailwind CSS |
tsconfig.json |
Configuration de TypeScript |
Ne t'inquiete pas de comprendre chaque fichier. Claude sait ce que chacun fait, et tu apprendras naturellement en construisant.
Lancer ton application
Essaie
Dans ton terminal (ou demande a Claude), lance :npm run dev
Puis ouvre ton navigateur a http://localhost:3000. Tu devrais voir la page d'accueil par defaut de Next.js. Ton application tourne !
Astuce pro
Le serveur de developpement "surveille" tes fichiers. Quand tu sauvegardes une modification, le navigateur se met a jour automatiquement — pas besoin de rafraichir manuellement. Cette boucle de feedback instantane rend le vibe coding presque magique.Checkpoint Git
Sauvegardons notre progression :
git add .
git commit -m "initialized next.js project with typescript and tailwind"