Comment maîtriser Claude Code avec 5 projets progressifs ?

Par

Je montre comment maîtriser Claude Code via cinq projets pratiques (web, jeu, mobile, full‑stack, MCP) qui vont du prototype à l’extension d’outils. Vous verrez étapes, exemples de fichiers, bonnes pratiques et tests pour progresser concrètement, projet par projet.

Comment créer votre première web app ?

Créer une première web app avec Claude Code se fait en quatre étapes simples : définir le besoin, demander un scaffold, vérifier les fichiers et tester itérativement.

Flux de travail concret :

  • Définir le besoin : Préciser l’objectif (page statique affichant un message et un bouton qui affiche une alerte).
  • Demander un scaffold : Envoyer un prompt court à Claude Code pour générer les fichiers de base.
  • Vérifier les fichiers : Parcourir index.html, styles.css, app.js et valider les rôles de chaque fichier.
  • Lancer un test local et itérer : Ouvrir index.html ou utiliser Live Server, corriger via la console, puis demander à Claude Code des corrections.

Rôle et contenu minimal des fichiers :

Découvrez égalementQuel outil choisir entre Cursor et Claude Code ?

index.html (structure HTML, inclut CSS et JS) :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Ma Première Web App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Bonjour</h1>
  <button id="btn">Cliquer</button>
  <script src="app.js"></script>
</body>
</html>

styles.css (présentation) :

body { font-family: Arial, sans-serif; padding: 2rem; }
button { padding: 0.5rem 1rem; }

app.js (comportement interactif) :

document.getElementById('btn').addEventListener('click', () => {
  alert('Bouton cliqué !');
});

Prompts efficaces pour Claude Code (formulations courtes) :

  • Génère un scaffold pour une page statique avec index.html, styles.css, app.js et un bouton qui affiche une alerte.
  • Crée uniquement les fichiers minimaux pour une web app statique responsive.
  • Donne des tests manuels rapides et liste les erreurs courantes à vérifier.
Découvrez égalementQuand choisir MCP ou Agent Skills pour vos intégrations ?

Test rapide et correction :

  • Ouvrir index.html directement ou utiliser l’extension Live Server pour rechargements automatiques.
  • Vérifier la console du navigateur (F12) pour erreurs de script ou chemins manquants.
  • Erreurs fréquentes : mauvais chemin vers app.js, faute de frappe d’ID, souci de CORS si ressources externes. Corriger et relancer.

Versioning et commits :

  • Commits simples et fréquents : message clair comme « Init: scaffold app statique ».
  • Demander à Claude Code d’écrire un commit message et un changelog sommaire : prompt exemple — « Écris un message de commit pour l’ajout du scaffold et un changelog de 3 lignes ».
Itération Objectifs Actions concrètes
Prototype Valider l’idée et l’interaction de base Générer scaffold, ouvrir index.html, vérifier bouton/alerte
Itération visuelle Améliorer styles et responsive Modifier styles.css, tester sur mobile, ajuster layout
Version de démonstration Préparer pour partage/PR Nettoyer code, écrire README, commits clairs, changelog

Comment créer un jeu 2D rétro ?

Créer un jeu 2D rétro avec Claude Code permet d’apprendre rapidement la boucle de jeu, la gestion d’entités, les collisions et l’itération sur le gameplay en quelques itérations rapides.

Objectifs pédagogiques — Liste des compétences visées :

  • Comprendre la boucle de jeu (Game Loop) et le maintien d’un framerate constant (60 FPS ≈ 16,67 ms par frame).
  • Gérer des entités (joueur, ennemis, projectiles) avec update/draw séparés.
  • Implémenter la détection de collisions AABB (Axis-Aligned Bounding Box) simple.
  • Gérer le spawn d’ennemis et un système de score persistant.
  • Apprendre l’itération rapide sur gameplay et équilibrage.
Découvrez égalementQu'est-ce qu'une REST API et comment fonctionne-t-elle ?

Plan technique minimal et fichiers :

  • index.html — Contient le <canvas> et charge game.js.
  • game.js — Initialisation, boucle principale, update(), draw(), gestion des entrées.
  • assets/ — Sprites PNG, tilesets et sons courts.

Extrait court illustrant la boucle et la collision (commenté) :

const dt = 1/60; // Intervalle logique fixe à 60 FPS

function update(entity){ // Met à jour position

Découvrez égalementClaude Opus 4.6 ou OpenAI Codex 5.3 : quel LLM coder mieux ?

entity.x += entity.vx * dt;

}

