---
title: Ton premier projet avec Claude Code, en une après-midi
description: Ton premier projet avec Claude Code en une après-midi : un dossier, un fichier de mémoire, une demande, et ton app s'affiche dans ton navigateur.
category: Lancer avec l'IA
format: article
tags: claude-code, débutant, premier-projet, creno
author: Charlie Dallier-Wood
publishedAt: 2026-11-04
updatedAt: 2026-11-08
canonical: https://sycode.fr/blog/premier-projet-claude-code
---
Ton premier projet avec Claude Code tient en une après-midi : tu prépares un dossier, tu écris un fichier de mémoire de moins de quatre-vingts lignes, puis tu demandes à Claude Code de créer ton application et tu la vois s'afficher dans ton navigateur. Tu n'as pas besoin de savoir coder, seulement de savoir dire ce que tu veux.

Dans la [formation Claude Code](/formations/prendre-en-main-claude-code), l'application que je construis sous les yeux de l'élève s'appelle Créno : une prise de rendez-vous pour indépendants, ceux qui jonglent encore entre les SMS et un carnet, coachs, ostéopathes, coiffeuses à domicile. Au bout de l'atelier, une page porte son nom, une phrase qui dit ce qu'elle fait et un bouton « Créer mon compte » qui ne mène encore nulle part. Rien de spectaculaire. Mais c'est une vraie application, dans un vrai dossier, et c'est ce dossier-là qu'on emmène ensuite jusqu'en ligne.

Mon propre premier projet avec Claude Code a démarré exactement comme ça, le 13 mars 2026. Je lui ai demandé de créer un dossier `sycode.fr` dans mon espace de travail, d'y lire mon plan, puis d'en tirer les documents du projet et un `CLAUDE.md`. Vingt minutes plus tard, le dossier avait sa mémoire et son premier commit. Le site que tu lis aujourd'hui descend de ce soir-là.

## Ce que tu as avant de commencer

Il te faut Claude Code installé, un éditeur pour voir tes fichiers (VS Code) et Node.js, qui fait tourner ton application sur ton ordinateur. Si ce n'est pas encore fait, l'installation prend moins d'une heure et je l'ai détaillée dans [installer Claude Code sans être développeur](/blog/installer-claude-code-sans-etre-developpeur). Le reste de l'après-midi se passe dans deux fenêtres : le terminal où vit Claude Code, et ton navigateur.

Il te faut aussi une idée, écrite. Dans la formation, c'est un petit fichier texte, `mon-app.txt`, où je note ce que fait l'app, pour qui, et combien un client accepterait de payer. Quelques phrases suffisent. Ce fichier a un rôle précis : Claude Code ne peut pas deviner ton métier, alors tu le lui donnes par écrit dès le départ, au lieu de le réexpliquer à chaque session.

## Un fichier de mémoire avant la première ligne de code

C'est l'étape que presque tout le monde saute, et c'est celle qui change le reste. Chaque session de Claude Code démarre avec un contexte vide. Tu lui dis mardi que les prix de ton app sont des entiers en centimes, 900 pour 9 €, il s'exécute. Mercredi matin, nouvelle session, il écrit « 9,00 ». Il n'est pas têtu : il a tout oublié.

Le remède est un fichier à la racine de ton dossier, `CLAUDE.md`, que Claude Code relit à chaque démarrage. Je le fais écrire par Claude Code lui-même, à partir de `mon-app.txt`, avec une consigne que tu complètes avec les règles de ton métier :

```
Lis @mon-app.txt, puis écris un fichier CLAUDE.md à la racine de ce projet, de moins de 80 lignes. Il contient : un titre avec le nom de mon app et une phrase qui dit ce qu'elle fait et pour qui ; les commandes (npm run dev, npm run lint, npm run build) ; une carte du code à laisser vide pour l'instant ; des règles : tout texte visible est en français, aucune clé secrète dans le code, aucune nouvelle dépendance sans me le demander, les prix sont des entiers en centimes ; et une section « Fini veut dire » : le lint passe, le build passe, et la page modifiée a été ouverte dans le navigateur. Montre-moi le fichier avant de l'enregistrer.
```

La section « Fini veut dire » est celle que je mets en premier dans tous mes projets. Sans elle, Claude Code s'arrête quand lui l'estime, et un assistant qui veut bien faire ajoute volontiers un fichier README, des tests, des vérifications pour des cas qui n'arriveront pas. Tu paies cette générosité en temps de relecture.

Pour fermer la boucle, quitte Claude Code, relance-le et demande-lui ce qu'il doit faire avant de dire qu'une tâche est terminée. S'il répond avec tes mots, la mémoire fonctionne. Le détail de ce qu'on y met et de ce qu'on n'y met pas est dans [CLAUDE.md, la mémoire de ton projet](/blog/claude-md-memoire-projet).

## La demande qui crée l'application

Maintenant seulement, tu demandes à Claude Code de construire. Je passe par `create-next-app`, l'outil officiel de Next.js, un des cadres les plus utilisés pour fabriquer un site. Tu n'as pas à le connaître : Claude Code le lance à ta place, et tu lui donnes les limites.

```
Crée une application Next.js dans le dossier courant, sans créer de sous-dossier, avec create-next-app et ses réglages recommandés (TypeScript, Tailwind CSS, App Router, pas de dossier src). Ce dossier contient déjà mon-app.txt et CLAUDE.md : garde-les intacts. Si create-next-app refuse parce que le dossier n'est pas vide, dis-le-moi et propose une solution avant de contourner. Ne lance pas le serveur. Quand c'est terminé, explique en quelques phrases simples ce qui a été créé.
```

