Le Touilleur Express

  • Accueil
  • A propos de l’auteur
  • A propos du Touilleur Express
Previous

Comment j’ai codé un MVP en une vingtaine d’heures avec Claude Code

30 juillet, 2025

Jeudi dernier, j’étais dans les bureaux de Back Market Paris, avec quelques collègues. Chaque mois nous avons une présentation plénières par la Direction, suivie d’un apéritif et d’une soirée. Il est 19h10, et Pierre me sert une boisson à base de céréales et de houblon, et la conversation s’engage. Pierre est Product Manager chez Back Market. Il parle de cette idée de créer un site pour gérer les cartes cadeaux. Cela permettrait tout simplement à nos clients d’acheter des cartes cadeaux, à offrir, pour ensuite acheter des appareils recyclés comme un téléphone, un aspirateur ou un ordinateur.

Et cette idée n’avance pas trop, alors qu’elle serait une belle opportunité business. Il m’explique les spécifications. Je discute et je lui dis : « je vais regarder ». J’ai une idée en tête.

Vendredi, 17h, je lance Claude Code, avec lequel je travaille depuis quelques mois. J’installe un serveur MCP et une extension, task-master (dont je parle dans cet article). Jules, un développeur basé à New-York, a préparé un PRD (Project requirement document). Je pars de son document, je change l’infrastructure et l’architecture, et me voilà devant mon terminal.

Je commence par transformer ce PRD en un ensemble de tasks, avec Task-manager. C’est comme lorsque vous créez vos Epics et vos Tickets Jira, sauf qu’ici cela me prend 1 minute. Je relis, vérifie, corrige quelques trucs, mais globalement j’ai un plan projet qui tient la route.

Et je commence à lancer la tâche 1 :

# Task ID: 1
# Title: Project Setup and Infrastructure
# Status: to do
# Dependencies: None
# Priority: high
# Description: Initialize Go project structure, set up development environment, and configure basic infrastructure components
# Details:
Create Go project using go mod init, set up directory structure (cmd/server, internal/handlers, internal/models, internal/services, internal/middleware, web/static, web/templates, migrations). Configure Gin or Fiber web framework, set up PostgreSQL database connection with GORM or pgx, configure Redis for session management. Set up basic Docker configuration and environment variable management. Initialize git repository and create basic .gitignore file.
# Test Strategy:
Verify project compiles successfully, database connection works, Redis connection established, basic HTTP server starts on specified port, environment variables load correctlytest

10 minutes d’attente, j’observe mon terminal. Il configure un projet Go, install Docker et les dépendances, vérifie si le serveur démarre, puis ensuite que le serveur se connecte à la DB embarqué…

10 minutes

Je valide la première tâche et je passe à la deuxième :

# Task ID: 2
# Title: Database Schema and Models
# Status: done
# Dependencies: 1
# Priority: high
# Description: Create PostgreSQL database schema and corresponding Go models for all required entities
# Details:
Create database migrations for Users (id, email, google_id, name, created_at, updated_at), GiftCards (id, purchaser_id, amount, message, design_id, created_at), ValidationCodes (id, gift_card_id, code, is_activated, activated_at, expires_at), Transactions (id, gift_card_id, payment_id, amount, status, created_at), EmailLogs (id, recipient, subject, status, sent_at). Create corresponding Go structs with GORM tags or pgx-compatible structures. Implement proper foreign key relationships and database indexes for performance.

# Test Strategy:
Run database migrations successfully, verify all tables created with correct schema, test CRUD operations on all models, validate foreign key constraints work correctly

Et hop, cela prend 15 minutes, et c’est terminé.

J’avance dans la soirée, les heures défilent. Je décide de déployer mon prototype sur Digital Ocean, qui propose un serveur MCP. Après avoir configuré ma clé Digital Ocean, j’ouvre Claude et je fais ma mise en production en discutant avec la prod. Littéralement.

Un peu plus tard, mon demonstrateur ne ressemble pas trop à nos applications Back Market. Je prends quelques captures d’écran de notre site web Back Market, je dépose les PNG dans un répertoire. Je demande à Claude de créer une Task, je spécifie que je veux qu’il analyse mes captures d’écrans, et qu’il implémente le style visuel de Back Market, sur mes pages.

Les premiers essais sont intéressants, mais assez loin de ce que j’attends.

Cela prendra une bonne demie heure, et nécessitera quelques corrections, mais au final, tests compris, j’ai passé peu de temps pour construire cette interface.

