[{"data":1,"prerenderedAt":769},["ShallowReactive",2],{"nav-services":3,"service-refonte-modernisation":24,"service-cases-refonte-modernisation":157},[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":128,"crew":131,"description":132,"extension":133,"faq":134,"icon":147,"meta":148,"navTitle":18,"navigation":149,"ogImage":150,"order":19,"path":17,"robots":150,"schemaOrg":150,"seo":151,"seoTitle":152,"sitemap":153,"stem":154,"summary":155,"__hash__":156},"services\u002Fservices\u002Frefonte-modernisation.md","Refonte et modernisation d'applications existantes",{"type":28,"value":29,"toc":120},"minimark",[30,35,39,42,46,87,91,94,98,101,104,108,111],[31,32,34],"h2",{"id":33},"remettre-un-existant-daplomb-sans-tout-casser","Remettre un existant d'aplomb sans tout casser",[36,37,38],"p",{},"Les applications vieillissent : versions de langage ou de framework en fin de vie, dépendances qu'on n'ose plus mettre à jour, interface incohérente, déploiements risqués. Une refonte ou une modernisation bien menée consiste à améliorer l'existant par étapes, en gardant ce qui marche, en sécurisant chaque changement et en laissant votre activité tourner.",[36,40,41],{},"Je suis intervenu sur des migrations de technologies et sur des refontes d'interfaces : passage de PHP 5.6 à 8.2 et de Symfony 3.3 à 5.4, migration d'un monolithe frontend vers des microfrontends, création d'un design system, ou encore reprise d'un site Nuxt 2 vers Nuxt 4.",[31,43,45],{"id":44},"ce-que-je-peux-faire","Ce que je peux faire",[47,48,49,57,63,69,75,81],"ul",{},[50,51,52,56],"li",{},[53,54,55],"strong",{},"Audit"," : état du code, dépendances, tests existants, déploiement, points de risque et priorités.",[50,58,59,62],{},[53,60,61],{},"Migration de versions"," : PHP, Symfony, Vue 2 vers Vue 3, Nuxt 2 vers Nuxt 4, selon vos technologies.",[50,64,65,68],{},[53,66,67],{},"Microfrontends"," : découper un monolithe en blocs fonctionnels indépendants, migrés un par un.",[50,70,71,74],{},[53,72,73],{},"Design system"," : composants documentés (par exemple avec Storybook) pour harmoniser l'interface et accélérer les développements.",[50,76,77,80],{},[53,78,79],{},"Modernisation de l'API"," : introduction d'API Platform, de GraphQL ou de nouveaux services quand c'est pertinent.",[50,82,83,86],{},[53,84,85],{},"Mise en production"," : configuration de l'hébergement, intégration et déploiement continus, tests automatisés.",[31,88,90],{"id":89},"une-approche-progressive","Une approche progressive",[36,92,93],{},"Je privilégie des lots courts et livrables, plutôt qu'un grand soir risqué. Chaque étape est testée, déployée sur un environnement de préproduction, puis mise en ligne. Cela permet de garder une trace claire de ce qui change, de revenir en arrière en cas de problème et de continuer à faire évoluer le produit pendant la migration.",[31,95,97],{"id":96},"deux-exemples","Deux exemples",[36,99,100],{},"Chez Beekast, une plateforme d'animation de réunions et d'ateliers collaboratifs, j'ai été lead frontend sur la refonte complète : conception du design system, migration de blocs fonctionnels vers des microfrontends avec single-spa, développement de nouveaux écrans et backend Node.js avec GraphQL, en participant aux décisions techniques de l'équipe.",[36,102,103],{},"Pour les éditions du vieux crayon, j'ai migré le projet de PHP 5.6 vers 8.2 et de Symfony 3.3 vers 5.4, intégré API Platform, développé de nouvelles fonctionnalités, puis configuré et hébergé le projet en production.",[31,105,107],{"id":106},"et-pour-votre-site","Et pour votre site ?",[36,109,110],{},"La même logique s'applique à un site web : conserver les contenus et les adresses qui comptent, moderniser la technique, améliorer la vitesse et l'accessibilité, puis vérifier le référencement après la bascule.",[36,112,113,114,119],{},"Vous avez une application ou un site à moderniser ? ",[115,116,118],"a",{"href":117},"\u002Fdevis\u002F","Parlons-en sur la page devis"," : je commence par comprendre l'existant avant de proposer un plan.",{"title":121,"searchDepth":11,"depth":11,"links":122},"",[123,124,125,126,127],{"id":33,"depth":11,"text":34},{"id":44,"depth":11,"text":45},{"id":89,"depth":11,"text":90},{"id":96,"depth":11,"text":97},{"id":106,"depth":11,"text":107},[129,130],"beekast","editions-du-vieux-crayon",false,"Refonte et migration d'applications existantes : Nuxt 2 vers Nuxt 4, Symfony, PHP 8, design system, microfrontends. Sans casser l'existant.","md",[135,138,141,144],{"question":136,"answer":137},"Vaut-il mieux refaire l'application ou la faire évoluer ?","Il n'y a pas de réponse unique. Je commence par un audit du code, des dépendances, de la dette technique et des risques, puis je compare une migration progressive et une refonte complète selon votre budget, vos délais et ce qui doit rester disponible pendant le chantier.",{"question":139,"answer":140},"Mon application restera-t-elle disponible pendant la migration ?","C'est l'objectif de l'approche par étapes. Selon le cas, je migre bloc par bloc (comme avec des microfrontends) ou je prépare la nouvelle version en parallèle avant une bascule planifiée.",{"question":142,"answer":143},"Pouvez-vous migrer un site Nuxt 2 vers Nuxt 4 ?","Oui. C'est exactement la démarche appliquée à mon propre site, passé de Nuxt 2 à Nuxt 4, avec reprise des contenus, redirections des anciennes URL et vérification du référencement. Pour une application plus grosse, nous découpons le chantier en lots.",{"question":145,"answer":146},"Que se passe-t-il pour mon référencement lors d'une refonte de site ?","Je prévois dès le départ les redirections 301 des anciennes adresses, la conservation des contenus qui fonctionnent, les balises et le plan du site, puis une vérification après mise en ligne.","i-lucide-refresh-cw",{},true,null,{"title":26,"description":132},"Refonte et modernisation d'application",{"loc":17},"services\u002Frefonte-modernisation","Migrer sans tout casser : montées de version, microfrontends, design system, avec un plan par étapes.","GRKRx_VvBXRm_JhDV5Dbw8kO6AjHz6tXkKVKL-Q-beA",[158,307,417,514,599,694],{"id":159,"title":160,"body":161,"client":241,"clientUrl":150,"context":242,"cover":243,"description":248,"draft":131,"extension":133,"featured":149,"gallery":249,"kicker":274,"logo":275,"meta":280,"navigation":149,"ogImage":150,"order":11,"partnerLogo":150,"path":281,"period":282,"robots":150,"role":285,"schemaOrg":150,"seo":286,"seoTitle":287,"services":288,"sitemap":292,"stack":293,"stem":304,"summary":305,"video":150,"__hash__":306},"realisations\u002Frealisations\u002Ftipik.md","Tipik : un moteur de matching IA pour la mobilité interne",{"type":28,"value":162,"toc":234},[163,167,170,176,180,183,187,207,211,214,218,221],[31,164,166],{"id":165},"contexte","Contexte",[36,168,169],{},"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.",[171,172,173],"blockquote",{},[36,174,175],{},"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,177,179],{"id":178},"le-besoin","Le besoin",[36,181,182],{},"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,184,186],{"id":185},"ce-qui-a-été-réalisé","Ce qui a été réalisé",[47,188,189,192,195,198,201,204],{},[50,190,191],{},"Intégration complète du moteur de matching par IA (OpenAI) pour recommander les offres selon les profils.",[50,193,194],{},"Automatisation de l'import de CV, avec extraction intelligente des compétences et des expériences.",[50,196,197],{},"Développement de modules : catalogue de profils recommandés et agenda partagé entre plusieurs entreprises.",[50,199,200],{},"Conception d'un parcours utilisateur fluide et orienté accessibilité.",[50,202,203],{},"Intégration complète du SSO (Auth0, Okta) pour toutes les entités du groupe.",[50,205,206],{},"Mise en place du back-office, avec gestion fine des rôles et statistiques d'usage.",[31,208,210],{"id":209},"stack-et-choix-techniques","Stack et choix techniques",[36,212,213],{},"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,215,217],{"id":216},"résultat","Résultat",[36,219,220],{},"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,222,223,224,228,229,233],{},"Cette étude de cas relève de l'",[115,225,227],{"href":226},"\u002Fservices\u002Fintegration-ia\u002F","intégration de l'IA"," et du renfort en ",[115,230,232],{"href":231},"\u002Fservices\u002Fdeveloppeur-freelance-vue-nuxt\u002F","développement freelance Vue.js et Nuxt",".",{"title":121,"searchDepth":11,"depth":11,"links":235},[236,237,238,239,240],{"id":165,"depth":11,"text":166},{"id":178,"depth":11,"text":179},{"id":185,"depth":11,"text":186},{"id":209,"depth":11,"text":210},{"id":216,"depth":11,"text":217},"Tipik","freelance",{"src":244,"alt":245,"width":246,"height":247},"\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.",[250,254,258,262,266,270],{"src":244,"alt":251,"width":246,"height":247,"device":252,"caption":253},"Écran de connexion de Tipik : « Se connecter, pour grandir ensemble », avec les logos des enseignes partenaires","browser","L’écran de connexion de Tipik",{"src":255,"alt":256,"width":246,"height":247,"device":252,"caption":257},"\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":259,"alt":260,"width":246,"height":247,"device":252,"caption":261},"\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":263,"alt":264,"width":246,"height":247,"device":252,"caption":265},"\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":267,"alt":268,"width":246,"height":247,"device":252,"caption":269},"\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":271,"alt":272,"width":246,"height":247,"device":252,"caption":273},"\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":276,"alt":277,"width":278,"height":279},"\u002Fmedias\u002Flogo-tipik-black.svg","Logo Tipik",160,64,{},"\u002Frealisations\u002Ftipik",{"start":283,"end":284},"2023-05","2025-07","Lead développeur frontend Vue.js & intégration IA",{"title":160,"description":248},"Tipik : matching IA pour la mobilité RH",[289,290,291],"integration-ia","application-web-mobile","developpeur-freelance-vue-nuxt",{"loc":281},[294,295,296,297,298,299,300,301,302,303],"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":308,"title":309,"body":310,"client":380,"clientUrl":381,"context":242,"cover":382,"description":386,"draft":131,"extension":133,"featured":149,"gallery":387,"kicker":392,"logo":393,"meta":396,"navigation":149,"ogImage":150,"order":15,"partnerLogo":150,"path":397,"period":398,"robots":150,"role":400,"schemaOrg":150,"seo":401,"seoTitle":402,"services":403,"sitemap":404,"stack":405,"stem":414,"summary":415,"video":150,"__hash__":416},"realisations\u002Frealisations\u002Fle-sablais.md","Le Sablais : l'application des habitants des Sables-d'Olonne",{"type":28,"value":311,"toc":373},[312,314,317,319,322,324,349,351,354,356,366],[31,313,166],{"id":165},[36,315,316],{},"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,318,179],{"id":178},[36,320,321],{},"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,323,186],{"id":185},[47,325,326,329,332,335,338,341],{},[50,327,328],{},"Développement du backend et du frontend avec une architecture moderne.",[50,330,331],{},"Première fonctionnalité en production : les dates de collecte des déchets selon l'adresse de l'utilisateur.",[50,333,334],{},"Mise en place des notifications push.",[50,336,337],{},"Intégration et déploiement continus avec GitHub Actions.",[50,339,340],{},"Préparation de la publication sur Android et iOS avec Capacitor.",[50,342,343,344,348],{},"Rédaction d'un ",[115,345,347],{"href":346},"\u002Fblog\u002Fle-sablais-deploiement-application-progressive\u002F","article de lancement"," présentant les premières fonctionnalités.",[31,350,210],{"id":209},[36,352,353],{},"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,355,217],{"id":216},[36,357,358,359,365],{},"L'application est en ligne sur ",[115,360,364],{"href":361,"rel":362},"https:\u002F\u002Flesablais.fr",[363],"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,367,368,369,233],{},"Ce projet illustre mon offre d'",[115,370,372],{"href":371},"\u002Fservices\u002Fapplication-web-mobile\u002F","applications web et mobiles sur mesure",{"title":121,"searchDepth":11,"depth":11,"links":374},[375,376,377,378,379],{"id":165,"depth":11,"text":166},{"id":178,"depth":11,"text":179},{"id":185,"depth":11,"text":186},{"id":209,"depth":11,"text":210},{"id":216,"depth":11,"text":217},"Le Sablais","https:\u002F\u002Flesablais.fr\u002F",{"src":383,"alt":384,"width":385,"height":385},"\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.",[388],{"src":383,"alt":389,"width":385,"height":385,"device":390,"caption":391},"Collage d'écrans de l'application Le Sablais sur mobile","plain","Aperçu de l'application sur mobile","Application mobile & web",{"src":394,"alt":395,"width":279,"height":279},"\u002Fmedias\u002Flogo-svg-large.svg","Logo Le Sablais",{},"\u002Frealisations\u002Fle-sablais",{"start":399,"end":150},"2022-03","Développeur fullstack JavaScript",{"title":309,"description":386},"Le Sablais : application citoyenne (PWA)",[290],{"loc":397},[295,296,406,407,408,302,409,410,411,412,413],"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":418,"title":419,"body":420,"client":474,"clientUrl":475,"context":476,"cover":150,"description":477,"draft":131,"extension":133,"featured":149,"gallery":478,"kicker":479,"logo":480,"meta":485,"navigation":149,"ogImage":150,"order":19,"partnerLogo":150,"path":486,"period":487,"robots":150,"role":490,"schemaOrg":150,"seo":491,"seoTitle":492,"services":493,"sitemap":494,"stack":495,"stem":503,"summary":504,"video":505,"__hash__":513},"realisations\u002Frealisations\u002Fcodes-rousseau-app-formateurs.md","Codes Rousseau : l'application mobile des formateurs, même hors ligne",{"type":28,"value":421,"toc":467},[422,424,427,429,432,434,451,453,456,458,461],[31,423,166],{"id":165},[36,425,426],{},"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,428,179],{"id":178},[36,430,431],{},"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,433,186],{"id":185},[47,435,436,439,442,445,448],{},[50,437,438],{},"Conception et développement du module de synchronisation, selon une approche offline-first.",[50,440,441],{},"Conception de l'architecture des données avec IndexedDB.",[50,443,444],{},"Réalisation du module de suivi des élèves et de gestion des médias.",[50,446,447],{},"Personnalisation de l'application selon le client.",[50,449,450],{},"Participation aux rituels Agile Scrum de l'équipe.",[31,452,210],{"id":209},[36,454,455],{},"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,457,217],{"id":216},[36,459,460],{},"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,462,463,464,466],{},"Ce travail correspond à mon offre d'",[115,465,372],{"href":371},", notamment lorsque l'usage hors ligne est nécessaire.",{"title":121,"searchDepth":11,"depth":11,"links":468},[469,470,471,472,473],{"id":165,"depth":11,"text":166},{"id":178,"depth":11,"text":179},{"id":185,"depth":11,"text":186},{"id":209,"depth":11,"text":210},{"id":216,"depth":11,"text":217},"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":481,"alt":482,"width":483,"height":484},"\u002Fmedias\u002FLogo-codes-rousseau.svg","Logo Codes Rousseau",96,47,{},"\u002Frealisations\u002Fcodes-rousseau-app-formateurs",{"start":488,"end":489},"2020-09","2022-02","Développeur web et mobile (CDI)",{"title":419,"description":477},"Codes Rousseau : app mobile hors ligne",[290],{"loc":486},[406,496,412,497,498,499,500,501,502],"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":506,"title":507,"poster":508},"w8rzCSbkXKI","Application Codes Rousseau formateur, démonstration",{"src":509,"alt":510,"width":511,"height":512},"\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":515,"title":516,"body":517,"client":574,"clientUrl":547,"context":242,"cover":150,"description":575,"draft":131,"extension":133,"featured":149,"gallery":576,"kicker":577,"logo":578,"meta":581,"navigation":149,"ogImage":150,"order":23,"partnerLogo":150,"path":582,"period":583,"robots":150,"role":585,"schemaOrg":150,"seo":586,"seoTitle":587,"services":588,"sitemap":590,"stack":591,"stem":596,"summary":597,"video":150,"__hash__":598},"realisations\u002Frealisations\u002Fcantet-cordiste.md","Cantet Cordiste : un site vitrine sur mesure, géré en autonomie",{"type":28,"value":518,"toc":567},[519,521,524,526,529,531,550,552,555,557,560],[31,520,166],{"id":165},[36,522,523],{},"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,525,179],{"id":178},[36,527,528],{},"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,530,186],{"id":185},[47,532,533,536,539,542],{},[50,534,535],{},"Conception et développement d'un site internet sur mesure, adapté aux métiers de l'entreprise.",[50,537,538],{},"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,540,541],{},"Intégration du design et des contenus dans une interface responsive.",[50,543,544,545,233],{},"Mise en ligne du site sur ",[115,546,549],{"href":547,"rel":548},"https:\u002F\u002Fcantetcordiste.com",[363],"cantetcordiste.com",[31,551,210],{"id":209},[36,553,554],{},"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,556,217],{"id":216},[36,558,559],{},"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,561,562,563,233],{},"Ce projet illustre mon offre de ",[115,564,566],{"href":565},"\u002Fservices\u002Fcreation-site-web\u002F","création de site web sur mesure",{"title":121,"searchDepth":11,"depth":11,"links":568},[569,570,571,572,573],{"id":165,"depth":11,"text":166},{"id":178,"depth":11,"text":179},{"id":185,"depth":11,"text":186},{"id":209,"depth":11,"text":210},{"id":216,"depth":11,"text":217},"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":579,"alt":580,"width":279,"height":279},"\u002Fmedias\u002FLogoCantetCordiste.svg","Logo Cantet Cordiste",{},"\u002Frealisations\u002Fcantet-cordiste",{"start":584,"end":584},"2021-11","Développeur web",{"title":516,"description":575},"Cantet Cordiste : site vitrine Nuxt",[589],"creation-site-web",{"loc":582},[592,406,496,593,594,595],"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":600,"title":601,"body":602,"client":664,"clientUrl":665,"context":242,"cover":150,"description":666,"draft":131,"extension":133,"featured":149,"gallery":667,"kicker":668,"logo":669,"meta":672,"navigation":149,"ogImage":150,"order":673,"partnerLogo":150,"path":674,"period":675,"robots":150,"role":677,"schemaOrg":150,"seo":678,"seoTitle":679,"services":680,"sitemap":682,"stack":683,"stem":691,"summary":692,"video":150,"__hash__":693},"realisations\u002Frealisations\u002Fbeekast.md","Beekast : refonte en microfrontends et design system",{"type":28,"value":603,"toc":657},[604,606,609,611,614,616,636,638,641,643,646],[31,605,166],{"id":165},[36,607,608],{},"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,610,179],{"id":178},[36,612,613],{},"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,615,186],{"id":185},[47,617,618,621,624,627,630,633],{},[50,619,620],{},"Conception et réalisation du design system pour une réutilisation dans les microfrontends.",[50,622,623],{},"Migration de blocs fonctionnels du monolithe vers des microfrontends.",[50,625,626],{},"Développement et intégration de nouveaux écrans issus des maquettes.",[50,628,629],{},"Développement backend en Node.js avec GraphQL.",[50,631,632],{},"Corrections de bugs et optimisations de performance.",[50,634,635],{},"Participation aux réunions de décisions techniques et aux rituels Agile.",[31,637,210],{"id":209},[36,639,640],{},"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,642,217],{"id":216},[36,644,645],{},"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,647,648,649,653,654,233],{},"Ce travail relève de la ",[115,650,652],{"href":651},"\u002Fservices\u002Frefonte-modernisation\u002F","refonte et modernisation d'applications"," et du ",[115,655,656],{"href":231},"renfort en équipe en tant que développeur freelance",{"title":121,"searchDepth":11,"depth":11,"links":658},[659,660,661,662,663],{"id":165,"depth":11,"text":166},{"id":178,"depth":11,"text":179},{"id":185,"depth":11,"text":186},{"id":209,"depth":11,"text":210},{"id":216,"depth":11,"text":217},"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":670,"alt":671,"width":279,"height":279},"\u002Fmedias\u002Fbeekast_logo_carre_violet.svg","Logo Beekast",{},6,"\u002Frealisations\u002Fbeekast",{"start":399,"end":676},"2022-12","Lead frontend",{"title":601,"description":666},"Beekast : refonte en microfrontends",[681,291],"refonte-modernisation",{"loc":674},[684,685,686,496,296,687,688,689,500,690],"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":695,"title":696,"body":697,"client":746,"clientUrl":150,"context":242,"cover":150,"description":747,"draft":131,"extension":133,"featured":131,"gallery":748,"kicker":749,"logo":750,"meta":753,"navigation":149,"ogImage":150,"order":754,"partnerLogo":150,"path":755,"period":756,"robots":150,"role":758,"schemaOrg":150,"seo":759,"seoTitle":760,"services":761,"sitemap":762,"stack":763,"stem":766,"summary":767,"video":150,"__hash__":768},"realisations\u002Frealisations\u002Feditions-du-vieux-crayon.md","Les éditions du vieux crayon : migration Symfony et PHP 8",{"type":28,"value":698,"toc":739},[699,701,704,706,709,711,725,727,730,732,735],[31,700,166],{"id":165},[36,702,703],{},"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,705,179],{"id":178},[36,707,708],{},"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,710,186],{"id":185},[47,712,713,716,719,722],{},[50,714,715],{},"Migration de PHP 5.6 vers PHP 8.2 et de Symfony 3.3 vers Symfony 5.4.",[50,717,718],{},"Développement de nouvelles fonctionnalités pour répondre aux besoins de l'entreprise.",[50,720,721],{},"Intégration d'API Platform pour moderniser le projet.",[50,723,724],{},"Configuration et hébergement du projet en production.",[31,726,210],{"id":209},[36,728,729],{},"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,731,217],{"id":216},[36,733,734],{},"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,736,562,737,233],{},[115,738,652],{"href":651},{"title":121,"searchDepth":11,"depth":11,"links":740},[741,742,743,744,745],{"id":165,"depth":11,"text":166},{"id":178,"depth":11,"text":179},{"id":185,"depth":11,"text":186},{"id":209,"depth":11,"text":210},{"id":216,"depth":11,"text":217},"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":751,"alt":752,"width":279,"height":279},"\u002Fmedias\u002Flogo-vieux-crayon.jpg","Logo des éditions du vieux crayon",{},7,"\u002Frealisations\u002Feditions-du-vieux-crayon",{"start":757,"end":150},"2023-01","Développeur fullstack",{"title":696,"description":747},"Vieux Crayon : migration PHP 5.6 → 8.2",[681],{"loc":755},[764,298,299,765,406,595],"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",1791300037380]