Comment apprendre Claude Code avec 5 projets pratiques ?

Je propose une progression de cinq projets pratiques qui vous emmènent du prototype simple à l’extension MCP avancée. Vous verrez prototypage web, jeu 2D, mobile, full‑stack et création d’un serveur MCP pour étendre Claude Code.

Par où commencer avec Claude Code ?

Commencez par comprendre le workflow de base : demander une idée, laisser Claude Code générer le projet, relire, exécuter les tests et itérer avec commits clairs.

Présentation rapide de Claude Code et ressources

Claude Code est un assistant de développement d’Anthropic capable d’éditer des fichiers, d’exécuter des commandes, de lancer des tests automatisés et de produire des commits. Intégrations via MCP (interfaces d’intégration fournies par Anthropic) permettent de connecter CI/CD et dépôts. Documentation officielle : https://platform.anthropic.com/docs et page produit : https://www.anthropic.com/. Quelques tutoriels techniques utiles se trouvent sur le GitHub d’Anthropic : https://github.com/anthropic-ai.

Flux de travail pas à pas

• Définir l’objectif du prototype : préciser critères d’acceptation, sortie attendue et contraintes de temps.
• Rédiger un prompt initial clair pour Claude Code : inclure stack, structure de repo et tests attendus.
• Exécution initiale et inspection des fichiers générés : ouvrir les fichiers clés et lire le README.
• Lancer les tests ou commandes. Exemples de commandes bash simples :

npm install
npm run dev
npm test

• Corriger via prompts itératifs : demander « Corrige l’erreur X dans src/app.js » ou « Ajoute un test unitaire pour la fonction Y ».
• Commit et message Git : écrire des commits atomiques et clairs.

Exemples de prompts

# Prompt initial
"Crée un prototype React + Vite avec une page /login, tests Jest pour validation, package.json minimal."

# Correction de bug
"Erreur: TypeError dans src/auth.js à la ligne 42. Affiche le fichier et propose un patch."

# Ajout de fonctionnalité
"Ajoute l'authentification par JWT, stocke le secret dans .env et fournis les tests d'intégration."

Exemples de messages de commit concis

• Ajout: prototype Vite + React et tests initiaux
• Fix: corrige NullPointer dans auth.js
• Feat: ajout JWT auth et .env.example

Conseils pratiques

Structurer le repo avec src/, tests/, README. Vérifier et verrouiller les dépendances (commiter package-lock.json ou pnpm-lock.yaml). Prévoir des tests unitaires simples avec Jest ou Vitest (Jest = framework de tests JavaScript, Vitest = alternative rapide compatible Vite).

Sécurité basique

Ne pas exposer clés/API dans le prompt. Utiliser des fichiers .env et .gitignore. Consulter OWASP pour bonnes pratiques : https://owasp.org/.

Action	Commande d’exemple	Résultat attendu
Installer dépendances	npm install	Dossier node_modules + package-lock.json
Lancer dev	npm run dev	Serveur local démarré
Tester	npm test	Tests unitaires verts / rapports d’erreur
Commit	git commit -m « Fix: corrige auth »	Historique lisible et atomicité

Compétences acquises ici — prompting structuré, revue de code et tests simples — seront directement utiles pour créer une application web simple dans le chapitre suivant.

Comment créer un prototype web simple ?

Commencer par un prototype web minimal permet d’itérer vite, valider des hypothèses et livrer une première démo sans surdévelopper. MVP signifie Minimum Viable Product : une version avec juste les fonctionnalités nécessaires pour tester l’idée. Prototyper rapidement réduit le risque et accélère les retours utilisateurs.

Voici des prompts et étapes pour obtenir un prototype via Claude Code :

• Demander la structure initiale : « Génère un projet Vite + React minimal avec package.json, src/main.jsx, src/App.jsx et index.html. Inclure un composant affichant une liste et de l’état local, et un script dev. ».
• Demander une page pure HTML : « Crée une page index.html, styles.css et app.js avec une landing simple et un bouton qui incrémente un compteur. ».
• Obtenir les commandes d’exécution : « Fournis les commandes exactes pour lancer le projet (création, installation, dev). ».

Instructions d’exécution typiques :

• Créer le projet : npm create vite@latest my-app –template react.
• Installer les dépendances : cd my-app && npm install.
• Lancer le serveur de dev : npm run dev. Vérifier l’app sur http://localhost:5173 (adresse Vite par défaut).