# Task ID: 14
# Title: Implement Back Market Brand Theme with Brand Guidelines
# Status: done
# Dependencies: 1, 13
# Priority: high
# Description: Successfully implemented Back Market's brand guidelines across the application, transforming the visual design to match their signature bright green (#C4F557) and dark (#1D1D1B) color scheme with proper typography using BM Duplet Display and BM Duplet Text fonts.
# Details:
COMPLETED: Successfully integrated Back Market brand theme with all major components updated. Base template now includes proper Back Market fonts (BM Duplet Display, BM Duplet Text, IvarSoft) loaded from tmp/fonts folder. Tailwind configuration updated with official Back Market colors including signature bright green (#C4F557) and dark (#1D1D1B). Hero banner transformed with clean white background, bright green accents, and bold typography. Gift card creation form updated with bright green background matching product screenshots. Recent gift cards section styled with clean white design. Features section redesigned with alternating white/green cards following brand guidelines. All styling maintains responsive design principles and accessibility standards. 56 Playwright tests continue to pass, confirming functionality integrity maintained throughout theme implementation.

# Test Strategy:
Visual regression testing completed successfully with all 56 Playwright tests passing. Comprehensive testing covers all major user flows (home page, authentication, gift card creation, recent cards view) confirming functionality remains intact after theme changes. Responsive design verified across different viewport sizes. Font loading and fallback behavior tested and working correctly. Color contrast ratios validated for WCAG accessibility compliance. Existing test suite confirms no functionality broken by theme implementation. Visual comparison with reference screenshots from tmp/screenshots folder shows successful brand alignment.

Et je continue 2h plus tard, en ajoutant le tunnel d’achat, avec le choix de la carte, et le paiement (simulé)

Il se passe plusieurs heures, durant lesquels j’utilise task-manager pour regarder combien de temps je passe, pour chaque tâche. Claude code prend ensuite l’habitude de créer un tag Git « task-12-start » et « task-12-end », qui me permettra de voir le temps passé par tâche.

Je lui demande de me créer un fichier PROGRESS.md qui me servira pour voir où j’ai passé du temps. J’ai quelques soucis avec la mise en production lié à REDIS et du TLS, mais rien de compliqué (pour un développeur).

Je passe 1h30 à configurer l’authentification avec Google, je retire « Gin template » que je remplace par « templ », bref des trucs qu’un développeur peut rencontrer, et que je sais corriger.

Voici ce que Claude et Task Master ont comptabilisé sur ce projet :

Time Analysis by Task Category

CategoryTasksHoursPercentage
OAuth AuthenticationTask 3 + fixes2.07.1%
Templates & FrontendTask 4 + migration11.842.1%
Email SystemTasks 7.1, 7.2, 7.33.813.6%
HTMX API IntegrationCard HTMX + Job HTMX2.79.6%
Infrastructure SetupTasks 1, 22.07.1%
Testing & ThemeTasks 13, 141.76.1%
Bug Fixes & PolishTasks 11, 121.65.7%
Payment SystemTask 16 + subtasks0.62.1%
Development ToolsTask 150.51.8%
MVP OptimizationTask 180.31.1%

Et qu’est-ce que j’ai codé et réalisé ?

Key Achievements

  1. Full Authentication System – Complete OAuth2 implementation with Redis sessions
  2. Modern Frontend Stack – HTMX + Tailwind CSS with responsive design
  3. Brand Implementation – Complete Back Market visual identity with custom fonts
  4. Testing Infrastructure – Playwright E2E testing framework
  5. Real Product Integration – Hero banner with actual Back Card photo background
  6. Time Tracking System – Git tag-based development time measurement with Task Master integration
  7. Complete Email System – Mailgun integration with Redis-based background job processing, HTML templates, and monitoring endpoints

Technical Stack Implemented

Backend

  • Go with Gin web framework
  • PostgreSQL database with GORM ORM
  • Redis for session storage and background job queue
  • OAuth2 with Google authentication
  • Templ for type-safe Go templates
  • Mailgun API for email delivery with background job processing
  • Background Job System with worker pools and retry logic
  • Content Negotiation supporting both JSON and HTMX responses

Frontend

  • HTMX for dynamic interactions with full API integration
  • Tailwind CSS for styling
  • Back Market Brand Fonts (BM Duplet Display, BM Duplet Text, Ivar Soft)
  • Responsive Design with mobile-first approach
  • Dynamic Templates with server-side rendering for HTMX

Testing & Quality

  • Playwright for end-to-end testing
  • MCP Server Integration for enhanced development workflow
  • Git Workflow with proper commit messages and version control

Infrastructure

  • Task Master AI for project management
  • Claude Code integration for development assistance
  • GitHub repository with proper branching

Qu’est-ce que j’ai appris? Astuces et conseils avec Claude Code

Mes conseils :

  • apprenez à installer dès le départ des serveurs MCP comme context7 ou Playwright (voir cette aide)
  • maintenez un fichier CLAUDE.md à jour à la racine de votre projet.
    • ajoutez tout ce qui améliore le code, ce qui doit être fait pour tester et valider, quels fichiers sont importants
    • indiquez comment lancez les tests, déployer en production, trouver les logs
    • précisez les flows de test pour aider playwright
  • soyez méthodique et travaillez tâche par tâche, en prenant soin de demander à Claude de vous montrer son plan d’exécution
    • utilisez « Think hard / Think harder » dans vos prompts, lorsque le sujet est sensible
  • fermer la session ou videz-là lorsque vous changez de tâche
  • commencez une session en demandant à Claude de lire les fichiers sur lesquels il va devoir travailler
  • prenez du temps pour faire le tutorial Claudde Code
  • testez les subagents sur des workflows spécialisés. Par exemple pour fixer les problèmes de type, pour documenter, pour mettre à jour vos tests… Cela permet de créer des agents qui utilisent moins de token

Combien cela coûte-t-il? Quelles sont les limitations?

Au moment où j’écris ces lignes, été 2025, Claude Code coûte 90 euros par mois en version Claude Max. Sachez d’abord que vous ne pouvez vous en servir que 5 heures par jour. Au delà, le système s’arrête. Anthropic annonce des restrictions à la semaine pour le mois d’août : un utilisateur avec Claude Max peut utiliser entre 140 et 280 heures avec Sonnet 4. Mais uniquement 15 à 35h par semaine, avec Opus 4.

Vous arriverez rapidement à vos 5 heures par jour.

J’utilise Claude Cost Monitor qui me permet d’avoir une idée de ma journée en cours. Le prix de Claude Code Max en Europe est de 90 euros, mais il est facturé $140 pour les US. J’atteins plus rapidement mon usage quotidien, que le nombre de token (220000 par jour).

Et ce MVP alors?

J’ai mis en ligne le résultat, sur mon compte Github. Je ne peux pas malheureusement partager le code source, mais j’ai pu avancer vers la prochaine étape, qui sera de rendre cela possible dans quelques semaines, sur notre infrastructure…

A Suivre…

0 no like

Articles similaires:

The « Robinson » projection – comprendre son système d’information Redis : le créateur du projet passe de Pivotal à Redis Labs Default ThumbnailL'état du marché informatique et quelques idées pour le futur Default ThumbnailPrismic.io, gestionnaire de contenu simple et puissant

Leave a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image

Chercher

Derniers articles

  • Comment j’ai codé un MVP en une vingtaine d’heures avec Claude Code
  • Claude Code et les serveurs MCP : ou comment transformer ton terminal en assistant surpuissant
  • Ni manager, ni contributeur individuel…
  • Les outils de génération de code, la couche confort du développeur ?
  • L’instant T où tu poses ta dém…

Commentaires récents

  • Henri Gomez dans Ni manager, ni contributeur individuel…
  • Pierre Chapuis dans Ni manager, ni contributeur individuel…
  • Nicolas Martignole dans The « Robinson » projection – comprendre son système d’information
  • Lucas dans The « Robinson » projection – comprendre son système d’information
  • Guillaume dans The « Robinson » projection – comprendre son système d’information

Les plus lus

  • Les revenus d’un informaticien indépendant en EURL - 89 728 affichage(s)
  • Optional en Java 8 - 71 049 affichage(s)
  • Quelle est la différence entre volatile et synchronized ? - 65 764 affichage(s)
  • Changer la batterie d’un MacBook Pro de 2011 - 65 651 affichage(s)
  • Retour sur la soirée du lundi 12 juillet chez Doctolib - 63 133 affichage(s)
  • Un modèle de Product Backlog et de Sprint Backlog avec Excel - 57 880 affichage(s)
  • Redis, découverte d’un moteur clé-valeur simple et puissant - 51 058 affichage(s)
  • Comment simuler le navigateur de l'iphone avec Firefox ou Safari ? - 45 760 affichage(s)
  • serialVersionUID mythes et légendes - 41 944 affichage(s)
  • Développeur après 31 ans ? Ridé et chauve tu seras - 39 444 affichage(s)

Mots clés

agile ajax Apple architecture barcamp BarCampJavaParis ddd devoxx esb exo flex geek google grails groovy humeur humour independant iphone Java javascript jazoon jboss jboss seam jsf jug Linux mac mule paris jug parisjug pjug play playframework portlet recrutement ria Scala scrum spring Startup usi usi2010 web xebia

Derniers articles

  • Comment j’ai codé un MVP en une vingtaine d’heures avec Claude Code

    Jeudi dernier, j’étais dans les bureaux de Back Market Paris, avec quelques

    0 no like

    30 juillet, 2025
  • Claude Code et les serveurs MCP : ou comment transformer ton terminal en assistant surpuissant

    Souvenez-vous lorsque nous étions jeunes, et qu’il fallait tout coder à la

    3 likes

    27 juillet, 2025
  • Ni manager, ni contributeur individuel…

    Cet article fait suite à la présentation des outils de génération de

    3 likes

    23 juin, 2025

Mots clés

Apple (32) Architecture (14) Big Data (5) Conference (8) Devoxx (55) Dev Web (37) Doctolib (2) geekevent (1) groovy (2) Innoteria (11) Java (517) Linux (10) Non classé (19) Perso (266) Recrutement (2) Scala (30) scrum (43) Société (3) Staff Engineer (5) Startup (21) Web 2.0 (67)

Le Touilleur Express

Blog par Nicolas Martignole

Contactez-moi : nicolas@touilleur-express.fr

Suivez-moi sur X (Twitter) : @nmartignole

Copyright© 2008 - 2024 Nicolas Martignole | Tous droits réservés
  • A propos de l’auteur
  • A propos du Touilleur Express
  • Reset Password

Le Touilleur Express