Jean-Patrick
Développeur & chef de projet digital
Je conçois et je livre des solutions digitales pour les pros — Shopify, apps, workflows, sites vitrine et e-commerce. Du cadrage à la mise en ligne.
À propos
Responsable Produit, Marketing & Développement chez quelBonPlan depuis 4 ans, où j'ai piloté et livré les 3 sites web du groupe. Formé en école de commerce, autodidacte côté technique — je mixe la vision produit/business avec l'exécution concrète : je pilote, je code, je livre.
Hands-on, itératif, sans bullshit. En parallèle, je prototype pour des marques qui m'intéressent et j'ouvre ponctuellement des missions freelance.
01Méthode
Comment je travaille
Pas de tunnel, pas de sur-ingénierie. Un process court, orienté valeur, où chaque étape sert le besoin réel.
Je comprends le besoin
J'écoute, je challenge, je cadre. Mon passage par le business m'aide à séparer l'essentiel du superflu — on ne code pas pour coder, on résout un problème réel.
Je conçois la bonne solution
Shopify, app sur-mesure, workflow, site custom — je choisis l'outil qui sert le besoin, pas l'inverse. Juste ce qu'il faut, pas plus.
Je livre et j'itère
Du prototype à la mise en ligne, je code et je pilote moi-même. Livraison rapide, feedback, ajustement. Pas de tunnel de 6 mois.
02Réalisations
Références & projets livrés
Sites web du groupe QBP.solutions, conçus et livrés dans le cadre de mes fonctions de Responsable Produit, Marketing & Développement.
pro.quelbonplan.fr
Alternative BtoB aux acteurs historiques du reconditionné. Site Shopify centré sur les attentes entreprises : garanties, sécurité, sourcing, qualité, conformité. Livré en 3 semaines.
quelbonplan.fr
Refonte complète BtoC (reconditionné) : migration sur Shopify, thème Liquid custom, fonctionnalités métier (reprise, estimation, gestion des grades).
qbp.solutions
Site corporate du groupe. Création, maintenance, mises à jour, animations 2D, formulaire de contact.
Prototypages & outreach
Prototypes 48h pour transformer une page éditoriale à fort trafic en outil de conversion. Démarche d'outreach vers des marques reconnues.
Démos spéculatives. Objectif : démontrer par la preuve ce que je livre en 48h.
SeLoger — Portail immobilier
Optimisation d'un guide d'achat immobilier à fort trafic. Restructuration du contenu et de l'expérience pour maximiser l'engagement et la conversion.
LDLC — E-commerce tech
Transformation d'un guide d'achat PC portable en expérience interactive avec parcours persona, specs planchers et recommandations personnalisées.
Boulanger — Électroménager & tech
Transformation d'un guide d'achat NAS en expérience interactive avec parcours par usage, comparateur intégré et recommandations personnalisées.
Alan — Insurtech B2B
Transformation d'un guide « comment choisir sa mutuelle » en comparateur interactif avec questionnaire intégré, recommandation de formule et devis sans quitter la page.
Produits & outils e-commerce
Marque d'expertise et apps Shopify que j'opère en continu — signaux d'autorité sur le créneau performance e-commerce.
ecom-performance.fr
Ma plateforme d'expertise Shopify & CRO. Démontre publiquement méthode, convictions et résultats sur le créneau performance e-commerce.
Back in Stock — App Shopify
App Shopify de notification retour en stock : captation d'email sur produit en rupture, trigger automatique à la remise en stock, dashboard marchand.
03Ce qu'on dit
Retours de collaborations
Témoignages de collègues et interlocuteurs avec qui j'ai travaillé. Section en cours de recueil — première vague de quotes ajoutée prochainement.
Quote d'un pair tech ou CTO — impact concret livré, posture de collaboration, ce que ça change côté équipe.
Quote d'un interlocuteur outreach ou d'un client freelance — posture de livraison, respect des délais, capacité à cadrer.
04Code & expérimentations
Ce que je bricole à côté
Scripts, prototypes, contributions open-source. Un espace pour essayer, apprendre et garder la main côté technique.
PR #1184 — fix d'inférence de type dans le language server Liquid
Correction d'un bug dans TypeSystem.ts : les filtres array (sort, reverse, uniq, compact, where…) perdaient le type d'élément sur le hover. Fix dans les outils officiels que tous les devs thèmes Shopify utilisent au quotidien.
open-vibe-island
Alternative open-source à vibe-island pour utilisateurs intensifs de code agents (Claude Code, Codex, opencode — terminal, Ghostty, cmux, kaku, iTerm). 2 PRs ouvertes côté perfs et intégration Claude.
public-apis
Liste collective d'APIs publiques gratuites, référence incontournable pour trouver une source de données ou un service tiers rapidement. 424k+ étoiles.
repomix
Packe un repo entier en un seul fichier IA-friendly. Parfait pour nourrir un LLM avec une base de code complète (Claude, ChatGPT, etc.). Indispensable pour le pair-programming IA.
codegraph
Graphe de connaissance du code pré-indexé pour Claude Code — moins de tokens, moins d'appels d'outils, 100% local. Intégré à mon workflow sur les gros projets.
05Services
Ce que je peux livrer
Offres taillées sur ce que je pratique déjà. Mission ponctuelle ou accompagnement long terme, je m'adapte au contexte et au rythme.
Tarifs indicatifs — TJM 450–600€ en régie · forfait par livrable défini. Devis précis après cadrage.
Sites Shopify BtoB ou BtoC
Création ou refonte. Thème Liquid custom, sections modulaires, apps sur-mesure, intégrations catalogue. Du cadrage à la mise en ligne.
Réf. · pro.quelbonplan.fr · quelbonplan.fr ForfaitSur devisSites vitrine & corporate
Site statique ou dynamique, animations 2D, formulaires de contact. Création, mises à jour, maintenance continue.
Réf. · qbp.solutions ForfaitSur devisPrototype conversion 48h
Une page à fort trafic qui ne convertit pas ? Je la transforme en outil interactif (quiz, parcours persona, recommandations, comparateur). Livré en 48h.
Réf. · SeLoger · LDLC · Boulanger · Alan ForfaitÀ partir de 2 500€Apps, workflows & automatisations IA
Add-ons Shopify, outils internes, intégrations API. Workflows augmentés à l'IA : Claude Code, MCP servers, agents custom, hooks, CLAUDE.md projet.
Conseil produit & accompagnement
Cadrage, specs, priorisation, roadmap. Vision produit + exécution technique — je pilote et je code. Profil hybride business/tech pour les équipes qui ont besoin d'un interlocuteur unique.
Basé sur 4 ans de Responsable Produit, Marketing & Dev TJM450–600€ / jour06Contact
On se parle ?
Un projet, une mission, une idée à débroussailler — écrivez-moi en direct ou remplissez le formulaire. Je reviens vers vous sous 24h ouvrées.
Jean-Patrick
Full-stack · data · e-commerce
Node · Next · Python · Shopify/Liquid · MongoDB · Docker. 4 ans à livrer, opérer et maintenir des sites e-commerce et des pipelines data en solo. Workflow augmenté à l'IA (Claude Code, MCP, agents custom).
Profil technique
4 ans chez quelBonPlan à construire et opérer 3 sites e-commerce + les outils internes. Fullstack de bout en bout : ingestion, normalisation, matching, API, front, thème Shopify, ops.
Pas de frameworks empilés sans raison. Je choisis l'outil qui sert le besoin, je déploie vite, j'itère. Code lisible, tests pragmatiques sur les chemins critiques, conventions documentées dans un CLAUDE.md pour fluidifier le pair-programming IA.
01Stack
Outils, versions, choix techniques
Stack stabilisée, polyvalente, orientée e-commerce et data. Tout choisi pour la livraison et la maintenance par une seule tête.
| # | Couche | Outils & versions | Usage |
|---|---|---|---|
| 01 | Langages | TypeScript, JavaScript (Node 22), Python 3.12, Liquid, Bash, SQL | Production quotidienne |
| 02 | Frontend | Next.js 14 (App Router), React 18, Tailwind 3, shadcn/ui, Radix | Catalogues, dashboards, landings |
| 03 | Backend | Node.js 22, API routes Next, Express, Fastify, Python CLIs | APIs, workers, ETL |
| 04 | Données | MongoDB 7 (modélisation, aggregation pipelines, index composés), Redis (cache), BigQuery (ponctuel) | Catalogues produits, analytics |
| 05 | E-commerce | Shopify OS 2.0 (thèmes custom, sections JSON templates, metafields, metaobjects), Shopify CLI, Storefront API, Admin API (GraphQL) | 2 stores Shopify BtoB/BtoC |
| 06 | Scraping & data | Python (httpx, BeautifulSoup, Playwright), rate limiting, rotation proxy, déduplication | Pipeline multi-sources quotidien |
| 07 | Infra / ops | Docker, Docker Compose, VPS Linux (Debian), Vercel, Nginx, cron, GitHub Actions, PM2 | Déploiement continu, monitoring |
| 08 | IA & automatisation | Claude Code, MCP servers (Linear, Shopify, CodeGraph, shadcn), agents custom, hooks, skills, Claude API | Pair-programming, automatisations |
| 09 | Tooling dev | fnm, pnpm/npm, poetry, ESLint, Prettier, Biome, Vitest, Playwright | Quotidien |
02Workflow
Comment je code, concrètement
Workflow solo, discipliné, itératif. Chaque projet a son CLAUDE.md racine (conventions, stack, fichiers protégés, opérations dangereuses) + sous-agents spécialisés et hooks pour automatiser la répétition.
Boucle quotidienne
- CadrageIssue Linear ou ticket interne. Scope serré, critères d'acceptation clairs.
- Exploration assistéeSous-agents
Explorepour cartographier le code existant avant de toucher quoi que ce soit. Pas de réinvention. - Plan avant codePour tout ce qui dépasse 2-3 fichiers : plan écrit, validé, puis exécution. Évite les détours coûteux.
- Code & reviewCommits petits, conventional commits (en anglais), PR review avec agent
review. Lint + typecheck systématiques avant commit. - DéploiementGitHub Actions → Vercel (front) ou VPS Docker (back/workers). Pas de staging mystère, logs lisibles.
Extrait CLAUDE.md — conventions projet
# Préférences projet QBP ## Langue & code - Réponses en français - Commits en anglais, conventional commits (feat:, fix:, refactor:) - Noms de variables, fonctions, commentaires : anglais ## Structure & modularité - Jamais de fichier > 500 lignes - Imports relatifs dans les packages, absolus depuis la racine - Après rename/move : mettre à jour tous les imports impactés ## Fichiers protégés (confirmation obligatoire) - next.config.{js,mjs} · package.json (ajout/suppression deps) - Fichiers Shopify Liquid (sections, templates, snippets) - Docker / docker-compose · .env* ## Opérations dangereuses - MongoDB : drop, deleteMany({}), updateMany sans filtre - rm -rf sur dossiers non-temporaires - Migration de base de données
Git workflow
# Branche courte, scope unique git checkout -b feat/product-matching-endpoint # 1 commit = 1 changement logique git add src/api/matching/* git commit -m "feat(api): add product matching endpoint" # Lint + typecheck + tests avant push npm run lint && npm run typecheck && npm test # PR review assistée, puis merge squash gh pr create --title "feat: product matching endpoint"
03IA dans mon workflow
Claude Code, MCP, agents, hooks
L'IA générative n'est pas un gimmick — c'est un outil de productivité qui décuple le solo-dev quand il est bien configuré. Exemples concrets de ce que j'utilise en prod.
Claude Code + CLAUDE.md
Un CLAUDE.md global (préférences, stack, règles) + un par projet (contexte spécifique). Claude Code agit comme un pair-programmer qui connaît les conventions maison. Moins de va-et-vient, plus de livraison.
Sous-agents spécialisés
Agents custom : Explore (recherche code), Plan (archi), qbp-shopify (expertise thème QBP), review (PR review). Isolation du contexte, parallélisation des recherches.
MCP servers
Serveurs MCP branchés : Linear (tickets), Shopify-dev (docs & validation), CodeGraph (graphe sémantique du code), shadcn-ui (composants). Accès direct aux outils métier depuis l'agent.
Hooks & skills
Hooks settings.json pour automatiser : lint au pre-commit, lecture de CLAUDE.md au démarrage, pipeline pre-push. Skills custom (ex: loop, schedule, review) pour les tâches récurrentes.
Exemple — config agent Shopify QBP
--- name: qbp-shopify description: Expert du thème Shopify quelBonPlan. Sections, snippets, templates, config, debug front. tools: [Read, Edit, Write, Glob, Grep, Bash] --- Tu es expert du thème pro.quelbonplan.fr et quelbonplan.fr. Règles : - Toujours lire le snippet/section avant édition - Respecter la structure schema JSON des sections OS 2.0 - Valider via shopify theme check après modification - Ne jamais toucher aux templates sans confirmation
Exemple — MCP Linear → ticket → PR
# 1. Récupérer le ticket via MCP mcp__linear__get_issue({ id: "QBP-423" }) # 2. Explore agent cartographie le code impacté Agent(subagent_type: "Explore", prompt: "...") # 3. Plan → code → commit → PR automatisée gh pr create --title "feat(pro): QBP-423 price tiers" # 4. Review agent relit avant merge Agent(subagent_type: "review", prompt: "Review PR #234")
04Réalisations
Sites QBP — détails techniques
3 sites conçus et livrés en solo dans le cadre de mes fonctions chez quelBonPlan.
Contribution upstream Shopify. J'ai ouvert la PR #1184 sur Shopify/theme-tools (fix d'inférence de type dans le language server Liquid) — la stack qui outille au quotidien tous les devs thèmes Shopify.
pro.quelbonplan.fr — e-commerce BtoB
- Contexte
- Proposer une alternative aux acteurs historiques du marché du reconditionné sur le segment BtoB. Site simple et frontal, centré sur les attentes des entreprises : garanties, sécurité, transparence sur le sourcing, qualité, conformité légale.
- Objectif
- Mettre rapidement en ligne une vitrine crédible pour se positionner auprès d'acheteurs professionnels, avec les éléments de réassurance nécessaires au BtoB.
- Solution
- Développement d'un site Shopify avec thème Liquid custom, structuré autour des blocs BtoB clés (garanties, mentions de sourcing, processus qualité, documents légaux, sécurité). Livré en 3 semaines.
- Stack
- Shopify · Liquid · thème custom · sections modulaires · metafields / metaobjects
- Rôle
- Conception · dev solo · mise en prod · maintenance évolutive
- Statut
- Projet récent — données chiffrées pas encore disponibles, à remonter après une période d'exploitation.
quelbonplan.fr — refonte complète BtoC
0,10% → 1,5%
- Contexte
- Site e-commerce BtoC du groupe QBP.solutions — vente de produits reconditionnés au grand public. Trafic qualifié déjà en place.
- Problème
- Conversion trop faible (~0,10%) malgré le trafic. Ancien CMS rigide : UX/UI non modifiable, design daté, architecture vieillissante. Temps de maintenance élevé et délais d'itération trop longs pour sortir de nouvelles fonctionnalités.
- Solution
- Refonte complète avec migration sur Shopify. Thème Liquid 100% custom (front) et développement de fonctionnalités métier : reprise d'appareils, estimation en ligne, gestion des grades (A/B/C), et logique de catalogue adaptée au reconditionné.
- Résultats
- Conversion ×15 (0,10% → 1,5%) · −70% de temps de maintenance (Shopify + thème clair) · ×3 de réactivité sur les nouvelles fonctionnalités (sections modulaires, metaobjects, flux de déploiement maîtrisé).
- Stack
- Shopify OS 2.0 · Liquid · JSON templates · metafields / metaobjects · app Node custom · Storefront & Admin API GraphQL
- Rôle
- Conception · dev solo (front + app) · mise en prod · maintenance évolutive continue
qbp.solutions — corporate
- Stack
- HTML · CSS · JS · animations 2D
- Périmètre
- Création du site corporate, maintenance continue, mises à jour contenu, animations 2D, formulaire de contact
- Points techniques
- Animations CSS/SVG légères, site statique performant, formulaire avec validation & envoi backend
- Rôle
- Conception · dev · maintenance
Prototypes outreach — guides d'achat
Prototypes 48h pour transformer une page éditoriale à fort trafic en outil interactif de conversion. Stack rapide à itérer, focus UX & parcours.
Démos spéculatives · outreach non-commissionné. La stack et le délai 48h sont réels et reproductibles.
SeLoger — Portail immobilier
Restructuration du guide "Prix de l'immobilier" autour de l'intention utilisateur : recherche par localisation, comparaison de marchés, parcours progressif vers la conversion.
LDLC — Guide PC portable
Guide monolithique remplacé par une expérience segmentée par persona (étudiant, gamer, créatif, famille). Specs planchers, pièges à éviter, verdicts argumentés.
Boulanger — Guide NAS
Guide transformé en outil d'aide à la décision structuré par usage (sauvegarde perso, multimédia/Plex, PME, vidéosurveillance). Quiz, specs contextualisées, upsell accessoires.
Alan — Choisir sa mutuelle
Guide éditorial transformé en comparateur intégré : questionnaire 5 étapes, recommandation de formule Alan, devis instantané sans quitter la page. Composant React standalone compatible Next.js + Contentful.
Produits & outils e-commerce
Marque d'expertise et apps Shopify opérées en continu — signaux d'autorité sur le créneau performance e-commerce.
ecom-performance.fr
Plateforme d'expertise Shopify & CRO. Vitrine publique de la méthode, des convictions et des résultats sur le créneau performance e-commerce.
Back in Stock — App Shopify
App Shopify de notification retour en stock : captation d'email sur produit en rupture, trigger automatique à la remise en stock, dashboard marchand.
05Code public
GitHub & open-source
Deux volets : mes contributions (code écrit ou mergé) et la boîte à outils open-source que j'utilise au quotidien. Profil complet : github.com/Jp-fix.
★ Contribution upstream · Shopify/theme-tools
Outils officiels de Shopify pour le développement de thèmes (theme-check, Liquid language server utilisé par l'extension VS Code Shopify Liquid). Contribuer directement dans ce repo touche la chaîne d'outillage utilisée par tous les devs Shopify.
fix: preserve element type on array-returning filters
Sur un hover dans un .liquid, le language server retournait untyped[] pour une valeur typée passée dans sort, reverse, uniq, etc. — parce que la doc Liquid déclare array_value: "untyped". Corrigé dans TypeSystem.ts sans toucher à la doc upstream : pass-through list pour les filtres concernés, et bascule du filter chain de « inspecter le dernier filtre » vers un reduce gauche-à-droite pour que x | sort | reverse propage correctement le type d'élément.
★ Mes contributions · open-vibe-island
Alternative open-source à vibe-island pour utilisateurs intensifs de code agents (Claude Code, Codex, opencode). Swift / macOS natif. Repo upstream : Octane0411/open-vibe-island.
Toggle to disable pixel glyph animation
Investigation sur la consommation CPU de l'app en idle. Le TimelineView du glyph animé (~0,18s de loop) sortait comme principal driver. Ajout d'un toggle Settings › Appearance qui fige le glyph sur sa 1ʳᵉ frame.
Show 5h/7d Claude usage in closed notch pill
Expose directement dans l'island fermée le % d'utilisation Claude (fenêtres 5h et 7j) — déjà collecté via AppModel.claudeUsageSnapshot. Coloration par seuils (vert <50%, orange <80%, rouge ≥80%), fail-safe si données absentes.
Boîte à outils open-source que j'utilise
public-apis
Liste collective d'APIs gratuites, 424k+ étoiles. Go-to quand je prototype vite avec une source tierce.
repomix
Packe un repo entier en un seul fichier IA-friendly pour nourrir un LLM avec toute une base de code (Claude, ChatGPT…). Intégré à mon workflow pair-programming.
codegraph
Graphe de connaissance du code pré-indexé pour Claude Code : moins de tokens, moins d'appels d'outils, 100% local. Utilisé sur mes gros projets via MCP.
06Services
3 prestations techniques différenciantes
La stack complète est couverte dans la section 01. Ici, uniquement les missions où j'apporte un angle spécifique — au-delà de la simple exécution.
Tarifs indicatifs — TJM 450–600€ en régie · forfait par livrable défini. Devis précis après cadrage.
Prototype conversion 48h
Refonte d'une page à fort trafic en outil interactif : quiz persona, specs planchers contextualisées, comparateur, recommandations argumentées. Composant standalone intégrable (Next + Contentful, WordPress, etc.).
Workflows IA augmentés
Mise en place Claude Code sur vos projets : CLAUDE.md, sous-agents spécialisés, MCP servers (Linear, Shopify, CodeGraph…), hooks settings.json, skills custom. Formation des équipes incluse.
Audit technique & accompagnement
Revue de code, identification des goulots, plan de refactor pragmatique. Cadrage, specs, roadmap. Profil hybride produit/business/tech pour les équipes qui ont besoin d'un interlocuteur unique.
07Contact
On se parle ?
Missions freelance, collaborations techniques, ou échange sur un projet. Décrivez le contexte, je reviens vers vous sous 24h ouvrées.