function aabb(a,b){ // Collision AABB simple

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;

}

// Boucle principale simple
let last = performance.now();
function loop(now){
  const elapsed = now - last;
  last = now;
  update(); // Logique: entrées, physiques, spawn
  draw();   // Rendu Canvas
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Prompts types à donner à Claude Code :

  • “Crée une game loop 60 FPS avec update et draw, ajoute gestion des touches et collisions simples.”
  • “Génère un système de spawn d’ennemis toutes les 2 secondes avec vitesse aléatoire.”
  • “Ajoute score, vies et une UI minimale sur le canvas.”

Méthode d’itération visuelle :

  • Demander des changements atomiques (vitesse ennemis +10%, nouveau pattern) et tester 1 modification par commit.
  • Valider rapidement sur navigateur, utiliser hot-reload pour itérations <1 minute.

Conseils de debugging et perf :

  • Afficher logs dans la console et dessiner hitboxes (rectangles semi-transparents) pour vérifier collisions.
  • Mesurer FPS via performance.now() et limiter draw si le CPU dépasse 30%.
  • Utiliser spritesheet et drawImage pour réduire surcoût de draw calls (MDN Web Docs pour Canvas).
Étape Fichiers clés Tests à valider
MVP index.html, game.js, assets/player.png Player bouge, boucle 60 FPS, draw correct
Ennemis game.js (spawn), assets/enemy.png Spawn régulier, collisions détectées
Patterns game.js (AI), assets/tileset Varier vitesse, trajectoires testées
Power‑ups & Score game.js, assets/ui.png Score augmente, power‑ups fonctionnels

Comment développer une app mobile avec React Native ?

Développer une app mobile cross‑platform avec Expo et Claude Code en 5 étapes pratiques, depuis l’initialisation du projet jusqu’au test sur appareil.

Prérequis et initialisation.

Installer Node.js, Expo CLI (npm install -g expo-cli) et Expo Go sur l’appareil. Initialiser le projet avec expo init MonApp, choisir le template Managed (blank). Structure minimale : /assets, /screens, /components, App.js, package.json.

Exemple d’App.js (navigation de base).

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

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

Explication : NavigationContainer gère l’état de navigation. createStackNavigator crée une pile d’écrans. initialRouteName définit l’écran de démarrage.

Exemple d’écran (HomeScreen.js).

import React from 'react';
import { View, Text, Button, FlatList } from 'react-native';

export default function HomeScreen({ navigation }) {
  const data = [{id: '1', title: 'Item 1'}];
  return (
    
       i.id}
        renderItem={({item}) => (
          
  );
}

Explication : FlatList pour listes performantes. navigation.navigate passe des paramètres avec l’écran cible.

package.json minimal.

{
  "name": "MonApp",
  "dependencies": {
    "expo": "^48.0.0",
    "react": "18.2.0",
    "react-native": "0.71.0",
    "@react-navigation/native": "^6.0.0",
    "@react-navigation/stack": "^6.0.0"
  }
}

Prompts pour Claude Code (phrases précises).

  • Demander de créer un écran : « Génère un écran React Native nommé ProfileScreen avec FlatList, pull-to-refresh et props de test, export par défaut. »
  • Demander un composant réutilisable : « Crée un composant ButtonPrimary avec style responsive, accessibilité et props onPress, title. »
  • Demander styles responsive : « Fournis un style utilisant Flexbox, Dimensions API et pourcentage de largeur, avec commentaires. »

Procédure de test.

Lancer expo start, scanner le QR avec Expo Go pour test rapide. Activer « Debug Remote JS » pour debugger dans Chrome ou utiliser React Native Debugger pour breakpoint et inspection réseau. Prendre en compte les différences iOS/Android : bouton back Android, SafeAreaView pour iOS notch, tailles de police et rendu des ombres différents.

Bonnes pratiques responsive et tests utilisateurs rapides.

Utiliser Flexbox pour layout, Dimensions ou percentage pour tailles, PixelRatio pour les polices. Tester sur plusieurs tailles d’écran via Expo Device, et faire des tests utilisateurs rapides (5 utilisateurs suffit souvent pour détecter les principaux problèmes selon heuristiques d’usabilité).

Prototype écran Tests à effectuer Critères de validation (UI, navigation, performance)
Home (liste) Chargement, pull-to-refresh, navigation vers Details Éléments lisibles, navigation OK, FPS stable
Details (données) Paramètres reçus, rendu image, offline Données correctes, gestion erreur, temps de réponse
Flow complet Back button Android, safe area iOS, rotation écran Navigation fluide, aucuns crashs, layout adaptatif

Comment construire et déployer une application full‑stack ?

Lancer un premier projet full‑stack demande d’orchestrer Front, API, Base et Auth tout en gardant une trajectoire simple pour apprendre rapidement.
Préconisation d’architecture : Frontend React pour l’UI, Backend Node/Express pour l’API, PostgreSQL en production et SQLite pour démarrer localement (SQLite est léger, PostgreSQL offre ACID et scalabilité).

  • Extraits essentiels : serveur Express minimal, routes CRUD, migration SQL, et un fetch() client pour appeler l’API.
// server.js - Express minimal
const express = require('express');
const jwt = require('jsonwebtoken'); // JSON Web Token
const app = express();
app.use(express.json());
// Middleware basique d'authentification JWT
function auth(req,res,next){
  const h = req.headers.authorization;
  if(!h) return res.status(401).end();
  const token = h.split(' ')[1];
  try{ req.user = jwt.verify(token, process.env.JWT_SECRET); next(); }
  catch(e){ res.status(401).end(); }
}
// Routes CRUD simples
app.get('/api/items', async (req,res)=>{ /* récupérer depuis la DB */ res.json([]); });
app.post('/api/items', auth, async (req,res)=>{ /* insérer dans la DB */ res.status(201).json({}); });
app.listen(process.env.PORT||3000);

-- migration.sql
CREATE TABLE items (
  id SERIAL PRIMARY KEY,
  name TEXT NOT NULL,
  created_at TIMESTAMP DEFAULT NOW()
);


// fetch côté client (expliqué ci‑dessous)
fetch('/api/items', { headers:{ Authorization: 'Bearer '+token }})
  .then(r=>r.json()).then(data=>console.log(data));

Explication : Le fetch envoie le JWT dans l’en‑tête Authorization. Le serveur vérifie le token avec la clé stockée dans .env (JWT_SECRET). Toujours valider et assainir les données côté serveur pour éviter les injections.

Sécurité et bonnes pratiques : stocker les secrets dans .env (ne pas les committer), utiliser HTTPS, préférer httpOnly cookies pour JWT si possible, appliquer la validation avec une librairie (Joi/Zod), ajouter rate limiting et logging.

Déploiement simple : Front sur Vercel (npm run build), Backend sur Render ou Railway (Dockerfile ou build command: npm start). CI/CD basique : tests -> build -> deploy. Variables d’environnement typiques : DATABASE_URL, JWT_SECRET, NODE_ENV.

Utilisation de Claude Code : Demander la génération d’un Dockerfile multi‑stage, un script de déploiement (bash) et un template GitHub Actions (tests, build, push). Tester le pipeline en demandant à Claude Code de simuler les étapes et d’indiquer les points d’échec probables.

Composant Responsabilité Tests de recette
Frontend UI, appels API Build OK, calls API renvoient 200
Backend CRUD, Auth Endpoints retournent données, JWT validé
Base Stockage persistant Migrations appliquées, données persistantes
Auth JWT issuance/verification Login génère token, accès protégé refusé sans token
CI/CD Tests, build, déploiement Pipeline vert, déploiement automatique

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

Le MCP (protocole d’Anthropic pour connecter un agent à des outils externes) permet à Claude Code d’appeler des services externes de façon standardisée. Étendre le MCP signifie exposer des endpoints sécurisés qui permettent à Claude Code d’accéder à vos bases, APIs et workflows tout en gardant le contrôle sur les actions possibles.

Conception d’un serveur MCP simple en Node.js/Express :

  • Créer un endpoint de discovery qui décrit les capacités (actions, paramètres, schémas).
  • Ajouter un endpoint webhook pour recevoir appels asynchrones et notifications.
  • Mettre en place un contrat d’échange basé sur un auth token signé ou JWT pour authentifier Claude Code.
  • Prévoir des routes d’actions (/run, /enrich, /search) qui valident le schéma des inputs et retournent un résultat structuré.

Extrait minimal server.js (enregistrement, validation token, endpoint /run) :

// server.js - minimal MCP server
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());

// Token simple en mémoire (remplacer par vault/secret manager en prod)
const VALID_TOKENS = new Set(['s3cret-token']);

// Discovery endpoint pour Claude Code
app.get('/mcp/discover', (req, res) => {
  res.json({service: 'mon-mcp', actions: ['search','enrich']});
});

// Middleware de validation du token
function authMiddleware(req, res, next) {
  const token = req.header('Authorization')?.replace('Bearer ','');
  if (!token || !VALID_TOKENS.has(token)) return res.status(401).json({error:'unauthorized'});
  next();
}

// Endpoint d'exécution d'action
app.post('/run', authMiddleware, async (req, res) => {
  const {action, params} = req.body;
  // Validation minimale des inputs
  if (!action) return res.status(400).json({error:'missing action'});
  // Exemple d'action : recherche simple
  if (action === 'search') {
    // Remplacer par appel réel à DB/API
    const results = [{id:1, title:'résultat'}];
    return res.json({ok:true, results});
  }
  res.status(400).json({error:'unknown action'});
});

app.listen(3000, () => console.log('MCP server listening on 3000'));

Considérations de sécurité et permissions :

  • Contrôle d’accès : Utiliser JWT, rotation de clés et scopes pour limiter les actions.
  • Validation des inputs : Rejeter tout payload non conforme aux schémas JSON Schema pour éviter l’injection.
  • Limites de rate : Appliquer des quotas par clé pour prévenir l’abus (rate limiting).
  • Logging et audits : Conserver logs d’appels, réponses et décisions d’autorisation pour traçabilité (conformité RGPD si données personnelles).

Tester l’intégration avec Claude Code :

  • Utiliser des mocks d’API pour simuler erreurs et latence avant production.
  • Faire des requêtes de diagnostic (health/discover/run) avec tokens de test.
  • Réaliser tests end‑to‑end en staging et prévoir une stratégie de rollback (feature flags, déploiement canari).

Exemples d’usages concrets :

  • Accès sécurisé à une base client pour enrichir une réponse en temps réel.
  • Déclenchement d’un workflow n8n pour automatiser des tâches humaines après validation.
  • Lecture/écriture dans un CRM pour créer ou mettre à jour des fiches client depuis une conversation.
Composant MCP Responsabilités Risques Tests recommandés
Discovery Décrire capacités et schémas Mauvaise description -> mauvaise utilisation Validation schéma, test contractuel
Auth Valider identité et scopes Compromission token Pentest, rotation clés, tests d’expiration
Actions (/run) Exécuter logique métier Injection, fuite de données Tests unitaires, fuzzing, validation input
Logging Traçabilité et audits Stockage de données sensibles Revue logs, masking, retention policy

Envie de lancer votre premier projet Claude Code dès maintenant ?

Ces cinq projets proposent une progression claire : prototype web pour comprendre le flux, jeu 2D pour itérer la logique front, React Native pour mobile, full‑stack pour la coordination des couches, puis extension MCP pour connecter Claude Code à vos outils. En suivant ce parcours vous acquérez des compétences pratiques : prototypage rapide, débogage itératif, déploiement et intégration sécurisée. Bénéfice pour vous : passer de l’idée au résultat mesurable, capable d’être déployé et intégré à vos workflows pour gagner du temps et fiabiliser vos développements.

FAQ

  • Qu’est‑ce que Claude Code et à quoi sert‑il ?
    Claude Code est un assistant de codage agentique d’Anthropic capable de lire et modifier du code, exécuter des commandes, créer des commits et se connecter à des outils externes via un protocole d’extension. Il sert à automatiser des tâches de développement, prototyper et accélérer les itérations.
  • Que signifie MCP et pourquoi l’utiliser ?
    MCP désigne le protocole d’Anthropic pour connecter Claude Code à des services externes (endpoints, bases, outils). On l’utilise pour donner à Claude Code un accès contrôlé à vos données et systèmes, étendant ainsi ses capacités opérationnelles.
  • Par où commencer si je suis débutant ?
    Commencez par le projet web simple : demandez à Claude Code de générer un scaffold HTML/CSS/JS, testez localement et itérez. C’est le moyen le plus rapide pour comprendre le flux de travail et gagner en confiance.
  • Comment tester et sécuriser un serveur MCP ?
    Testez avec des mocks et environnements de staging, validez les tokens d’authentification, limitez les permissions, ajoutez du logging et des contrôles de rate. Ne donnez jamais d’accès production irrévocable sans audit préalable.
  • Combien de temps pour devenir autonome avec Claude Code ?
    Avec une pratique régulière sur ces 5 projets, on observe une montée en compétences tangible en quelques semaines : prototypes en 1–2 jours, mobile/full‑stack en quelques semaines, et MCP en phase avancée après pratique et tests.

 

 

A propos de l’auteur

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

Retour en haut
AIgenierie