Comment apprendre Claude Code en 5 projets pratiques ?

Vous apprenez Claude Code en cinq projets progressifs couvrant prototypage web, jeu 2D, mobile, full‑stack et extension via MCP. Cet article détaille chaque projet, les compétences visées et ressources pour avancer pas à pas.

Comment prototyper une app web avec Claude Code ?

On prototype une app web avec Claude Code en lui donnant l’idée, en demandant la génération du squelette, puis en révisant et testant les fichiers produits avant d’itérer.

Cas d’usage simple : une Todo List minimale ou un mini-dashboard. Objectif du prototype : vérifier l’UX de base, la structure React et avoir des routes/pages simples pour itérer rapidement.

Pour formuler les prompts, suivez cette structure claire : Contexte (stack souhaitée), Livrables (liste de fichiers), Contraintes (versions, pas de dépendances inutiles), Tests souhaités, Commandes pour lancer. Précisez le format de sortie (fichiers séparés) et demandez des commits git.

Exemple de prompt à envoyer à Claude Code (demandez un projet Vite + React, minimal) :

Prompt

Génère un projet React via Vite (React + JSX). Crée package.json, src/main.jsx, src/App.jsx, src/components/Todo.jsx et un README. Utilise React 18, bundler Vite. Donne aussi les commandes npm pour installer et lancer. Fournis les fichiers complets.

Contenu minimal attendu pour les fichiers (extrait)

package.json	{« name »: »todo-proto », »version »: »0.0.1″, »scripts »:{« dev »: »vite », »build »: »vite build », »start »: »vite preview »}, »dependencies »:{« react »: »^18.2.0″, »react-dom »: »^18.2.0″}, »devDependencies »:{« vite »: »^4.0.0″}}
src/main.jsx	import React from ‘react’; import {createRoot} from ‘react-dom/client’; import App from ‘./App’; createRoot(document.getElementById(‘root’)).render();
src/App.jsx	import React from ‘react’; import Todo from ‘./components/Todo’; export default function App(){return <div><h1>Todo</h1><Todo/></div>}
src/components/Todo.jsx	import React,{useState} from ‘react’; export default function Todo(){const [list,setList]=useState([]);const [t,setT]=useState( »);return <div><input value={t} onChange={e=>setT(e.target.value)}/><button onClick={()=>{if(t){setList([…list,t]);setT( »)}}}>Add</button><ul>{list.map((it,i)=<li key={i}>{it}</li>)}</ul></div>}

Commandes usuelles : npm install, npm run dev (ou npm run start / npm run build selon scripts).

Pour vérifier les fichiers, lancez npm run dev et ouvrez localhost. Corrigez les erreurs de build en demandant à Claude Code des corrections précises (copier l’erreur, indiquer fichier et ligne). Demandez-lui d’ajouter des tests unitaires simples avec Jest ou React Testing Library et de générer des commits git structurés (message, fichiers modifiés).

Compétences acquises : prototypage rapide, rédaction de prompts précis, revue et correction de code, écriture de tests basiques, créer des commits et une CI simple.

Temps estimé	Difficulty	Livrables	Compétences gagnées
1–3 heures	Faible à moyen	Projet Vite+React minimal, composants, tests basiques	Prototypage, prompts, revue, tests unitaires

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

On crée un jeu 2D rétro avec Claude Code en lui demandant de générer la logique de jeu, l’engine minimale (canvas ou Phaser), les assets simples et des itérations visuelles.

Idée du jeu : Shoot’em up spatial simple avec vaisseau, vagues d’ennemis et power‑ups. Mécaniques clés : mouvement (gauche/droite, haut/bas), tir, collisions (détection entre sprites), score et vies. Contraintes principales : viser 60 FPS pour fluidité, budget mémoire faible (textures dessinées à la volée), et responsive pour tablettes et mobiles.

Choix d’environnement : Vanilla JS + HTML5 Canvas pour comprendre les bases et garder la taille minimale. Phaser (framework léger) si vous voulez gestion d’assets et physique prête à l’emploi. Structure projet recommandée : index.html, css/, main.js, assets/ (sons/images), libs/ (facultatif).

Exemple de prompt à envoyer à Claude Code pour générer main.js :