Pour itérer, demander des améliorations incrémentales :

• Améliorer l’UI : « Rends le header responsive, ajoute un style simple avec variables CSS et une palette accessible. ».
• Ajouter une API fake : « Ajoute un endpoint Express GET /status renvoyant {status:’ok’} et un script nodemon pour dev. ».
• Écrire des tests E2E : « Génère un test Playwright basique qui vérifie que la page charge et que le compteur incrémente. ».
• Corriger un bug : « Le bouton n’affiche pas le bon nombre après rafraîchissement. Propose une correction et explique la cause. ».

Exemples de code à générer :

// src/App.jsx
import {useState} from 'react';
export default function App(){
  const [items,setItems] = useState(['A','B']);
  const add = ()=> setItems(s=>[...s,`Item ${s.length+1}`]);
  return (
    

      Ajouter
      
{items.map((it,i)=>
{it}
)}
    
  );
}

// server/index.js
const express = require('express');
const app = express();
app.get('/status',(req,res)=>res.json({status:'ok'}));
app.listen(3000,()=>console.log('API sur :3000'));

Bonnes pratiques de commits et revue :

• Faire des commits atomiques avec message clair (type: scope – action : sujet).
• Créer des PR petites, inclure checklist : build OK, tests unitaires, E2E, lint passé.
• Demander une revue pair programming pour logique critique et sécurité.

Étape	Commande	Checks qualité
Scaffold	npm create vite@latest my-app –template react	App démarre, pas d’erreur console
Dev	npm install && npm run dev	Pages accessibles, lint OK
API	node server/index.js	GET /status renvoie JSON

Les compétences front, l’itération rapide via prompts et la gestion d’assets se réutilisent directement pour un jeu 2D : mêmes boucles d’événements, rendu et gestion d’état, plus création d’assets et logique de collision.

Comment développer un jeu 2D rétro ?

Prototyper un shooter spatial 2D consiste à laisser Claude Code générer la logique de jeu, les contrôles et des assets simples, puis itérer rapidement sur le gameplay.

Objectif et scope du projet : Définir mécaniques, technologie et contraintes avant de coder.

• Présentation rapide des mécaniques : Mouvement du vaisseau, tirs, collisions AABB (Axis-Aligned Bounding Box), score et vagues d’ennemis.
• Technologie recommandée : HTML5 Canvas pour prototypage pur, Phaser pour features prêtes à l’emploi, p5.js pour simplicité pédagogique.
• Contraintes : Prototype jouable en 1–2 jours, canvas 800×600, target 60 FPS, assets vectoriels simples pour itérations rapides.

Prompt patterns pour générer une base de jeu : Exemples de prompts à donner à Claude Code.

Génère un index.html minimal qui charge src/game.js et un canvas 800x600.

Crée src/game.js avec une boucle requestAnimationFrame, update() et draw(), target 60 FPS.

Ajoute gestion clavier (flèches, espace), collisions AABB, spawn d'ennemis toutes les 2s et système de score.

Exemples de code à demander à Claude Code : Snippets à générer et où les placer.

• Loop principal (fichier public/index.html charge src/game.js).

