Comment apprendre Claude Code avec 5 projets pratiques ?

On peut apprendre Claude Code en suivant cinq projets progressifs, du prototype web jusqu’à l’extension via MCP. Je présente pour chaque projet les objectifs, étapes concrètes, exemples de commandes et ressources pour pratiquer immédiatement.

Comment prototyper une web app avec Claude Code

Objectif pédagogique : Prototyper rapidement une web app fonctionnelle pour apprendre le flux Claude Code (définir l’idée, générer le projet, lancer et itérer).

• Préparer le prompt initial : Indiquer l’objectif fonctionnel, la stack souhaitée (par exemple React + Vite), les contraintes (taille, compatibilité navigateur, pas de dépendances natives) et les endpoints API attendus.
• Inviter Claude à générer l’architecture et les fichiers : Demander l’arborescence, package.json, routes, composants et scripts de démarrage.
• Vérifier les fichiers produits : Contrôler la structure, package.json (scripts, dépendances), routes côté client/serveur, composants principaux et présence d’un README.
• Exécuter localement : Lancer les commandes de build/dev indiquées par Claude et vérifier le rendu dans le navigateur.
• Itérer via prompts : Décrire bugs ou améliorations, demander corrections ciblées (expliquer l’erreur, indiquer fichier/ligne si possible).
• Commiter les changements générés par Claude : Utiliser des commits atomiques pour chaque itération et conserver un historique clair.

Exemples de commandes et fichiers courants :

npm init -y
npm install vite react react-dom
npx vite

Pour un prototype simple HTML/CSS/JS : présence d’un index.html, main.js, styles.css.

Exemple de prompt initial pour Claude Code :

Crée un prototype React + Vite d'une TODO app (liste, ajout, suppression, filtre). Stack : React 18, Vite, CSS simple. Inclure package.json, src/main.jsx, src/App.jsx, index.html, styles.css. Fournir instructions pour démarrer (npm install, npm run dev). Pas d'API externe.

Chaque élément du prompt précise l’objectif (TODO app), la stack évite ambigüités, les fichiers demandés assurent une structure exécutable et l’instruction de démarrage facilite la vérification.

Vérifications de base après génération : Lancer lint (si présent), npm install puis npm run dev, tester manuellement les cas principaux (ajout/suppression), vérifier dépendances pour vulnérabilités (npm audit), s’assurer qu’aucune clé secrète n’est incluse.

Structure	index.html, src/, package.json, styles.css, README
Commandes	npm init -y · npm install · npm run dev · git add/commit
Pièges courants	Dépendances manquantes, scripts absents, chemins relatifs faux, secrets inclus
Conseils pour itérer	Faire des commits atomiques, demander des PRs générés, préciser lignes/fichiers à corriger dans le prompt

Les compétences front-end acquises ici (gestion d’état, composants, bundling) servent directement pour le chapitre suivant sur le jeu 2D, où la création d’interfaces, le rendu et l’optimisation seront réutilisés.

Comment créer un jeu rétro 2D avec Claude Code

Créer un space shooter 2D simple permet d’apprendre l’interactivité front-end, la boucle de rendu et l’itération par prompts en construisant mouvement, tirs, ennemis et collisions.

Architecture recommandée : utiliser HTML5 Canvas en vanilla JS ou un framework léger (p.ex. Preact ou Svelte pour UI). Canvas est préféré ici car il donne un contrôle direct sur le rendu pixel, minimise la surcharge DOM et simplifie la boucle de rendu pour un jeu 2D performant.

Étapes concrètes (extraits et explications).

Initialisation du canvas et boucle principale :

const loop = () => { update(); render(); requestAnimationFrame(loop); }

Gestion des entrées clavier pour le mouvement :

function handleKey(e) { /* left/right/shoot */ }

Structure des entités et mise à jour :

// Exemple simplifié
const player = { x:100, y:400, w:32, h:32, speed:200 };
const bullets = [];
const enemies = [];
function update(dt){ /* déplacer player, bullets, enemies */ }

Détection collision AABB (Axis-Aligned Bounding Box) :

function aabb(a,b){ return a.x < b.x+b.w && a.x+a.w > b.x && a.y < b.y+b.h && a.y+a.h > b.y; }

Gestion des niveaux et du score :

let score=0; let level=1; function nextLevel(){ level++; spawnEnemies(level); }