Génère un fichier main.js en vanilla JS pour un jeu 2D rétro sur canvas.
Initialisation du canvas responsive.
Boucle de jeu via requestAnimationFrame.
Gestion des entrées clavier (flèches + barre espace).
Sprite simple dessiné en code (vaisseau et ennemi).
Détection basique de collision AABB (axis-aligned bounding box).
Commentaires concis et structure modulaire (init, update, draw).
Pas d'assets externes, sons optionnels en data URI.

Extrait clé (boucle + collision) dans un tableau pour intégration rapide :

// Boucle principale
function loop(timestamp){
  const dt = (timestamp - last) / 1000;
  last = timestamp;
  update(dt);
  draw();
  requestAnimationFrame(loop);
}

// Détection AABB (axis-aligned bounding box)
function aabbCollide(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;
}

Tester localement se fait avec un serveur simple, par exemple « python -m http.server 8000 » ou « npx http-server », puis ouvrir http://localhost:8000. Méthode d’itération visuelle : reproduire bug, demander à Claude Code un correctif en collant la portion de code, ajouter logs visuels (hitboxes, vitesses), puis intégrer sons courts (beep en base64) et feedback UX (shake, flash).

Compétences acquises : logique front‑end interactive, debug visuel, prototypage ludique et itérations rapides avec un modèle de code. Tableau synthétique comparatif :

Durée	Outils	Livrables
1–3 jours	HTML5 Canvas, JS, Claude Code	main.js, index.html, prototypes jouables

Comment développer une app mobile React Native avec Claude Code ?

On développe une app mobile React Native avec Claude Code en lui demandant de générer les écrans, la navigation et les composants, puis en testant sur Expo/émulateur.

Prototype cible : Une application de notes simple permettant de lister, créer et consulter une note. Les écrans nécessaires sont Accueil (liste des notes), Note (détail et édition) et Écran de création rapide. Les fonctionnalités minimales : stockage local, navigation en pile, et composants UI réutilisables.

Pour demander à Claude Code de créer un projet Expo managed, préciser «Expo managed» (plateforme gérée pour React Native qui évite le build natif), demander la structure App.js, une pile de navigation (react-navigation), deux ou trois écrans, composants UI et dépendances comme @react-navigation/native, @react-navigation/stack et @react-native-async-storage/async-storage.

Exemples de prompts à donner à Claude Code :

Créer un projet Expo managed named NotesApp. Génère App.js avec React Navigation stack, HomeScreen.jsx, NoteScreen.jsx et components/NoteList.jsx. Utilise AsyncStorage pour persister. Retourne uniquement les fichiers.

Génère HomeScreen.jsx : récupère la liste depuis AsyncStorage, affiche NoteList, bouton pour créer une note.

Génère NoteScreen.jsx : affiche/édite une note, sauvegarde dans AsyncStorage et revient à la liste.

App.js	`import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import HomeScreen from './screens/HomeScreen'; import NoteScreen from './screens/NoteScreen'; export default function App(){ /* Stack navigator */ }`
HomeScreen.jsx	`import React, {useEffect, useState} from 'react'; import { View, Button } from 'react-native'; import NoteList from '../components/NoteList'; export default function HomeScreen({navigation}){ /* load notes, render list */ }`
NoteScreen.jsx	`import React, {useState} from 'react'; import { View, TextInput, Button } from 'react-native'; export default function NoteScreen({route, navigation}){ /* edit/save note */ }`
NoteList.jsx	`import React from 'react'; import { FlatList, TouchableOpacity, Text } from 'react-native'; export default function NoteList({notes, onPress}){ /* render items */ }`

Pour tester, lancer expo start puis ouvrir avec Expo Go sur appareil (scannez le QR) ou via simulateur Android/iOS depuis l’interface Expo. En cas de problème, vérifier les permissions (lecteur/écriture), exécuter expo doctor, et vérifier le linking des dépendances natives si on sort du managed workflow.

Compétences acquises :

Maîtrise basique d’Expo et React Native pour créer et lancer une app.
Implémentation de la navigation (stack) et gestion d’état local via AsyncStorage.
Test sur appareil réel et simulateur, et résolution des erreurs de dépendances natives.
Debugging multiplateforme et structuration de composants réutilisables.

Durée	Difficulté	Livrables
4-8 heures	Débutant → Intermédiaire	App.js, HomeScreen, NoteScreen, NoteList, README

