[{"data":1,"prerenderedAt":785},["ShallowReactive",2],{"nav-services":3,"service-integration-ia":24,"service-cases-integration-ia":173},[4,8,12,16,20],{"path":5,"navTitle":6,"order":7},"\u002Fservices\u002Fcreation-site-web","Création de site web",1,{"path":9,"navTitle":10,"order":11},"\u002Fservices\u002Fapplication-web-mobile","Application web et mobile",2,{"path":13,"navTitle":14,"order":15},"\u002Fservices\u002Fintegration-ia","Intégration de l'IA",3,{"path":17,"navTitle":18,"order":19},"\u002Fservices\u002Frefonte-modernisation","Refonte et modernisation",4,{"path":21,"navTitle":22,"order":23},"\u002Fservices\u002Fdeveloppeur-freelance-vue-nuxt","Développeur freelance Vue.js \u002F Nuxt",5,{"id":25,"title":26,"body":27,"cases":146,"crew":148,"description":149,"extension":150,"faq":151,"icon":164,"meta":165,"navTitle":14,"navigation":148,"ogImage":166,"order":15,"path":13,"robots":166,"schemaOrg":166,"seo":167,"seoTitle":168,"sitemap":169,"stem":170,"summary":171,"__hash__":172},"services\u002Fservices\u002Fintegration-ia.md","Intégration de l'IA : agents, assistants et automatisation",{"type":28,"value":29,"toc":138},"minimark",[30,35,39,42,46,87,91,94,97,101,104,108,129],[31,32,34],"h2",{"id":33},"brancher-lia-sur-vos-outils-et-vos-données","Brancher l'IA sur vos outils et vos données",[36,37,38],"p",{},"L'intelligence artificielle est utile quand elle s'insère dans un processus réel : lire un document, qualifier une demande, recommander une offre, préparer une réponse. Je conçois et intègre des agents, des assistants et des automatisations à vos applications et à vos outils, avec les modèles d'OpenAI, de Claude (Anthropic) ou de Mistral, selon ce qui convient le mieux à votre besoin, à votre budget et à vos contraintes de confidentialité.",[36,40,41],{},"Je suis développeur avant tout : l'IA que je mets en place est intégrée proprement dans un produit qui fonctionne, avec des tests, des journaux et une exploitation en production.",[31,43,45],{"id":44},"ce-que-je-mets-en-place","Ce que je mets en place",[47,48,49,57,63,69,75,81],"ul",{},[50,51,52,56],"li",{},[53,54,55],"strong",{},"Assistants et recherche intelligente"," : questions-réponses sur vos documents, recherche vectorielle, aide à la saisie.",[50,58,59,62],{},[53,60,61],{},"Matching et recommandation"," : rapprocher des profils et des offres, ou des demandes et des ressources, comme sur Tipik.",[50,64,65,68],{},[53,66,67],{},"Extraction de données"," : lecture automatique de documents (CV, courriers, formulaires) pour pré-remplir ou structurer l'information.",[50,70,71,74],{},[53,72,73],{},"Agents et chaînes d'automatisation"," : plusieurs étapes enchaînées (analyser, produire, vérifier, livrer), chacune avec un rôle clair et des outils limités.",[50,76,77,80],{},[53,78,79],{},"Automatisation du quotidien"," : agents IA (je les utilise moi-même : Claude, OpenAI, DeepSeek, Mistral, Cursor et Hermes) pour prendre en charge les tâches répétitives de votre activité.",[50,82,83,86],{},[53,84,85],{},"Intégration à l'existant"," : API, files de tâches, webhooks, connexion à votre CRM ou à vos outils internes.",[31,88,90],{"id":89},"des-garde-fous-pas-de-magie","Des garde-fous, pas de magie",[36,92,93],{},"Un agent n'est utile que s'il est fiable. Chaque chaîne que je conçois prévoit des limites explicites : outils accessibles, périmètre de données, cas où la machine s'arrête et demande une validation. Les actions sont journalisées pour pouvoir comprendre et corriger un comportement. Rien ne part en production sans relecture humaine quand l'enjeu le justifie.",[36,95,96],{},"Une petite équipe de quatre mascottes, présentée plus bas sur cette page et sur la page d'accueil, illustre ce principe : l'une analyse, l'autre code, la troisième vérifie, la dernière livre, et un humain valide.",[31,98,100],{"id":99},"une-expérience-concrète-tipik","Une expérience concrète : Tipik",[36,102,103],{},"Pour Tipik, une application web RH destinée à l'AFM (Association Familiale Mulliez), j'ai intégré le moteur de matching par IA fondé sur OpenAI pour recommander des offres selon les profils, automatisé l'import de CV avec extraction des compétences et des expériences, et construit les modules autour : catalogue de profils recommandés, agenda partagé entre entreprises, SSO et back-office.",[31,105,107],{"id":106},"démarche-en-trois-temps","Démarche en trois temps",[109,110,111,117,123],"ol",{},[50,112,113,116],{},[53,114,115],{},"Cadrage"," : identifier le processus à automatiser, les données concernées et le résultat attendu.",[50,118,119,122],{},[53,120,121],{},"Prototype"," : une première version sur un cas d'usage précis, pour mesurer l'intérêt réel avant d'investir.",[50,124,125,128],{},[53,126,127],{},"Production"," : industrialisation, supervision, gestion des erreurs et des coûts d'utilisation des modèles, puis évolutions.",[36,130,131,132,137],{},"Vous voulez automatiser un process ou ajouter un assistant à votre produit ? ",[133,134,136],"a",{"href":135},"\u002Fdevis\u002F","Décrivez votre besoin sur la page devis",".",{"title":139,"searchDepth":11,"depth":11,"links":140},"",[141,142,143,144,145],{"id":33,"depth":11,"text":34},{"id":44,"depth":11,"text":45},{"id":89,"depth":11,"text":90},{"id":99,"depth":11,"text":100},{"id":106,"depth":11,"text":107},[147],"tipik",true,"Agents IA, assistants et automatisation de processus avec OpenAI, Claude ou Mistral, intégrés à vos outils existants. Cadrage, prototype, production.","md",[152,155,158,161],{"question":153,"answer":154},"Mes données partent-elles chez OpenAI ou un autre fournisseur ?","Cela dépend de l'architecture retenue. Nous définissons ensemble quelles données sont envoyées au modèle, lesquelles restent chez vous et quel fournisseur utiliser (OpenAI, Claude, Mistral). Je vous aide à minimiser les données transmises et à lire les conditions d'utilisation de chaque fournisseur avant de décider.",{"question":156,"answer":157},"L'IA peut-elle se tromper ?","Oui, comme n'importe quel système automatique. C'est pourquoi je conçois les chaînes avec des étapes de vérification, des outils aux droits limités, un journal des actions et une validation humaine avant toute action sensible ou irréversible.",{"question":159,"answer":160},"Faut-il tout refaire pour ajouter de l'IA à mon application ?","Non, dans la plupart des cas. L'IA s'ajoute comme une brique à votre application existante, via une API, un traitement en arrière-plan ou un assistant dédié. Je commence par un prototype ciblé sur un seul cas d'usage.",{"question":162,"answer":163},"Quels cas d'usage sont les plus adaptés ?","Les tâches répétitives qui reposent sur du texte ou des documents : extraction d'informations, tri, résumés, recommandations, rédaction assistée, relais entre outils. Un échange de cadrage permet de vérifier si votre besoin se prête à l'automatisation.","i-lucide-bot",{},null,{"title":26,"description":149},"Intégration IA : agents, automatisation",{"loc":13},"services\u002Fintegration-ia","Des agents et assistants qui prennent en charge le répétitif, avec des garde-fous et une validation humaine là où ça compte.","5E7l1hzOp7P6jZMmpTzqv47XDgAlMfe6MSgwxvnWruw",[174,323,433,530,615,710],{"id":175,"title":176,"body":177,"client":256,"clientUrl":166,"context":257,"cover":258,"description":263,"draft":264,"extension":150,"featured":148,"gallery":265,"kicker":290,"logo":291,"meta":296,"navigation":148,"ogImage":166,"order":11,"partnerLogo":166,"path":297,"period":298,"robots":166,"role":301,"schemaOrg":166,"seo":302,"seoTitle":303,"services":304,"sitemap":308,"stack":309,"stem":320,"summary":321,"video":166,"__hash__":322},"realisations\u002Frealisations\u002Ftipik.md","Tipik : un moteur de matching IA pour la mobilité interne",{"type":28,"value":178,"toc":249},[179,183,186,192,196,199,203,223,227,230,234,237],[31,180,182],{"id":181},"contexte","Contexte",[36,184,185],{},"Tipik est une application web RH destinée à l'AFM (Association Familiale Mulliez), qui rassemble des enseignes comme Auchan, Décathlon ou Leroy Merlin. Son ambition : fluidifier la mobilité interne et mutualiser les talents entre les entités du groupe. À partir de mai 2023, j'y suis intervenu en freelance comme lead développeur frontend Vue.js et sur l'intégration de l'IA.",[187,188,189],"blockquote",{},[36,190,191],{},"L'entreprise Tipik a depuis cessé son activité ; le service n'est plus en ligne. Cette page garde la trace du travail réalisé.",[31,193,195],{"id":194},"le-besoin","Le besoin",[36,197,198],{},"Les collaborateurs d'un grand groupe ne connaissent pas toujours les opportunités ouvertes dans les autres entités, et les équipes RH manquent d'outils pour rapprocher efficacement des profils et des offres. Il fallait une application simple à utiliser, accessible, capable de recommander les bonnes offres selon les profils, et compatible avec l'authentification de chaque entité du groupe.",[31,200,202],{"id":201},"ce-qui-a-été-réalisé","Ce qui a été réalisé",[47,204,205,208,211,214,217,220],{},[50,206,207],{},"Intégration complète du moteur de matching par IA (OpenAI) pour recommander les offres selon les profils.",[50,209,210],{},"Automatisation de l'import de CV, avec extraction intelligente des compétences et des expériences.",[50,212,213],{},"Développement de modules : catalogue de profils recommandés et agenda partagé entre plusieurs entreprises.",[50,215,216],{},"Conception d'un parcours utilisateur fluide et orienté accessibilité.",[50,218,219],{},"Intégration complète du SSO (Auth0, Okta) pour toutes les entités du groupe.",[50,221,222],{},"Mise en place du back-office, avec gestion fine des rôles et statistiques d'usage.",[31,224,226],{"id":225},"stack-et-choix-techniques","Stack et choix techniques",[36,228,229],{},"L'interface repose sur Vue.js 3 et TypeScript, avec Tailwind CSS pour un système de composants cohérent. Le projet s'appuie sur un backend Symfony avec API Platform, sur Node.js pour certains services, et sur Docker et Google Cloud pour l'exécution. Le matching utilise les modèles d'OpenAI, intégrés comme une brique du produit plutôt que comme un gadget : l'IA recommande, l'utilisateur reste maître de ses choix. L'authentification centralisée par SSO (Auth0, Okta) évite de multiplier les comptes entre entités.",[31,231,233],{"id":232},"résultat","Résultat",[36,235,236],{},"L'application a été mise en production et a servi de base commune aux entités du groupe : recommandation d'offres par IA, import automatisé des CV, agenda partagé, back-office de gestion des rôles et statistiques d'usage. L'entreprise Tipik a depuis cessé son activité ; le service n'est plus en ligne.",[36,238,239,240,244,245,137],{},"Cette étude de cas relève de l'",[133,241,243],{"href":242},"\u002Fservices\u002Fintegration-ia\u002F","intégration de l'IA"," et du renfort en ",[133,246,248],{"href":247},"\u002Fservices\u002Fdeveloppeur-freelance-vue-nuxt\u002F","développement freelance Vue.js et Nuxt",{"title":139,"searchDepth":11,"depth":11,"links":250},[251,252,253,254,255],{"id":181,"depth":11,"text":182},{"id":194,"depth":11,"text":195},{"id":201,"depth":11,"text":202},{"id":225,"depth":11,"text":226},{"id":232,"depth":11,"text":233},"Tipik","freelance",{"src":259,"alt":260,"width":261,"height":262},"\u002Fmedias\u002Frealisations\u002Ftipik\u002Flogin.webp","Écran de connexion de Tipik : « Se connecter, pour grandir ensemble », avec les enseignes partenaires du groupe",1600,916,"Application RH Tipik : moteur de matching IA (OpenAI), import de CV automatisé, SSO multi-entreprises. Lead frontend Vue.js en freelance.",false,[266,270,274,278,282,286],{"src":259,"alt":267,"width":261,"height":262,"device":268,"caption":269},"Écran de connexion de Tipik : « Se connecter, pour grandir ensemble », avec les logos des enseignes partenaires","browser","L’écran de connexion de Tipik",{"src":271,"alt":272,"width":261,"height":262,"device":268,"caption":273},"\u002Fmedias\u002Frealisations\u002Ftipik\u002Flogos.webp","Grille des logos des enseignes partenaires de Tipik sur fond vert : Auchan, Decathlon, Leroy Merlin, Kiabi, Jules et d'autres","Les enseignes partenaires réunies sur la plateforme",{"src":275,"alt":276,"width":261,"height":262,"device":268,"caption":277},"\u002Fmedias\u002Frealisations\u002Ftipik\u002Fcarte.webp","Carte interactive des offres d'emploi autour de Lille, avec des regroupements de pastilles numérotées et des filtres de recherche","La carte des offres, pour trouver une opportunité près de chez soi",{"src":279,"alt":280,"width":261,"height":262,"device":268,"caption":281},"\u002Fmedias\u002Frealisations\u002Ftipik\u002Fprofil.webp","Page « Mon profil Tipik » avec une jauge de profil complet à 100 % et la liste des rubriques renseignées","Complétion du profil : une jauge guide l'utilisateur rubrique par rubrique",{"src":283,"alt":284,"width":261,"height":262,"device":268,"caption":285},"\u002Fmedias\u002Frealisations\u002Ftipik\u002Fkpi.webp","Tableau de bord du back-office Tipik : nombre d'offres, d'utilisateurs, de connexions et un graphique en camembert","Back-office : les chiffres clés de l'activité d'un coup d'œil",{"src":287,"alt":288,"width":261,"height":262,"device":268,"caption":289},"\u002Fmedias\u002Frealisations\u002Ftipik\u002Fcompletion.webp","Graphique en barres du taux de complétion des profils par mois dans le back-office Tipik, avec un tableau de données","Suivi du taux de complétion des profils dans le temps","Application RH & intégration IA",{"src":292,"alt":293,"width":294,"height":295},"\u002Fmedias\u002Flogo-tipik-black.svg","Logo Tipik",160,64,{},"\u002Frealisations\u002Ftipik",{"start":299,"end":300},"2023-05","2025-07","Lead développeur frontend Vue.js & intégration IA",{"title":176,"description":263},"Tipik : matching IA pour la mobilité RH",[305,306,307],"integration-ia","application-web-mobile","developpeur-freelance-vue-nuxt",{"loc":297},[310,311,312,313,314,315,316,317,318,319],"Vue.js 3","TypeScript","Node.js","Tailwind CSS","Symfony","API Platform","OpenAI","Auth0","Docker","Google Cloud","realisations\u002Ftipik","Une application web RH qui intègre l'IA pour fluidifier la mobilité interne et mutualiser les talents des entités d'un grand groupe.","SitG_TaJ9rHoPZAZiS2wXk6w1wlSrYd3cIzKDOzb7NU",{"id":324,"title":325,"body":326,"client":396,"clientUrl":397,"context":257,"cover":398,"description":402,"draft":264,"extension":150,"featured":148,"gallery":403,"kicker":408,"logo":409,"meta":412,"navigation":148,"ogImage":166,"order":15,"partnerLogo":166,"path":413,"period":414,"robots":166,"role":416,"schemaOrg":166,"seo":417,"seoTitle":418,"services":419,"sitemap":420,"stack":421,"stem":430,"summary":431,"video":166,"__hash__":432},"realisations\u002Frealisations\u002Fle-sablais.md","Le Sablais : l'application des habitants des Sables-d'Olonne",{"type":28,"value":327,"toc":389},[328,330,333,335,338,340,365,367,370,372,382],[31,329,182],{"id":181},[36,331,332],{},"Le Sablais est une application web et mobile destinée aux habitants des Sables-d'Olonne et des communes voisines (Saint-Mathurin, Vairé, l'Île d'Olonne). Je l'ai conçue et développée en freelance depuis mars 2022, avec une approche centrée sur l'expérience utilisateur, du backend au frontend.",[31,334,195],{"id":194},[36,336,337],{},"Les habitants cherchent des informations pratiques de leur quotidien, comme les jours de collecte des déchets, qui varient selon l'adresse. L'application devait les leur donner d'un coup d'œil, être accessible depuis un navigateur sans rien installer, puis être publiée sur Android et iOS avec des notifications pour rappeler, par exemple, le jour de sortie des poubelles. Elle devait aussi pouvoir accueillir de nouveaux services : menus scolaires, informations sur les services publics locaux, drapeau de baignade.",[31,339,202],{"id":201},[47,341,342,345,348,351,354,357],{},[50,343,344],{},"Développement du backend et du frontend avec une architecture moderne.",[50,346,347],{},"Première fonctionnalité en production : les dates de collecte des déchets selon l'adresse de l'utilisateur.",[50,349,350],{},"Mise en place des notifications push.",[50,352,353],{},"Intégration et déploiement continus avec GitHub Actions.",[50,355,356],{},"Préparation de la publication sur Android et iOS avec Capacitor.",[50,358,359,360,364],{},"Rédaction d'un ",[133,361,363],{"href":362},"\u002Fblog\u002Fle-sablais-deploiement-application-progressive\u002F","article de lancement"," présentant les premières fonctionnalités.",[31,366,226],{"id":225},[36,368,369],{},"L'application est écrite en TypeScript : Node.js et Express côté serveur, TypeORM avec PostgreSQL pour les données, Redis pour les besoins de cache et de files, et Docker pour l'exécution. Le même code web est emballé avec Capacitor pour les applications Android et iOS, ce qui évite de maintenir deux produits séparés. Le choix d'une application progressive permet de l'utiliser immédiatement dans un navigateur et de l'installer sur l'écran d'accueil.",[31,371,233],{"id":232},[36,373,374,375,381],{},"L'application est en ligne sur ",[133,376,380],{"href":377,"rel":378},"https:\u002F\u002Flesablais.fr",[379],"nofollow","lesablais.fr"," et propose les dates de collecte des déchets par adresse. Les menus scolaires, les applications Android et iOS et d'autres services locaux étaient annoncés comme étapes suivantes ; l'état actuel du projet sera mis à jour avec le CV.",[36,383,384,385,137],{},"Ce projet illustre mon offre d'",[133,386,388],{"href":387},"\u002Fservices\u002Fapplication-web-mobile\u002F","applications web et mobiles sur mesure",{"title":139,"searchDepth":11,"depth":11,"links":390},[391,392,393,394,395],{"id":181,"depth":11,"text":182},{"id":194,"depth":11,"text":195},{"id":201,"depth":11,"text":202},{"id":225,"depth":11,"text":226},{"id":232,"depth":11,"text":233},"Le Sablais","https:\u002F\u002Flesablais.fr\u002F",{"src":399,"alt":400,"width":401,"height":401},"\u002Fmedias\u002F20230510_213547-collage.jpg","Aperçu de l'application Le Sablais sur mobile",2880,"Le Sablais, application web et mobile pour les habitants des Sables-d'Olonne : collectes de déchets, notifications push, Capacitor, Node.js.",[404],{"src":399,"alt":405,"width":401,"height":401,"device":406,"caption":407},"Collage d'écrans de l'application Le Sablais sur mobile","plain","Aperçu de l'application sur mobile","Application mobile & web",{"src":410,"alt":411,"width":295,"height":295},"\u002Fmedias\u002Flogo-svg-large.svg","Logo Le Sablais",{},"\u002Frealisations\u002Fle-sablais",{"start":415,"end":166},"2022-03","Développeur fullstack JavaScript",{"title":325,"description":402},"Le Sablais : application citoyenne (PWA)",[306],{"loc":413},[311,312,422,423,424,318,425,426,427,428,429],"Vue.js","React","Express","TypeORM","PostgreSQL","Redis","Capacitor","GitHub Actions","realisations\u002Fle-sablais","Une application web et mobile pour les habitants d'un groupement de communes : collectes de déchets selon l'adresse, notifications et nouveaux services à venir.","K4R6NVnm4PuzSSsDsDtqedU6E7PLZQyBDkIjWdVVLgo",{"id":434,"title":435,"body":436,"client":490,"clientUrl":491,"context":492,"cover":166,"description":493,"draft":264,"extension":150,"featured":148,"gallery":494,"kicker":495,"logo":496,"meta":501,"navigation":148,"ogImage":166,"order":19,"partnerLogo":166,"path":502,"period":503,"robots":166,"role":506,"schemaOrg":166,"seo":507,"seoTitle":508,"services":509,"sitemap":510,"stack":511,"stem":519,"summary":520,"video":521,"__hash__":529},"realisations\u002Frealisations\u002Fcodes-rousseau-app-formateurs.md","Codes Rousseau : l'application mobile des formateurs, même hors ligne",{"type":28,"value":437,"toc":483},[438,440,443,445,448,450,467,469,472,474,477],[31,439,182],{"id":181},[36,441,442],{},"Codes Rousseau édite des supports pédagogiques pour les auto-écoles. De septembre 2020 à février 2022, j'ai travaillé chez eux en CDI comme développeur web et mobile. Ce projet n'a donc pas été réalisé pour mon studio, mais pendant mon contrat de salarié : je le présente comme une réalisation de mon parcours, au sein de l'équipe.",[31,444,195],{"id":194},[36,446,447],{},"Les formateurs d'auto-école se servent d'une application mobile en situation de terrain, où la connexion n'est pas toujours fiable. L'ancienne application devait être remplacée par une version plus stable et mieux documentée, capable de fonctionner hors ligne et de synchroniser les données sans perte ni lenteur.",[31,449,202],{"id":201},[47,451,452,455,458,461,464],{},[50,453,454],{},"Conception et développement du module de synchronisation, selon une approche offline-first.",[50,456,457],{},"Conception de l'architecture des données avec IndexedDB.",[50,459,460],{},"Réalisation du module de suivi des élèves et de gestion des médias.",[50,462,463],{},"Personnalisation de l'application selon le client.",[50,465,466],{},"Participation aux rituels Agile Scrum de l'équipe.",[31,468,226],{"id":225},[36,470,471],{},"L'application est développée avec Vue.js et JavaScript, emballée pour iOS et Android avec Capacitor et Ionic. Le stockage local repose sur IndexedDB via Dexie.js : les données sont lues et écrites d'abord sur l'appareil, puis synchronisées avec le serveur lorsque le réseau est disponible. Cette architecture offline-first rend l'application utilisable même sans connexion et limite les échanges réseau.",[31,473,233],{"id":232},[36,475,476],{},"L'application livrée est plus stable et mieux documentée que l'ancienne, avec une synchronisation optimisée et un fonctionnement hors ligne. Une vidéo de démonstration de l'application est disponible sur cette page ; elle n'est chargée qu'après votre clic.",[36,478,479,480,482],{},"Ce travail correspond à mon offre d'",[133,481,388],{"href":387},", notamment lorsque l'usage hors ligne est nécessaire.",{"title":139,"searchDepth":11,"depth":11,"links":484},[485,486,487,488,489],{"id":181,"depth":11,"text":182},{"id":194,"depth":11,"text":195},{"id":201,"depth":11,"text":202},{"id":225,"depth":11,"text":226},{"id":232,"depth":11,"text":233},"Codes Rousseau","https:\u002F\u002Fpro.codesrousseau.fr\u002F","salarie","Application mobile hors ligne pour formateurs d'auto-école (Codes Rousseau) : synchronisation offline-first, IndexedDB, Vue.js et Capacitor.",[],"Application métier mobile",{"src":497,"alt":498,"width":499,"height":500},"\u002Fmedias\u002FLogo-codes-rousseau.svg","Logo Codes Rousseau",96,47,{},"\u002Frealisations\u002Fcodes-rousseau-app-formateurs",{"start":504,"end":505},"2020-09","2022-02","Développeur web et mobile (CDI)",{"title":435,"description":493},"Codes Rousseau : app mobile hors ligne",[306],{"loc":502},[422,512,428,513,514,515,516,517,518],"JavaScript","Ionic","iOS","Android","SASS","Dexie.js","IndexedDB","realisations\u002Fcodes-rousseau-app-formateurs","Une application mobile pour les formateurs d'auto-école, avec fonctionnement hors ligne et synchronisation des données optimisée.",{"youtubeId":522,"title":523,"poster":524},"w8rzCSbkXKI","Application Codes Rousseau formateur, démonstration",{"src":525,"alt":526,"width":527,"height":528},"\u002Fmedias\u002Fvideo-codes-rousseau-poster.jpg","Aperçu de la vidéo de démonstration de l'application pour formateurs",480,360,"ZhiI-Dhrq7qJio6wECI3yRpoP-PpaZL7Lg2PgmQk2cM",{"id":531,"title":532,"body":533,"client":590,"clientUrl":563,"context":257,"cover":166,"description":591,"draft":264,"extension":150,"featured":148,"gallery":592,"kicker":593,"logo":594,"meta":597,"navigation":148,"ogImage":166,"order":23,"partnerLogo":166,"path":598,"period":599,"robots":166,"role":601,"schemaOrg":166,"seo":602,"seoTitle":603,"services":604,"sitemap":606,"stack":607,"stem":612,"summary":613,"video":166,"__hash__":614},"realisations\u002Frealisations\u002Fcantet-cordiste.md","Cantet Cordiste : un site vitrine sur mesure, géré en autonomie",{"type":28,"value":534,"toc":583},[535,537,540,542,545,547,566,568,571,573,576],[31,536,182],{"id":181},[36,538,539],{},"Cantet Cordiste est une entreprise spécialisée dans les travaux d'accès difficile. En novembre 2021, elle m'a confié la réalisation de son site internet, en freelance, sur une courte mission d'un mois.",[31,541,195],{"id":194},[36,543,544],{},"L'entreprise avait besoin d'un site qui présente son activité avec sérieux, et dont elle puisse mettre à jour elle-même les contenus (réalisations, prestations) sans dépendre d'un développeur pour chaque modification. Le site devait aussi rester rapide et simple à héberger.",[31,546,202],{"id":201},[47,548,549,552,555,558],{},[50,550,551],{},"Conception et développement d'un site internet sur mesure, adapté aux métiers de l'entreprise.",[50,553,554],{},"Mise en place d'un CMS headless pour la gestion de contenu dynamique : l'entreprise publie et modifie ses contenus depuis une interface d'administration.",[50,556,557],{},"Intégration du design et des contenus dans une interface responsive.",[50,559,560,561,137],{},"Mise en ligne du site sur ",[133,562,565],{"href":563,"rel":564},"https:\u002F\u002Fcantetcordiste.com",[379],"cantetcordiste.com",[31,567,226],{"id":225},[36,569,570],{},"Le frontend est réalisé avec Nuxt.js et Vue.js, ce qui permet de générer des pages rapides et lisibles par les moteurs de recherche. Les contenus sont gérés dans Strapi, un CMS headless adossé à une base MySQL : l'interface d'administration est séparée du site public, qui récupère les contenus par API. Cette séparation donne de l'autonomie à l'entreprise tout en gardant un site simple, rapide et facile à faire évoluer.",[31,572,233],{"id":232},[36,574,575],{},"Le site est en ligne et l'entreprise peut gérer ses contenus de manière autonome grâce au CMS. Aucun chiffre de trafic ou de performance n'est annoncé ici : je ne publie que ce qui peut être vérifié.",[36,577,578,579,137],{},"Ce projet illustre mon offre de ",[133,580,582],{"href":581},"\u002Fservices\u002Fcreation-site-web\u002F","création de site web sur mesure",{"title":139,"searchDepth":11,"depth":11,"links":584},[585,586,587,588,589],{"id":181,"depth":11,"text":182},{"id":194,"depth":11,"text":195},{"id":201,"depth":11,"text":202},{"id":225,"depth":11,"text":226},{"id":232,"depth":11,"text":233},"Cantet Cordiste","Site vitrine sur mesure pour Cantet Cordiste, travaux d'accès difficile : Nuxt, CMS headless Strapi pour gérer les contenus en autonomie.",[],"Site vitrine & CMS headless",{"src":595,"alt":596,"width":295,"height":295},"\u002Fmedias\u002FLogoCantetCordiste.svg","Logo Cantet Cordiste",{},"\u002Frealisations\u002Fcantet-cordiste",{"start":600,"end":600},"2021-11","Développeur web",{"title":532,"description":591},"Cantet Cordiste : site vitrine Nuxt",[605],"creation-site-web",{"loc":598},[608,422,512,609,610,611],"Nuxt.js","Strapi","MySQL","Bootstrap","realisations\u002Fcantet-cordiste","Un site internet sur mesure pour une entreprise de travaux d'accès difficile, avec gestion de contenu dynamique via un CMS headless.","IlcPE8G-8DZfSi90sY4t5hPclYkx9v6969BwjiL3SDE",{"id":616,"title":617,"body":618,"client":680,"clientUrl":681,"context":257,"cover":166,"description":682,"draft":264,"extension":150,"featured":148,"gallery":683,"kicker":684,"logo":685,"meta":688,"navigation":148,"ogImage":166,"order":689,"partnerLogo":166,"path":690,"period":691,"robots":166,"role":693,"schemaOrg":166,"seo":694,"seoTitle":695,"services":696,"sitemap":698,"stack":699,"stem":707,"summary":708,"video":166,"__hash__":709},"realisations\u002Frealisations\u002Fbeekast.md","Beekast : refonte en microfrontends et design system",{"type":28,"value":619,"toc":673},[620,622,625,627,630,632,652,654,657,659,662],[31,621,182],{"id":181},[36,623,624],{},"Beekast propose une application collaborative pour animer des réunions et des ateliers de travail en équipe. De mars à décembre 2022, soit environ dix mois, j'y ai été lead frontend en freelance, au sein de l'équipe produit, sur la refonte complète de l'application.",[31,626,195],{"id":194},[36,628,629],{},"L'application reposait sur un monolithe frontend qui devenait difficile à faire évoluer. L'objectif était de la moderniser sans l'arrêter : découper l'interface en blocs fonctionnels indépendants (microfrontends), harmoniser l'interface par un design system, et développer de nouveaux écrans issus des maquettes.",[31,631,202],{"id":201},[47,633,634,637,640,643,646,649],{},[50,635,636],{},"Conception et réalisation du design system pour une réutilisation dans les microfrontends.",[50,638,639],{},"Migration de blocs fonctionnels du monolithe vers des microfrontends.",[50,641,642],{},"Développement et intégration de nouveaux écrans issus des maquettes.",[50,644,645],{},"Développement backend en Node.js avec GraphQL.",[50,647,648],{},"Corrections de bugs et optimisations de performance.",[50,650,651],{},"Participation aux réunions de décisions techniques et aux rituels Agile.",[31,653,226],{"id":225},[36,655,656],{},"Le frontend combine Vue.js 2 et 3, ce qui permet de migrer progressivement plutôt que de tout réécrire, avec single-spa pour orchestrer les microfrontends et Webpack pour le build. Le design system est documenté avec Storybook et s'appuie sur des Web Components et SASS pour être partagé entre les blocs. Le backend est en Node.js avec GraphQL, adossé à MongoDB. L'approche progressive limite les risques : chaque bloc migré est testé et livré avant de passer au suivant.",[31,658,233],{"id":232},[36,660,661],{},"La refonte a posé les bases d'une architecture modulaire : un design system partagé, des blocs fonctionnels migrés en microfrontends et de nouveaux écrans intégrés à partir des maquettes. La mission s'est terminée en décembre 2022.",[36,663,664,665,669,670,137],{},"Ce travail relève de la ",[133,666,668],{"href":667},"\u002Fservices\u002Frefonte-modernisation\u002F","refonte et modernisation d'applications"," et du ",[133,671,672],{"href":247},"renfort en équipe en tant que développeur freelance",{"title":139,"searchDepth":11,"depth":11,"links":674},[675,676,677,678,679],{"id":181,"depth":11,"text":182},{"id":194,"depth":11,"text":195},{"id":201,"depth":11,"text":202},{"id":225,"depth":11,"text":226},{"id":232,"depth":11,"text":233},"Beekast","https:\u002F\u002Fbeekast.com","Refonte de Beekast : migration d'un monolithe vers des microfrontends Vue, design system Storybook, backend Node.js GraphQL. Lead frontend.",[],"Refonte & design system",{"src":686,"alt":687,"width":295,"height":295},"\u002Fmedias\u002Fbeekast_logo_carre_violet.svg","Logo Beekast",{},6,"\u002Frealisations\u002Fbeekast",{"start":415,"end":692},"2022-12","Lead frontend",{"title":617,"description":682},"Beekast : refonte en microfrontends",[697,307],"refonte-modernisation",{"loc":690},[700,701,702,512,312,703,704,705,516,706],"Vue.js 2\u002F3","single-spa","Storybook","GraphQL","MongoDB","Webpack","Web Components","realisations\u002Fbeekast","La refonte d'une plateforme d'animation de réunions : design system, migration vers des microfrontends et nouveaux écrans, au sein d'une équipe produit.","wl_kYKirLvhZS3X-I06ybLwvoJ-F2GIu5kNqETltjlQ",{"id":711,"title":712,"body":713,"client":762,"clientUrl":166,"context":257,"cover":166,"description":763,"draft":264,"extension":150,"featured":264,"gallery":764,"kicker":765,"logo":766,"meta":769,"navigation":148,"ogImage":166,"order":770,"partnerLogo":166,"path":771,"period":772,"robots":166,"role":774,"schemaOrg":166,"seo":775,"seoTitle":776,"services":777,"sitemap":778,"stack":779,"stem":782,"summary":783,"video":166,"__hash__":784},"realisations\u002Frealisations\u002Feditions-du-vieux-crayon.md","Les éditions du vieux crayon : migration Symfony et PHP 8",{"type":28,"value":714,"toc":755},[715,717,720,722,725,727,741,743,746,748,751],[31,716,182],{"id":181},[36,718,719],{},"Les éditions du vieux crayon sont une maison d'édition dont l'application repose sur un projet Symfony. Je travaille pour elle en freelance depuis janvier 2023 : une première mission de plusieurs mois pour moderniser sa base technique, puis de petites missions régulières selon ses besoins.",[31,721,195],{"id":194},[36,723,724],{},"Le projet fonctionnait sous PHP 5.6 et Symfony 3.3, des versions qui ne sont plus maintenues et qui exposent à des failles et à des incompatibilités d'hébergement. Il fallait migrer vers des versions actuelles sans interrompre l'activité, tout en répondant aux besoins évolutifs de l'entreprise avec de nouvelles fonctionnalités.",[31,726,202],{"id":201},[47,728,729,732,735,738],{},[50,730,731],{},"Migration de PHP 5.6 vers PHP 8.2 et de Symfony 3.3 vers Symfony 5.4.",[50,733,734],{},"Développement de nouvelles fonctionnalités pour répondre aux besoins de l'entreprise.",[50,736,737],{},"Intégration d'API Platform pour moderniser le projet.",[50,739,740],{},"Configuration et hébergement du projet en production.",[31,742,226],{"id":225},[36,744,745],{},"Le projet est construit avec PHP et Symfony, complétés par API Platform pour exposer des API de manière standardisée. Le frontend conserve des briques existantes (jQuery, Bootstrap) et des composants Vue.js. La migration a été faite par paliers de versions, ce qui limite les risques de régression : on corrige les incompatibilités à chaque étape avant de passer à la suivante, plutôt que de tout changer d'un bloc.",[31,747,233],{"id":232},[36,749,750],{},"Le projet tourne désormais sous PHP 8.2 et Symfony 5.4, avec API Platform et de nouvelles fonctionnalités, et a été configuré et mis en production dans le cadre de la mission. Les pratiques de ce chantier sont reprises dans mes autres migrations.",[36,752,578,753,137],{},[133,754,668],{"href":667},{"title":139,"searchDepth":11,"depth":11,"links":756},[757,758,759,760,761],{"id":181,"depth":11,"text":182},{"id":194,"depth":11,"text":195},{"id":201,"depth":11,"text":202},{"id":225,"depth":11,"text":226},{"id":232,"depth":11,"text":233},"Les éditions du vieux crayon","Les éditions du vieux crayon : migration PHP 5.6 vers 8.2 et Symfony 3.3 vers 5.4, API Platform, mise en production, puis petites missions régulières.",[],"Migration & modernisation",{"src":767,"alt":768,"width":295,"height":295},"\u002Fmedias\u002Flogo-vieux-crayon.jpg","Logo des éditions du vieux crayon",{},7,"\u002Frealisations\u002Feditions-du-vieux-crayon",{"start":773,"end":166},"2023-01","Développeur fullstack",{"title":712,"description":763},"Vieux Crayon : migration PHP 5.6 → 8.2",[697],{"loc":771},[780,314,315,781,422,611],"PHP","jQuery","realisations\u002Feditions-du-vieux-crayon","Client régulier depuis janvier 2023 : migration d'un projet Symfony et PHP vieillissant vers des versions maintenues, puis petites missions au fil des besoins.","JO_SAqnC8x3LMg9cGqA5f4HtZ_wUI2JLUPmB6b7JlFI",1791300037358]