Utilisation de Claude Code : Générer la logique (ex : pattern d’ennemis), écrire tests unitaires simples, demander corrections de bugs en fournissant stacktrace et extrait de code, et itérer pour ajouter power-ups par prompts successifs.

Pièges courants et solutions pratiques :

• Garder la boucle légère pour éviter les chutes d’FPS (profiling, limiter draw calls).
• Synchronisation input-render : lire l’état des touches dans update(), pas dans render().
• Collisions incorrectes : vérifier les tailles/w/h et utiliser des hitboxes séparées si nécessaire.

Plan d’itération en 4 étapes : Prototype (mouvement+tir), Ajout d’ennemis et patterns, Polish UI (vies, effets), Son & score persistant.

Fichier	Responsabilité	Commande
index.html	Canvas + assets	Ouvrir dans navigateur
main.js	Logique jeu, boucle	Serveur local : npx http-server
assets/*	Sprites et sons	—

Compétence acquise : Maîtriser canvas et la gestion d’état front-end facilite l’adaptation UI/UX vers mobile (touch, résolutions, perfor-mances).

Comment prototyper une appli mobile avec React Native

Prototyper rapidement une appli mobile avec React Native et Expo permet de valider l’UX, tester la navigation et itérer sur le design sans configuration lourde.

1) Indiquez l’objectif : prototype mobile-first avec navigation basique et design responsive.

2) Donnez commandes et étapes concrètes (texte clair) :

npx create-expo-app MyApp
cd MyApp
npx expo start

La commande npx create-expo-app initialise un projet Expo préconfiguré pour iOS et Android. La commande cd entre dans le dossier du projet. La commande npx expo start lance le Metro bundler et l’interface web pour charger l’app sur simulateur ou appareil.

En alternative, choisir le « bare » React Native (react-native init) donne plus de contrôle natif mais nécessite Xcode/Android Studio et une configuration plus lourde.

3) Montrez la structure minimale d’un projet (App.js, components/, navigation/) et incluez exemples de code courts en texte pour un écran d’accueil et une navigation simple (React Navigation) :

// App.js (extrait)
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './components/HomeScreen';
import DetailsScreen from './components/DetailsScreen';

const Stack = createNativeStackNavigator();

export default function App(){
  return (
    
      
        
        
      
    
  );
}

// components/HomeScreen.js
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    
      Accueil
       navigation.navigate('Details')} />
    
  );
}

const styles = StyleSheet.create({ container: { flex:1, alignItems:'center', justifyContent:'center' } });
export default HomeScreen;

4) Expliquez comment demander à Claude Code de générer écrans, composants et styles, puis tester sur émulateur ou appareil physique.

Formuler une requête précise à Claude Code en fournissant le framework (React Native + Expo), le nom du composant, les props attendues et le style souhaité. Tester ensuite sur simulateur iOS/Android via Expo Go ou sur appareil physique via le QR code fourni par expo start.

5) Listez bonnes pratiques mobile-first (tailles tactiles, tests sur différents écrans, gestion offline minimale).

Voici les bonnes pratiques mobiles-first à respecter :

• Prioriser les actions principales et garder un design simple pour écrans petits.
• Respecter des tailles tactiles d’au moins 44×44 px pour les boutons.
• Tester sur plusieurs résolutions et orientations pour vérifier le layout responsive.
• Prévoir une gestion offline minimale (cache des données et messages d’erreur clairs).
• Optimiser images et assets pour réduire la consommation réseau.

6) Donnez conseils pour automatiser builds et tests (ex : commandes expo build ou EAS, tests manuels, snapshot tests) sans entrer dans des détails d’outillage trop avancés.

Utiliser expo build ou EAS (Expo Application Services) pour builds cloud. Écrire des tests unitaires et snapshot avec Jest et react-test-renderer pour composants. Exécuter des tests manuels réguliers sur appareil réel pour valider gestures et perf.

7) Terminez par un tableau résumant fichiers clés, commandes, erreurs fréquentes et comment Claude aide à déboguer.

Fichiers clés	App.js, components/, navigation/, app.json
Commandes	npx create-expo-app, npx expo start, expo publish / eas build
Erreurs fréquentes	Versions incompatibles de dépendances, erreurs Metro bundler, permissions natives manquantes
Comment Claude aide	Génération de composants, suggestions de correction d’erreurs, snippets de configuration pour React Navigation et styles

Penser à relier ce prototype au chapitre full-stack suivant pour ajouter authentification et backend de persistance.

Comment construire et déployer une application full stack

Construire et déployer une application full-stack vous apprend à connecter le front-end, le backend, la base de données, l’authentification et le pipeline de déploiement, tout en montrant comment utiliser Claude Code pour déboguer sur plusieurs couches.

Objectif pédagogique : Rendre le prototype utilisable en production avec une base de données, une couche d’auth et un déploiement automatisé.

Architecture recommandée : Front-end React/Vite pour une bouclette de développement rapide, API Node/Express (ou Fastify pour la performance), base relationnelle Postgres (ou DB managed), et auth via JWT ou provider OAuth (Google/Github). Ces choix sont fréquents en production pour leur écosystème mature, scalabilité et outils de gestion (migrations, ORMs).

Étapes pratiques (commandes exemples) :

• Initialisation repo et dépendances.

  git init
  npm init -y
  npm install express prisma @prisma/client jsonwebtoken bcrypt dotenv
  npm install -D nodemon

• Scripts de démarrage.

  // package.json scripts
  "dev": "nodemon src/index.js",
  "start": "node dist/index.js"

• Migrations DB (Prisma).

  npx prisma init
  npx prisma migrate dev --name init

Extraits courts :

// Route d'auth Express (simplifiée)
app.post('/login', async (req, res) => {
  const { email, password } = req.body;
  const user = await prisma.user.findUnique({ where: { email } });
  // Vérifier mot de passe, générer JWT...
  res.json({ token, user: { id: user.id, email: user.email } });
});

// Fetch front pour afficher user après login
const res = await fetch('/api/profile', { headers: { Authorization: 'Bearer '+token }});
const profile = await res.json();
document.querySelector('#name').textContent = profile.email;

Utiliser Claude Code : Demandez la génération d’endpoints, la rédaction de migrations SQL, l’analyse d’erreurs 500 avec stack trace, et la proposition de correctifs prêts à patcher. Exemple de prompt : «Analyse cette stack trace 500 et propose un correctif précis avec diff git.», ou «Génère une migration SQL pour ajouter une colonne ‘last_login’ TIMESTAMP NOT NULL DEFAULT now();».

Points importants pour le déploiement : Gérer variables d’environnement et secrets (vault/managed secrets), pipeline CI/CD basique (commit→build→deploy), tests smoke (endpoint /health, login). Plateformes courantes : Vercel, Netlify, Render, Railway, Heroku, AWS/GCP/Azure pour infra et DB managed.

Check-list sécurité & conformité :

• Valider et sanitiser tous les inputs côté serveur.
• Stocker les secrets hors du repo, utiliser un gestionnaire de secrets.
• Forcer HTTPS et headers sécurité (HSTS, CSP).
• Gérer rate limiting et verrouillage de compte pour auth.
• Erreurs humaines fréquentes : exposer secrets, migrations non testées, config CORS laxiste.

Composant	Responsabilité	Commande démarrage	Tests	Où Claude aide
Front (React)	UI, appels API	npm run dev	Render, login flow	Générer requêtes, corriger fetch
API (Express)	Endpoints, auth	npm run dev	Unit + smoke	Générer endpoints, debug 500
DB (Postgres)	Stockage, migrations	npx prisma migrate dev	Intégrité, index	Écrire migrations SQL
CI/CD	Build & deploy	Pipeline CI	Build + smoke	Écrire pipeline, tests automatiques

Suite : extension via MCP pour connecter des outils externes.

Comment étendre Claude Code avec un serveur MCP personnalisé

Créer un serveur MCP (Middleware Connector Proxy ou Message Connector Proxy) permet de connecter Claude Code à vos outils, APIs et bases de données pour récupérer données et exécuter actions, ce qui autorise des automatisations et l’accès à des sources internes sans exposer directement vos secrets.

Objectif

Un MCP agit comme pont entre Claude Code et vos systèmes internes, apportant accès à des données privées, orchestration d’actions et enchaînement de workflows automatisés.

Architecture et composants

• Point d’entrée HTTP/WebSocket : Reçoit requêtes signées de Claude Code.
• Middleware d’authentification : Vérifie tokens ou authentification mutuelle (mTLS).
• Adaptateurs pour APIs et DB : Modules isolés qui traduisent requêtes vers chaque système (ex : REST, SQL).
• Logging et sécurité : Traçabilité, chiffrement des secrets, audits et rotation des clés.

Étapes pour démarrer

• Initialiser projet : npm init -y.
• Installer dépendances : npm install express axios dotenv.
• Exposer route : Créer index.js et ajouter une POST /mcp qui reçoit la requête de Claude, appelle un adaptateur et renvoie le résultat.
• Exemple minimal de handler en texte : app.post(‘/mcp’, (req, res) => { /* parse request, call API, return result */ })