Comment construire et déployer une app full stack avec Claude Code ?

On construit et déploie une app full stack avec Claude Code en lui demandant d’assembler frontend, backend, base de données et scripts de déploiement, puis en testant intégration et authentification.

Type d’application abordée : mini‑SaaS avec authentification, API CRUD et base de données relationnelle. Choix technos plausibles : Frontend React ou Next.js (réactivité + SSR optionnel), Backend Node.js avec Express ou Fastify (performance), Base PostgreSQL en production et SQLite pour tests locaux. Selon le Stack Overflow Developer Survey 2023, React reste largement utilisé, ce qui facilite le recrutement et l’intégration.

Structure du repo : monorepo (packages/frontend, packages/backend, packages/db) ou séparé (repo-front, repo-back). Fichiers clés à demander à Claude Code : server.js/app.js, routes/api/*.js, pages or src for frontend, .env.example, migrations/001_init.sql, package.json avec scripts start/build/migrate, tests/integration/*.spec.js.

Instructions claires à donner à Claude Code : préciser architecture (monorepo vs séparé), versions Node/PG, ORM souhaité (Prisma, Sequelize) et types de tests (supertest pour intégration). Demander explicitement des scripts de migration et un .env.example.

Prompts exemples :

Génère une API CRUD en Node.js + Express pour une ressource "project" avec JWT (HS256) pour auth, endpoints /api/projects, /api/auth/login, migrations SQL, et tests d'intégration avec supertest. Fournis .env.example et scripts npm: start, build, migrate, test.

Génère un frontend React qui consomme l'API, gère le token JWT en localStorage, page de login et liste CRUD, et instructions de build pour production.

Extrait synthétique de POST /login :

Route	POST /api/auth/login
Vérification	Comparer le mot de passe hashé (bcrypt) stocké en DB avec le mot de passe envoyé
Génération token	Créer JWT (payload userId, exp) signé avec SECRET_JWT

Préparation déploiement : build frontend, variables d’environnement (DATABASE_URL, SECRET_JWT), scripts de migration (migrate:up), healthcheck. Options d’hébergement : cloud PaaS ou containers sur un provider générique. Tests post‑déploiement : smoke tests, login, parcours CRUD et vérification des migrations.

Compétences visées : architecture multi‑couche, debugging backend, sécurité basique (JWT, bcrypt), tests d’intégration, scripts de déploiement.

Complexité	Durée estimée	Livrables
Faible à moyen	1–3 jours	API CRUD basique, frontend login/list, scripts de déploiement
Moyen	3–7 jours	Auth JWT, migrations, tests d’intégration, CI simple

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

On étend Claude Code avec un serveur MCP personnalisé en créant un point d’extension qui expose outils, bases et APIs externes à l’agent.

Qu’est-ce qu’un MCP et quel est son rôle ? MCP peut signifier « Microcontroller Protocol » ou « Management Communication Point » selon le contexte agentique. Dans notre cas, il s’agit d’un point d’extension qui traduit les requêtes de l’agent en actions réelles : appels d’API, requêtes SQL, exécution contrôlée de commandes. MCP sert d’interface, de médiateur et de gardien de sécurité entre Claude Code et vos ressources.

Architecture simple et bonnes pratiques

Voici les composants clés :

Endpoint HTTP/REST ou WebSocket pour échanges en temps réel.
Authentification par tokens (JWT ou API keys) et TLS pour chiffrer le transport.
Mapping des commandes reçues vers adaptateurs d’outils (ex : adaptateur SQL, adaptateur shell limité, adaptateur HTTP).
Filtrage et validation des commandes avant exécution (allowlist + sandboxing).

Bonnes pratiques de sécurité : Utiliser des tokens à durée limitée, validation stricte des paramètres, journalisation (logs immuables), limitation de débit, et principe du moindre privilège (RBAC).

Exemple de prompt pour Claude Code :

« Accède au MCP interne ‘mcp-db’, exécute la requête préparée ‘get_user_by_id’ avec param user_id=42 et renvoie uniquement le champ email. »

Exemple d’outil exposé : Connecteur vers une base interne en lecture seule exposant des requêtes préparées. Action limitée à des requêtes nommées pour éviter l’injection.

Schéma JSON des messages :

{
  "id": "uuid",
  "action": "run_query",
  "resource": "mcp-db",
  "command": "get_user_by_id",
  "params": {"user_id": 42},
  "auth": {"token": "eyJ..."},
  "metadata": {"requester": "claude-code", "timestamp": "2026-05-11T12:00:00Z"}
}

Tester localement et surveiller : Simuler avec curl/Postman, écrire tests unitaires qui moquent la DB, surveiller via logs structurés (JSON), exporter traces vers un APM. Bloquer les commandes dangereuses par allowlist et exécuter dans des conteneurs restreints.

Compétences acquises : Intégration d’agents, sécurité API, design d’API, monitoring, RBAC et tests.

Risque	Atténuation	Temps estimé
Exécution non désirée	Allowlist des commandes + sandbox	1-2 jours
Fuite de données	Chiffrement, tokens courts, masking des réponses	2-3 jours
Usage excessif	Rate limiting + quotas	1 jour

Prêt à lancer ces 5 projets pour maîtriser Claude Code ?

En suivant ces cinq projets vous montez en compétences de façon graduelle : prototypage web, logique interactive pour jeux, développement mobile, architecture full‑stack et enfin extension via un serveur MCP. Chaque projet cible compétences opérationnelles testables et réutilisables en production. En pratique, vous gagnez en vitesse de prototypage, qualité de debugging et capacité à intégrer Claude Code dans vos workflows. Résultat concret : moins de temps à produire des MVP et plus d’autonomie technique pour vos équipes, un bénéfice direct pour vos initiatives produit et business.

FAQ

Qu’est‑ce que Claude Code et à quoi sert‑il ?
Claude Code est un agentique d’Anthropic capable de lire, éditer et exécuter du code, d’écrire des tests, de créer des commits et d’interagir via des serveurs MCP. Il sert à accélérer prototypage, correction et automatisation de développement.
Faut‑il des compétences préalables pour commencer ces projets ?
Des notions de JavaScript et git suffisent pour démarrer le premier projet. Les autres projets demandent progressivement React, notions de game loop, React Native et concepts backend (API, DB). Claude Code réduit la courbe d’apprentissage mais ne remplace pas la compréhension technique.
Comment tester localement les projets produits par Claude Code ?
Utilisez les outils natifs : serveur de développement (npm run dev), Expo pour mobile, navigateurs/émulateurs pour jeux et tests unitaires (Jest, Testing Library). Vérifiez les logs, exécutez les tests et itérez avec Claude Code pour corriger.
Qu’est‑ce qu’un serveur MCP et pourquoi l’utiliser ?
Un serveur MCP expose des outils, APIs et bases de données à Claude Code pour lui permettre d’agir sur des ressources externes. On l’utilise pour étendre les capacités de l’agent en limitant et contrôlant les actions autorisées.
Quels risques de sécurité prévoir avec Claude Code ?
Principaux risques : exécution de commandes non souhaitées, fuite de données sensibles, accès non autorisé via MCP. Mitigations : tokens d’authentification, filtrage des commandes, logs détaillés, permissions minimales et environnements de test isolés.

A propos de l’auteur

Franck Scandolera — expert & formateur en tracking server‑side, Analytics Engineering, automatisation No/Low Code (n8n) et intégration de l’IA en entreprise. 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. Dispo pour aider les entreprises => contactez moi.

Franck Scandolera

⭐ Analytics engineer, Data Analyst et Automatisation IA indépendant ⭐

Ref clients : Logis Hôtel, Yelloh Village, BazarChic, Fédération Football Français, Texdecor…

Mon terrain de jeu :

Data Analyst & Analytics engineering : tracking avancé (GTM server, e-commerce, CAPI, RGPD), entrepôt de données (BigQuery, Snowflake, PostgreSQL, ClickHouse), modèles (Airflow, dbt, Dataform), dashboards décisionnels (Looker, Power BI, Metabase, SQL, Python).
Automatisation IA des taches Data, Marketing, RH, compta etc : conception de workflows intelligents robustes (n8n, App Script, scraping) connectés aux API de vos outils et LLM (OpenAI, Mistral, Claude…).
Engineering IA pour créer des applications et agent IA sur mesure : intégration de LLM (OpenAI, Mistral…), RAG, assistants métier, génération de documents complexes, APIs, backends Node.js/Python.