// src/game.js
let last=0;
function loop(ts){
  const dt=(ts-last)/1000;
  last=ts;
  update(dt);
  draw();
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

• Gestionnaire de collisions AABB (fichier src/game.js).

function aabb(a,b){
  return a.xb.x && a.yb.y;
}

• Système de projectiles et cleanup hors écran (fichier src/game.js).

function spawnBullet(x,y,vel){
  bullets.push({x,y,vel});
}
function updateBullets(dt){
  bullets=bullets.filter(b=>{
    b.x+=b.vel.x*dt;
    b.y+=b.vel.y*dt;
    return b.x>-50 && b.x<850 && b.y>-50 && b.y<650;
  });
}

Tester et itérer : Écrire tests simples et déboguer la logique.

• Écrire tests unitaires pour utilitaires (aabb, clamp) avec Jest ou simple assertions.
• Tests manuels : vérifier framerate, spawn, collisions; utiliser console.log et « visual helpers » comme hitbox wireframes pour débogage.

Optimisation et assets : Générer sprites SVG/PNG via code, compresser et loader.

• Créer SVG simples à la volée (formes géométriques), exporter PNG si besoin et compresser avec pngquant.
• Limiter Claude Code pour assets complexes : préférer générateurs vectoriels ou artiste pour pixel art détaillé.

Mécaniques implémentées	Commande de build	Points de contrôle qualité
Déplacement, tir, collisions, ennemis	npm run dev (serveur local) / build	60 FPS stable, pas de fuites mémoire, hitboxes correctes

Transposer au mobile implique d'adapter contrôles (touch, joystick virtuel), mise à l'échelle responsive du canvas et optimisations d'input/latence ; ces patterns sont détaillés au chapitre mobile.

Comment construire une appli mobile React Native avec Expo ?

Construire une appli mobile React Native avec Expo permet d'aller vite : prototypez une UI mobile‑first, validez des flux et itérez avec reload instantané. Expo est adapté au prototypage rapide (voir https://docs.expo.dev) et React Native fournit la base UI (voir https://reactnative.dev).

Objectif du projet mobile : Navigation simple avec deux à trois écrans, formulaires et stockage local pour persister des données hors‑ligne. Expo facilite le déploiement et le test sur appareils réels sans configuration native lourde.

Étapes pratiques :

• Créer le projet : expo init my-app -t blank puis cd my-app.
• Installer navigation : npm install @react-navigation/native @react-navigation/stack et expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context.
• Démarrer : expo start pour tester avec Expo Go.
• Structure recommandée : /src/components, /src/screens, /src/navigation, /src/store, /assets.

Prompts exemples pour Claude Code :

• Générer trois écrans React Native (Home, Details, Settings) avec formulaires et validation simple.
• Créer un store léger avec Zustand ou React Context pour gérer l'état utilisateur et la synchronisation hors‑ligne.
• Fournir styles responsive mobile‑first (flex, rem dynamiques, breakpoints simples).

// App.js (extrait)
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './src/screens/Home';
import Details from './src/screens/Details';
const Stack = createStackNavigator();
export default function App(){
  return (
    
      
        
        
      
    
  );
}

// Exemple Screen.js
import React from 'react';
import { View, Text, Button } from 'react-native';
export default function Home({navigation}){
  return (
    
      Accueil
      navigation.navigate('Details')}/>
    
  );
}

// AsyncStorage simple
import AsyncStorage from '@react-native-async-storage/async-storage';
const save = async (key, value) => { await AsyncStorage.setItem(key, JSON.stringify(value)); };
const load = async key => JSON.parse(await AsyncStorage.getItem(key) || 'null');

Tests et debugging : Tester avec Expo Go sur appareil. Utiliser React DevTools et Flipper pour inspecter composants et réseau. Ajouter jest-expo pour tests unitaires et écrire tests d'intégration simples pour navigation et forms.

Bonnes pratiques UX mobile : Favoriser gestuelles naturelles, cibles >=44px, optimiser images (WebP, lazy load) et éviter reflows coûteux.

Commandes clés	expo init, npm install @react-navigation/native, expo install ..., expo start
Fichiers clés	/src/screens/Home.js, /src/navigation/index.js, App.js, /src/store/index.js
Critères pour full‑stack	Authentification fonctionnelle, persistance côté serveur, endpoints REST/GraphQL, synchronisation conflits

Pour passer au full‑stack, prévoir une API REST/GraphQL (token JWT), sécuriser endpoints et implémenter refresh token côté mobile pour l'authentification et la synchronisation des données.

Comment étendre Claude Code avec un serveur MCP personnalisé ?

Créer un serveur MCP (Message Connector/Proxy) permet d’exposer des outils et APIs à Claude Code pour accéder à des bases de données, des services internes ou exécuter des actions côté serveur; consulter la documentation d’Anthropic sur les intégrations externes est indispensable.

Choisir une stack légère comme Node.js + Express ou Fastify facilite la maintenance et la latence faible. Concevoir une API REST/JSON avec endpoints clairs et contrats JSON (request/response) permet à l’agent de communiquer de façon prévisible. Mettre en place sécurité via JWT, scopes, rate limiting et suivre les recommandations OWASP pour APIs (authentification solide, validation d’entrée, gestion d’erreurs, logging).

Exemple de payload JSON :

{"request":{"tool":"sql-query","params":{"query":"SELECT COUNT(*) FROM users"}}}

Réponse attendue :

{"response":{"status":"ok","result":{"count":123}}}

Étapes concrètes pour implémenter (Node/Express) avec validation AJV et middleware auth :

const express = require('express');
const jwt = require('jsonwebtoken');
const Ajv = require('ajv');
const app = express();
app.use(express.json());