Exemples de messages

{
  "id":"msg-123",
  "action":"fetch_customer",
  "params":{"customer_id":"42"},
  "auth":"token-or-signature"
}

{
  "status":"ok",
  "result":{"name":"Dupont","email":"d@example.com"}
}

Sécurité et bonnes pratiques

• Authentification mutuelle (mTLS) ou signatures HMAC pour garantir origine des requêtes.
• Validation stricte du schéma JSON et filtrage des inputs pour éviter injections.
• Quotas et throttling pour limiter abus et logs chiffrés pour audit.
• Déploiement en staging avant production et rotation des clés via vault.

Tester et déboguer

Utiliser logs structurés, rejouer messages en local via fixtures, écrire tests unitaires pour chaque adaptateur (mocks pour APIs). Claude Code peut générer squelettes d’adaptateurs ou jeux de tests pour accélérer l’industrialisation.

Rôle pour l’industrialisation

Un MCP transforme des prototypes Claude Code en composants réutilisables et sécurisés, permettant d’intégrer les workflows automatisés dans des pipelines CI/CD et d’orchestrer des actions à l’échelle.

Responsabilités	Endpoints	Format messages	Risques	Mitigations
Auth, routage, adaptateurs, logging	POST /mcp, GET /health	JSON {id,action,params,auth}	Fuite de données, usurpation	mTLS, validation, quotas, chiffrement