Deux phrases font le travail. « Garde-les intacts » protège ta mémoire, que l'outil aurait pu écraser en voulant bien faire. « Propose une solution avant de contourner » t'évite de découvrir après coup qu'il a vidé un dossier pour que ça passe. Du texte défile pendant quelques minutes pendant que les briques se téléchargent, puis Claude Code te résume ce qu'il a créé.

Demande-lui ensuite de te faire visiter, sans rien modifier, et de mettre la carte du code de `CLAUDE.md` à jour d'après ce qui existe vraiment. L'app a maintenant un dossier `app` où vivent les pages, la page d'accueil en tête, et ta mémoire parle de choses réelles.

## Voir ton application dans ton navigateur

Claude Code occupe ton premier terminal. Ouvres-en un second avec le **+** du panneau, et tape :

```
npm run dev
```

Quelques lignes s'affichent, dont `http://localhost:3000` et le mot `Ready`. Ouvre cette adresse : la page de démarrage de Next.js est là. `localhost` veut dire « cet ordinateur » : c'est une maquette posée dans ton salon, que personne d'autre ne voit.

Cette page n'a rien à voir avec ton produit, alors tu la remplaces. Voici la demande pour Créno, à adapter avec ton nom, ta phrase et ton bouton :

```
Remplace la page d'accueil (app/page.tsx) par une page simple pour Créno, une application de prise de rendez-vous pour indépendants. Elle contient : le titre « Créno », la phrase « La prise de rendez-vous simple pour les indépendants », et un bouton « Créer mon compte » qui ne fait rien pour l'instant. Fond clair, texte centré, tout en français. Ne touche à aucun autre fichier.
```

Claude Code montre la modification, souvent en deux colonnes. Lis-la même si le code ne te dit rien : tes mots doivent y figurer, et un seul fichier doit être touché. Bascule sur le navigateur, la page s'est mise à jour toute seule. Fais un deuxième tour pour sentir le rythme (le bouton en vert foncé, une ligne en plus petit sous la phrase), puis un troisième. Chaque demande suit le même cycle : tu formules, il propose, tu regardes le résultat.

Le jour où tu veux faire tout ça avec ton propre nom et ton propre bouton, je l'ai écrit pas à pas dans la leçon gratuite [Ta première app, en une demi-heure](/formations/prendre-en-main-claude-code/claude-code-premiere-app), avec ce qui doit s'afficher à chaque étape.

## Quand une demande tourne mal

Elle tournera mal, et plus vite que tu ne crois : le premier jour, c'est presque toujours une demande trop large. Deux gestes suffisent. `Échap` interrompt Claude Code au milieu d'une action, et `/rewind` te ramène à un point de contrôle, la page redevient ce qu'elle était avant ta dernière demande. Dans la formation je te fais annuler volontairement une demande, pour que le geste soit déjà dans tes doigts le jour où tu en as besoin.

Au-delà de ça, c'est la qualité de la demande qui décide. « Améliore la page d'accueil » ouvre un périmètre immense : Claude Code touche trois fichiers que tu n'avais pas prévus et tu passes un quart d'heure à comprendre lesquels. Ce que je fais, moi, c'est toujours le même découpage : où on est (le contexte), ce que je dois voir quand c'est fini, ce qu'il ne doit surtout pas toucher, et comment il me prouve que c'est fini. Quand une modification a vraiment cassé quelque chose, [revenir en arrière quand l'IA casse tout](/blog/revenir-en-arriere-quand-l-ia-casse-tout) détaille ce que je fais pour ne rien perdre.

## Ce qui manque après l'après-midi

À la fin, tu as une application qui tourne chez toi, et c'est tout. Envoie `http://localhost:3000` à un ami : il verra une erreur, parce que cette adresse n'existe que sur ton ordinateur. L'app n'est pas en ligne. Elle n'a ni comptes ni base de données, donc rien qui empêche un client de lire les informations d'un autre le jour où il y en aura plusieurs. Et le bouton « Créer mon compte » ne fait rien, aucun paiement n'est branché.

Ce n'est pas un défaut de la méthode, c'est l'ordre normal des choses. Ce que tu as ce soir est le début d'un produit à toi, avec un cadre et un dossier propre, pas un produit fini. Le chemin complet, de l'idée au premier client, est dans [créer une application sans savoir coder](/blog/creer-une-application-sans-savoir-coder).

## Mon avis : commence petit, et écris la mémoire d'abord

Je vois deux façons de rater son premier projet : viser trop gros dès la première demande, ou ouvrir Claude Code dans un dossier vide et lui lancer « fais-moi mon app » sans lui avoir rien donné. Dans les deux cas, tu obtiens beaucoup de code que tu ne sais pas relire, et tu n'as plus de point de retour.

Moi je fais l'inverse sur chacun de mes projets : un fichier de mémoire court, des demandes qui touchent une chose à la fois, un résultat que je vérifie dans le navigateur avant d'enchaîner. Ce n'est pas plus lent, c'est la seule manière que j'aie trouvée de garder la main sur ce qu'on construit. Si tu veux le faire avec ton idée plutôt qu'avec Créno, la leçon gratuite te guide de bout en bout : crée ton compte, c'est gratuit, et ton premier projet s'affichera avant ce soir.