Panorama des outils

Voici la boîte à outils du développement web assisté par IA. L’objectif n’est pas de tout adopter — c’est une carte, pas une liste de courses. Pour chaque outil, retenez trois choses : à quoi il sert, quand l’utiliser, et surtout quand l’éviter, car le piège le plus courant est le sur-outillage.

Écosystème Claude & environnement de travail

Claude Desktop.

L’application de bureau pour dialoguer avec Claude : idéale pour réfléchir, planifier, analyser un document ou préparer votre CLAUDE.md. À éviter pour coder dans un vrai projet, où Claude Code est bien mieux adapté.

Claude Code.

Claude qui travaille directement dans votre projet (lit vos fichiers, les modifie, teste). L’outil central du vibe coding sérieux. Erreur courante : le laisser agir sans relire ses changements ni committer entre les étapes.

MCP (Model Context Protocol).

Un standard qui connecte Claude à des outils externes (base de données, GitHub, navigateur). Puissant, mais chaque connexion ajoute complexité et risque — n’en installez pas « au cas où » (Module 11).

VS Code.

L’éditeur le plus répandu : l’endroit où vous lisez et relisez le code. Gratuit, universel, intégré à Git. Erreur courante : ne jamais l’ouvrir et travailler « à l’aveugle ».

Contrôle de version & langages

Git & GitHub.

L’historique du code et sa sauvegarde en ligne (Module 5). Sur tout projet, dès la première ligne. Erreur courante : committer des secrets ou rendre public un dépôt qui en contient.

TypeScript.

Un JavaScript avec typage : les erreurs sont détectées avant l’exécution. Un garde-fou précieux contre certaines hallucinations. Erreur courante : contourner le typage (any partout), ce qui annule son bénéfice.

React.

La librairie qui structure les interfaces en composants réutilisables. Omniprésent, donc très bien maîtrisé par l’IA. Erreur courante : laisser l’IA recréer dix fois le même composant.

Next.js.

Le framework sur React qui ajoute routage, rendu serveur, optimisation des images et SEO. Le socle recommandé. Erreur courante : mal comprendre la frontière code serveur / code client (secrets, NEXT_PUBLIC_).

Interface, formulaires & données

Tailwind CSS.

Styliser avec de petites classes utilitaires dans le HTML : rapide, cohérent, bien maîtrisé par l’IA. Erreur courante : disséminer des valeurs en dur au lieu des jetons du design system.

shadcn/ui & Radix UI.

Des composants prêts à l’emploi (shadcn, que vous copiez et modifiez) bâtis sur Radix, qui gère le comportement complexe et l’accessibilité. Erreur courante : réinventer à la main une modale accessible.

Zod.

Valider la forme des données (« ceci est un e-mail valide »). Une brique de sécurité majeure. Erreur courante : valider seulement côté navigateur — la validation doit aussi se faire côté serveur.

React Hook Form.

Gérer les formulaires simplement, en duo avec Zod. Erreur courante : laisser l’IA coder une gestion « maison » verbeuse et boguée.

TanStack Query.

Gérer la récupération de données serveur (chargement, cache, erreurs). Idéal pour un SaaS. À éviter sur un site vitrine statique : complexité inutile.

Backend & base de données

Supabase.

Plateforme tout-en-un : base PostgreSQL, authentification, stockage, API automatiques. Fait gagner un temps considérable dès qu’il y a comptes et données. Erreur courante : ne pas configurer le RLS (Module 7).

PostgreSQL.

Le système de base de données relationnelle robuste qui stocke vos données de façon fiable (moteur sous Supabase). Erreur courante : mal concevoir la structure des données au départ — une dette douloureuse.

Prisma.

Un intermédiaire (ORM) pour manipuler la base avec du code typé plutôt que du SQL brut. À éviter avec Supabase, qui fournit déjà son client : empiler des couches non justifiées alourdit le projet.

Qualité, déploiement & conception

ESLint & Prettier.

ESLint détecte les erreurs et mauvaises pratiques ; Prettier met en forme le code automatiquement. Complémentaires (qualité vs forme). Erreur courante : les confondre, ou désactiver les règles qui « gênent ».

Playwright & Lighthouse.

Playwright teste votre site comme un vrai utilisateur ; Lighthouse audite performance, accessibilité et SEO. Erreur courante : vouloir tout tester d’emblée, ou viser un score de 100 partout au détriment de l’essentiel.

Vercel, Netlify, Cloudflare.

Héberger et déployer (Vercel = intégration Next.js la plus fluide) ; Cloudflare ajoute CDN mondial et sécurité. Erreur courante : oublier de configurer les variables d’environnement côté hébergeur.

Docker.

Empaqueter une application avec son environnement. Incontournable sur des projets complexes, mais à éviter pour un simple site Next.js sur Vercel : une complexité que beaucoup s’imposent par mimétisme, sans bénéfice.

Figma & Excalidraw.

Concevoir l’interface (Figma) et schématiser l’architecture ou les flux (Excalidraw) avant de coder. Erreur courante : soit tout schématiser à l’excès, soit se lancer sans aucune vision d’ensemble.