Prêt à lancer votre premier projet Claude Code et monter en compétences ?

Les cinq projets forment une progression pédagogique cohérente : prototype web pour comprendre le flux, jeu 2D pour maîtriser l’interactivité, mobile pour penser UX tactile, full-stack pour la persistance et le déploiement, et serveur MCP pour connecter Claude Code à vos outils. En suivant ces étapes vous apprendrez à générer, tester, corriger et déployer du code tout en tirant parti des itérations guidées par prompts. Le bénéfice pour vous : accélérer le prototypage et rendre vos idées opérationnelles plus rapidement, avec des méthodes réutilisables pour industrialiser les workflows.

FAQ

• Qu’est-ce que Claude Code et à quoi sert-il ?
  Claude Code est un outil d’Anthropic capable de lire, modifier du code, exécuter des commandes, créer des commits et se connecter à des outils externes via un mécanisme serveur (MCP). Il sert à accélérer le prototypage, la génération de code et les itérations guidées par prompts.
• Que signifie MCP et pourquoi c’est utile ?
  MCP désigne le mécanisme serveur permettant à Claude Code de se connecter à des outils, APIs et bases de données externes. Cela permet d’obtenir des données réelles, d’exécuter actions et d’intégrer des workflows automatisés au sein des projets.
• Quel niveau est requis pour suivre ces 5 projets ?
  Les projets sont progressifs : le premier convient aux débutants en web, les suivants demandent des notions de JavaScript, gestion d’API et bases de données. Le niveau monte vers des compétences full-stack et d’infrastructure pour le projet MCP.
• Comment utiliser Claude Code pour déboguer efficacement ?
  Donnez à Claude des informations précises : logs, erreurs, structure des fichiers et résultats attendus. Demandez des corrections itératives et tests automatisés. Vérifiez toujours les modifications avant commit.
• Quelles sont les bonnes pratiques de sécurité avec un MCP ?
  Implémentez authentification mutuelle, validation stricte des messages, gestion des quotas et chiffrement des secrets. Testez en staging et surveillez logs et accès pour détecter comportements anormaux.

 

 

A propos de l’auteur

Franck Scandolera — expert & formateur en Tracking avancé server-side, Analytics Engineering, Automatisation No/Low Code (n8n), intégration de l’IA en entreprise et SEO/GEO. Responsable de l’agence webAnalyste et de l’organisme de formation Formations Analytics. Références clients : Logis Hôtel, Yelloh Village, BazarChic, Fédération Française de Football, Texdecor. Dispo pour aider les entreprises => contactez moi.