const ajv = new Ajv();
const schema = {type:'object',properties:{tool:{type:'string'},params:{type:'object'}},required:['tool','params']};

function authMiddleware(req,res,next){
  const auth = req.headers.authorization;
  if(!auth){return res.status(401).end();}
  const token = auth.split(' ')[1];
  try{
    const payload = jwt.verify(token, process.env.JWT_SECRET);
    req.user = payload; next();
  }catch(e){return res.status(401).end();}
}

app.get('/mcp/status', (req,res)=>res.json({status:'ok',time:Date.now()}));

app.post('/mcp/execute', authMiddleware, (req,res)=>{
  const valid = ajv.validate(schema, req.body);
  if(!valid) return res.status(400).json({error:ajv.errors});
  // Exemple: dispatch vers outil interne
  const {tool, params} = req.body;
  // Simuler exécution
  res.json({response:{status:'ok',result:{tool,params}}});
});

app.listen(3000);

Pour intégrer avec Claude Code, déclarer le connector en indiquant l’URL HTTPS, les scopes (lecture, exécution), puis partager l’URL signée ou le JWT. Fournir exemples de prompts que Claude enverra et prévoir normalisation des réponses. Capturer logs d’appel et réponses (ex: JSON requestId, duration) et exposer métriques pour monitoring (Prometheus) et traces pour Datadog.

Tester via tests d’intégration (supertest/mocha), déployer sur VPS, Heroku, GCP ou AWS avec HTTPS et certificats automatiques (Let’s Encrypt). Mesurer latence, erreurs 5xx, taux d’auth échoué et appliquer rate limiting.

Endpoints	Schéma JSON	Commande déploiement	Checklist sécurité
/mcp/status, /mcp/execute	{"tool": "string", "params": "object"}	docker build -t mcp . && docker run -e JWT_SECRET=... -p 443:3000 mcp	JWT, scopes, rate-limit, input validation, TLS, logging

Cette extension ouvre des automatisations concrètes, un accès contrôlé aux données internes et des workflows opérationnels plus rapides et traçables.

Prêt à lancer vos projets Claude Code et monter en compétences ?

Ces cinq projets forment une progression pratique : maîtriser le flux basique de génération et itération, créer une app web, développer une logique interactive pour un jeu 2D, prototyper une app mobile Expo puis étendre Claude Code via un serveur MCP sécurisé. En suivant cette séquence vous développez des compétences transférables (prompt engineering, debugging multi‑couches, intégration d’APIs) et obtenez des livrables concrets. Bénéfice direct : réduire le temps de prototypage et industrialiser des automatismes code‑assistés pour accélérer vos développements.

FAQ

• Qu'est‑ce que Claude Code et à quoi sert‑il ?
  Claude Code est un assistant code d’Anthropic capable de lire/modifier des fichiers, exécuter des commandes, lancer des tests, créer des commits et se connecter à des outils externes via des extensions. Il sert à accélérer prototypage, génération de code et tâches répétitives de développement.
• Par où commencer si je n'ai jamais utilisé d'IA pour coder ?
  Commencez par un prototype simple : définissez un objectif clair, demandez à Claude Code de générer la structure, exécutez localement, relisez les fichiers et itérez. Concentrez‑vous sur petits commits et tests basiques pour garder le contrôle.
• Quels sont les risques sécurité à prendre en compte ?
  Ne partagez jamais de clés ou données sensibles dans les prompts. Utilisez .env, validation d’entrée côté serveur, authentification (JWT, scopes) et chiffrement en transit (HTTPS). Appliquez les recommandations OWASP pour APIs.
• Que signifie étendre Claude Code avec MCP ?
  Étendre via MCP consiste à exposer un serveur/connector que l’assistant peut appeler pour exécuter actions ou accéder à ressources internes (bases de données, outils métier). C’est utile pour automatiser workflows hors du simple fichier source.
• Quelles compétences vais‑je acquérir en suivant ces projets ?
  Vous gagnerez en prompt engineering, revue de code assistée, tests et debugging multi‑couches, prototypage web/mobile, et en conception et sécurisation d’un serveur d’extension (MCP). Ces compétences réduisent le time‑to‑market des features.

 

 

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. J’ai accompagné des clients comme Logis Hôtel, Yelloh Village, BazarChic, Fédération Française de Football, Texdecor. Disponible pour aider les entreprises à intégrer Claude Code et automatiser leurs développements => contactez moi.