[{"data":1,"prerenderedAt":771},["ShallowReactive",2],{"nav-services":3,"service-application-web-mobile":24,"service-cases-application-web-mobile":160},[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":131,"crew":134,"description":135,"extension":136,"faq":137,"icon":150,"meta":151,"navTitle":10,"navigation":152,"ogImage":153,"order":11,"path":9,"robots":153,"schemaOrg":153,"seo":154,"seoTitle":155,"sitemap":156,"stem":157,"summary":158,"__hash__":159},"services\u002Fservices\u002Fapplication-web-mobile.md","Applications web et mobiles sur mesure",{"type":28,"value":29,"toc":123},"minimark",[30,35,39,42,46,93,97,100,104,107,111,114],[31,32,34],"h2",{"id":33},"des-applications-conçues-pour-lusage-réel","Des applications conçues pour l'usage réel",[36,37,38],"p",{},"Un outil métier, une application destinée au grand public, un SaaS ou un espace client : une application doit d'abord résoudre un problème précis pour ses utilisateurs. Je conçois et développe des applications web et mobiles sur mesure, en m'appuyant le plus souvent sur Vue.js et Nuxt côté interface, Node.js côté serveur, et Capacitor pour publier sur iOS et Android à partir du même code.",[36,40,41],{},"Mon parcours inclut des applications en production pour des collectivités, des éditeurs de logiciels et des startups. Je connais donc aussi bien la phase de prototype que les contraintes de maintenance, de déploiement continu et de montée en charge.",[31,43,45],{"id":44},"ce-que-je-prends-en-charge","Ce que je prends en charge",[47,48,49,57,63,69,75,81,87],"ul",{},[50,51,52,56],"li",{},[53,54,55],"strong",{},"Cadrage et conception"," : besoins, parcours utilisateurs, maquettes et priorités, pour définir un premier périmètre réaliste (MVP).",[50,58,59,62],{},[53,60,61],{},"Interface"," : le plus souvent Vue.js, Nuxt et TypeScript, mais je choisis la techno qui convient à votre projet, avec un soin particulier pour l'accessibilité et les performances sur mobile.",[50,64,65,68],{},[53,66,67],{},"API et base de données"," : Node.js, AdonisJS ou Express, PostgreSQL, Redis ou MongoDB, authentification et gestion des rôles, intégration de SSO.",[50,70,71,74],{},[53,72,73],{},"Mobile"," : applications iOS et Android avec Capacitor, notifications push, publication sur les stores.",[50,76,77,80],{},[53,78,79],{},"Hors ligne"," : stockage local avec IndexedDB et synchronisation des données lorsque le réseau revient.",[50,82,83,86],{},[53,84,85],{},"Qualité et livraison"," : tests, intégration et déploiement continus avec GitHub Actions, conteneurs Docker.",[50,88,89,92],{},[53,90,91],{},"Hébergement et maintenance"," : mise en ligne sur un serveur (Docker, Dokploy), sauvegardes, mises à jour et suivi, pour que l'application reste disponible sans que vous ayez à y penser.",[31,94,96],{"id":95},"web-pwa-ou-application-sur-les-stores","Web, PWA ou application sur les stores",[36,98,99],{},"Une PWA s'installe depuis le navigateur, fonctionne bien sur mobile et peut rester utilisable hors connexion : c'est souvent la solution la plus simple et la plus économique. Lorsque vous avez besoin d'une présence sur l'App Store et Google Play, de notifications natives ou de fonctions de l'appareil, je prolonge la même base de code avec Capacitor. Nous décidons ensemble, selon vos utilisateurs et votre budget, de la meilleure voie.",[31,101,103],{"id":102},"quelques-réalisations","Quelques réalisations",[36,105,106],{},"Le Sablais est une application web et mobile pour les habitants des Sables-d'Olonne et des communes voisines : dates de collecte des déchets selon l'adresse, notifications push, et une base technique prévue pour accueillir de nouveaux services. Pour Codes Rousseau, j'ai conçu une application mobile pour les formateurs d'auto-école, avec un module de synchronisation offline-first et une architecture de données en IndexedDB. Pour Tipik, j'ai été lead frontend d'une application RH qui intégrait un moteur de matching par IA.",[31,108,110],{"id":109},"une-méthode-simple","Une méthode simple",[36,112,113],{},"Chaque mission commence par un échange gratuit, puis un cadrage écrit. Je livre ensuite par étapes, sur un environnement de préproduction accessible, pour que vous puissiez tester et orienter le produit tôt. Après la mise en ligne, je peux assurer la maintenance et les évolutions à la demande.",[36,115,116,117,122],{},"Vous avez une idée d'application ou un outil à moderniser ? ",[118,119,121],"a",{"href":120},"\u002Fdevis\u002F","Parlons de votre projet sur la page devis",".",{"title":124,"searchDepth":11,"depth":11,"links":125},"",[126,127,128,129,130],{"id":33,"depth":11,"text":34},{"id":44,"depth":11,"text":45},{"id":95,"depth":11,"text":96},{"id":102,"depth":11,"text":103},{"id":109,"depth":11,"text":110},[132,133],"le-sablais","codes-rousseau-app-formateurs",false,"SaaS, outil métier, app iOS\u002FAndroid ou PWA : applications web et mobiles sur mesure (Vue, Node.js, Capacitor…), de la maquette aux stores.","md",[138,141,144,147],{"question":139,"answer":140},"Faut-il développer une application native ou une application web ?","Cela dépend de l'usage. Une application web progressive (PWA) suffit souvent et se déploie plus vite. Quand l'application doit être publiée sur l'App Store et Google Play, ou accéder à des fonctions de l'appareil, j'emballe le même code web avec Capacitor, ce qui évite de développer deux applications séparées.",{"question":142,"answer":143},"Mon application pourra-t-elle fonctionner sans connexion ?","Oui, c'est possible. J'ai conçu une synchronisation offline-first avec IndexedDB pour l'application mobile des formateurs de Codes Rousseau. Il faut en revanche prévoir ce besoin dès la conception, car il influence l'architecture des données.",{"question":145,"answer":146},"Quelles technologies utilisez-vous côté serveur ?","Principalement Node.js (Express, AdonisJS) avec PostgreSQL, Redis ou MongoDB selon le besoin, et j'ai aussi travaillé avec GraphQL et Symfony. Je choisis la pile selon vos contraintes plutôt que par habitude.",{"question":148,"answer":149},"Pouvez-vous reprendre une application existante ?","Oui. Je commence par un audit rapide du code et de l'infrastructure, puis nous décidons s'il faut corriger, faire évoluer ou refondre. Voir aussi la page refonte et modernisation.","i-lucide-smartphone",{},true,null,{"title":26,"description":135},"Application web et mobile sur mesure",{"loc":9},"services\u002Fapplication-web-mobile","Des produits sur mesure, du MVP à la production : applications web, API, mobile avec Capacitor, usage hors ligne si le terrain l'exige.","i9eF33DVhKbcB_GeaG877fFKom_D6bbU_rK_iEqsaig",[161,309,419,516,601,696],{"id":162,"title":163,"body":164,"client":243,"clientUrl":153,"context":244,"cover":245,"description":250,"draft":134,"extension":136,"featured":152,"gallery":251,"kicker":276,"logo":277,"meta":282,"navigation":152,"ogImage":153,"order":11,"partnerLogo":153,"path":283,"period":284,"robots":153,"role":287,"schemaOrg":153,"seo":288,"seoTitle":289,"services":290,"sitemap":294,"stack":295,"stem":306,"summary":307,"video":153,"__hash__":308},"realisations\u002Frealisations\u002Ftipik.md","Tipik : un moteur de matching IA pour la mobilité interne",{"type":28,"value":165,"toc":236},[166,170,173,179,183,186,190,210,214,217,221,224],[31,167,169],{"id":168},"contexte","Contexte",[36,171,172],{},"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.",[174,175,176],"blockquote",{},[36,177,178],{},"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,180,182],{"id":181},"le-besoin","Le besoin",[36,184,185],{},"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,187,189],{"id":188},"ce-qui-a-été-réalisé","Ce qui a été réalisé",[47,191,192,195,198,201,204,207],{},[50,193,194],{},"Intégration complète du moteur de matching par IA (OpenAI) pour recommander les offres selon les profils.",[50,196,197],{},"Automatisation de l'import de CV, avec extraction intelligente des compétences et des expériences.",[50,199,200],{},"Développement de modules : catalogue de profils recommandés et agenda partagé entre plusieurs entreprises.",[50,202,203],{},"Conception d'un parcours utilisateur fluide et orienté accessibilité.",[50,205,206],{},"Intégration complète du SSO (Auth0, Okta) pour toutes les entités du groupe.",[50,208,209],{},"Mise en place du back-office, avec gestion fine des rôles et statistiques d'usage.",[31,211,213],{"id":212},"stack-et-choix-techniques","Stack et choix techniques",[36,215,216],{},"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,218,220],{"id":219},"résultat","Résultat",[36,222,223],{},"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,225,226,227,231,232,122],{},"Cette étude de cas relève de l'",[118,228,230],{"href":229},"\u002Fservices\u002Fintegration-ia\u002F","intégration de l'IA"," et du renfort en ",[118,233,235],{"href":234},"\u002Fservices\u002Fdeveloppeur-freelance-vue-nuxt\u002F","développement freelance Vue.js et Nuxt",{"title":124,"searchDepth":11,"depth":11,"links":237},[238,239,240,241,242],{"id":168,"depth":11,"text":169},{"id":181,"depth":11,"text":182},{"id":188,"depth":11,"text":189},{"id":212,"depth":11,"text":213},{"id":219,"depth":11,"text":220},"Tipik","freelance",{"src":246,"alt":247,"width":248,"height":249},"\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.",[252,256,260,264,268,272],{"src":246,"alt":253,"width":248,"height":249,"device":254,"caption":255},"Écran de connexion de Tipik : « Se connecter, pour grandir ensemble », avec les logos des enseignes partenaires","browser","L’écran de connexion de Tipik",{"src":257,"alt":258,"width":248,"height":249,"device":254,"caption":259},"\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":261,"alt":262,"width":248,"height":249,"device":254,"caption":263},"\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":265,"alt":266,"width":248,"height":249,"device":254,"caption":267},"\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":269,"alt":270,"width":248,"height":249,"device":254,"caption":271},"\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":273,"alt":274,"width":248,"height":249,"device":254,"caption":275},"\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":278,"alt":279,"width":280,"height":281},"\u002Fmedias\u002Flogo-tipik-black.svg","Logo Tipik",160,64,{},"\u002Frealisations\u002Ftipik",{"start":285,"end":286},"2023-05","2025-07","Lead développeur frontend Vue.js & intégration IA",{"title":163,"description":250},"Tipik : matching IA pour la mobilité RH",[291,292,293],"integration-ia","application-web-mobile","developpeur-freelance-vue-nuxt",{"loc":283},[296,297,298,299,300,301,302,303,304,305],"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":310,"title":311,"body":312,"client":382,"clientUrl":383,"context":244,"cover":384,"description":388,"draft":134,"extension":136,"featured":152,"gallery":389,"kicker":394,"logo":395,"meta":398,"navigation":152,"ogImage":153,"order":15,"partnerLogo":153,"path":399,"period":400,"robots":153,"role":402,"schemaOrg":153,"seo":403,"seoTitle":404,"services":405,"sitemap":406,"stack":407,"stem":416,"summary":417,"video":153,"__hash__":418},"realisations\u002Frealisations\u002Fle-sablais.md","Le Sablais : l'application des habitants des Sables-d'Olonne",{"type":28,"value":313,"toc":375},[314,316,319,321,324,326,351,353,356,358,368],[31,315,169],{"id":168},[36,317,318],{},"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,320,182],{"id":181},[36,322,323],{},"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,325,189],{"id":188},[47,327,328,331,334,337,340,343],{},[50,329,330],{},"Développement du backend et du frontend avec une architecture moderne.",[50,332,333],{},"Première fonctionnalité en production : les dates de collecte des déchets selon l'adresse de l'utilisateur.",[50,335,336],{},"Mise en place des notifications push.",[50,338,339],{},"Intégration et déploiement continus avec GitHub Actions.",[50,341,342],{},"Préparation de la publication sur Android et iOS avec Capacitor.",[50,344,345,346,350],{},"Rédaction d'un ",[118,347,349],{"href":348},"\u002Fblog\u002Fle-sablais-deploiement-application-progressive\u002F","article de lancement"," présentant les premières fonctionnalités.",[31,352,213],{"id":212},[36,354,355],{},"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,357,220],{"id":219},[36,359,360,361,367],{},"L'application est en ligne sur ",[118,362,366],{"href":363,"rel":364},"https:\u002F\u002Flesablais.fr",[365],"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,369,370,371,122],{},"Ce projet illustre mon offre d'",[118,372,374],{"href":373},"\u002Fservices\u002Fapplication-web-mobile\u002F","applications web et mobiles sur mesure",{"title":124,"searchDepth":11,"depth":11,"links":376},[377,378,379,380,381],{"id":168,"depth":11,"text":169},{"id":181,"depth":11,"text":182},{"id":188,"depth":11,"text":189},{"id":212,"depth":11,"text":213},{"id":219,"depth":11,"text":220},"Le Sablais","https:\u002F\u002Flesablais.fr\u002F",{"src":385,"alt":386,"width":387,"height":387},"\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.",[390],{"src":385,"alt":391,"width":387,"height":387,"device":392,"caption":393},"Collage d'écrans de l'application Le Sablais sur mobile","plain","Aperçu de l'application sur mobile","Application mobile & web",{"src":396,"alt":397,"width":281,"height":281},"\u002Fmedias\u002Flogo-svg-large.svg","Logo Le Sablais",{},"\u002Frealisations\u002Fle-sablais",{"start":401,"end":153},"2022-03","Développeur fullstack JavaScript",{"title":311,"description":388},"Le Sablais : application citoyenne (PWA)",[292],{"loc":399},[297,298,408,409,410,304,411,412,413,414,415],"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":420,"title":421,"body":422,"client":476,"clientUrl":477,"context":478,"cover":153,"description":479,"draft":134,"extension":136,"featured":152,"gallery":480,"kicker":481,"logo":482,"meta":487,"navigation":152,"ogImage":153,"order":19,"partnerLogo":153,"path":488,"period":489,"robots":153,"role":492,"schemaOrg":153,"seo":493,"seoTitle":494,"services":495,"sitemap":496,"stack":497,"stem":505,"summary":506,"video":507,"__hash__":515},"realisations\u002Frealisations\u002Fcodes-rousseau-app-formateurs.md","Codes Rousseau : l'application mobile des formateurs, même hors ligne",{"type":28,"value":423,"toc":469},[424,426,429,431,434,436,453,455,458,460,463],[31,425,169],{"id":168},[36,427,428],{},"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,430,182],{"id":181},[36,432,433],{},"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,435,189],{"id":188},[47,437,438,441,444,447,450],{},[50,439,440],{},"Conception et développement du module de synchronisation, selon une approche offline-first.",[50,442,443],{},"Conception de l'architecture des données avec IndexedDB.",[50,445,446],{},"Réalisation du module de suivi des élèves et de gestion des médias.",[50,448,449],{},"Personnalisation de l'application selon le client.",[50,451,452],{},"Participation aux rituels Agile Scrum de l'équipe.",[31,454,213],{"id":212},[36,456,457],{},"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,459,220],{"id":219},[36,461,462],{},"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,464,465,466,468],{},"Ce travail correspond à mon offre d'",[118,467,374],{"href":373},", notamment lorsque l'usage hors ligne est nécessaire.",{"title":124,"searchDepth":11,"depth":11,"links":470},[471,472,473,474,475],{"id":168,"depth":11,"text":169},{"id":181,"depth":11,"text":182},{"id":188,"depth":11,"text":189},{"id":212,"depth":11,"text":213},{"id":219,"depth":11,"text":220},"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":483,"alt":484,"width":485,"height":486},"\u002Fmedias\u002FLogo-codes-rousseau.svg","Logo Codes Rousseau",96,47,{},"\u002Frealisations\u002Fcodes-rousseau-app-formateurs",{"start":490,"end":491},"2020-09","2022-02","Développeur web et mobile (CDI)",{"title":421,"description":479},"Codes Rousseau : app mobile hors ligne",[292],{"loc":488},[408,498,414,499,500,501,502,503,504],"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":508,"title":509,"poster":510},"w8rzCSbkXKI","Application Codes Rousseau formateur, démonstration",{"src":511,"alt":512,"width":513,"height":514},"\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":517,"title":518,"body":519,"client":576,"clientUrl":549,"context":244,"cover":153,"description":577,"draft":134,"extension":136,"featured":152,"gallery":578,"kicker":579,"logo":580,"meta":583,"navigation":152,"ogImage":153,"order":23,"partnerLogo":153,"path":584,"period":585,"robots":153,"role":587,"schemaOrg":153,"seo":588,"seoTitle":589,"services":590,"sitemap":592,"stack":593,"stem":598,"summary":599,"video":153,"__hash__":600},"realisations\u002Frealisations\u002Fcantet-cordiste.md","Cantet Cordiste : un site vitrine sur mesure, géré en autonomie",{"type":28,"value":520,"toc":569},[521,523,526,528,531,533,552,554,557,559,562],[31,522,169],{"id":168},[36,524,525],{},"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,527,182],{"id":181},[36,529,530],{},"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,532,189],{"id":188},[47,534,535,538,541,544],{},[50,536,537],{},"Conception et développement d'un site internet sur mesure, adapté aux métiers de l'entreprise.",[50,539,540],{},"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,542,543],{},"Intégration du design et des contenus dans une interface responsive.",[50,545,546,547,122],{},"Mise en ligne du site sur ",[118,548,551],{"href":549,"rel":550},"https:\u002F\u002Fcantetcordiste.com",[365],"cantetcordiste.com",[31,553,213],{"id":212},[36,555,556],{},"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,558,220],{"id":219},[36,560,561],{},"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,563,564,565,122],{},"Ce projet illustre mon offre de ",[118,566,568],{"href":567},"\u002Fservices\u002Fcreation-site-web\u002F","création de site web sur mesure",{"title":124,"searchDepth":11,"depth":11,"links":570},[571,572,573,574,575],{"id":168,"depth":11,"text":169},{"id":181,"depth":11,"text":182},{"id":188,"depth":11,"text":189},{"id":212,"depth":11,"text":213},{"id":219,"depth":11,"text":220},"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":581,"alt":582,"width":281,"height":281},"\u002Fmedias\u002FLogoCantetCordiste.svg","Logo Cantet Cordiste",{},"\u002Frealisations\u002Fcantet-cordiste",{"start":586,"end":586},"2021-11","Développeur web",{"title":518,"description":577},"Cantet Cordiste : site vitrine Nuxt",[591],"creation-site-web",{"loc":584},[594,408,498,595,596,597],"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":602,"title":603,"body":604,"client":666,"clientUrl":667,"context":244,"cover":153,"description":668,"draft":134,"extension":136,"featured":152,"gallery":669,"kicker":670,"logo":671,"meta":674,"navigation":152,"ogImage":153,"order":675,"partnerLogo":153,"path":676,"period":677,"robots":153,"role":679,"schemaOrg":153,"seo":680,"seoTitle":681,"services":682,"sitemap":684,"stack":685,"stem":693,"summary":694,"video":153,"__hash__":695},"realisations\u002Frealisations\u002Fbeekast.md","Beekast : refonte en microfrontends et design system",{"type":28,"value":605,"toc":659},[606,608,611,613,616,618,638,640,643,645,648],[31,607,169],{"id":168},[36,609,610],{},"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,612,182],{"id":181},[36,614,615],{},"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,617,189],{"id":188},[47,619,620,623,626,629,632,635],{},[50,621,622],{},"Conception et réalisation du design system pour une réutilisation dans les microfrontends.",[50,624,625],{},"Migration de blocs fonctionnels du monolithe vers des microfrontends.",[50,627,628],{},"Développement et intégration de nouveaux écrans issus des maquettes.",[50,630,631],{},"Développement backend en Node.js avec GraphQL.",[50,633,634],{},"Corrections de bugs et optimisations de performance.",[50,636,637],{},"Participation aux réunions de décisions techniques et aux rituels Agile.",[31,639,213],{"id":212},[36,641,642],{},"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,644,220],{"id":219},[36,646,647],{},"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,649,650,651,655,656,122],{},"Ce travail relève de la ",[118,652,654],{"href":653},"\u002Fservices\u002Frefonte-modernisation\u002F","refonte et modernisation d'applications"," et du ",[118,657,658],{"href":234},"renfort en équipe en tant que développeur freelance",{"title":124,"searchDepth":11,"depth":11,"links":660},[661,662,663,664,665],{"id":168,"depth":11,"text":169},{"id":181,"depth":11,"text":182},{"id":188,"depth":11,"text":189},{"id":212,"depth":11,"text":213},{"id":219,"depth":11,"text":220},"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":672,"alt":673,"width":281,"height":281},"\u002Fmedias\u002Fbeekast_logo_carre_violet.svg","Logo Beekast",{},6,"\u002Frealisations\u002Fbeekast",{"start":401,"end":678},"2022-12","Lead frontend",{"title":603,"description":668},"Beekast : refonte en microfrontends",[683,293],"refonte-modernisation",{"loc":676},[686,687,688,498,298,689,690,691,502,692],"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":697,"title":698,"body":699,"client":748,"clientUrl":153,"context":244,"cover":153,"description":749,"draft":134,"extension":136,"featured":134,"gallery":750,"kicker":751,"logo":752,"meta":755,"navigation":152,"ogImage":153,"order":756,"partnerLogo":153,"path":757,"period":758,"robots":153,"role":760,"schemaOrg":153,"seo":761,"seoTitle":762,"services":763,"sitemap":764,"stack":765,"stem":768,"summary":769,"video":153,"__hash__":770},"realisations\u002Frealisations\u002Feditions-du-vieux-crayon.md","Les éditions du vieux crayon : migration Symfony et PHP 8",{"type":28,"value":700,"toc":741},[701,703,706,708,711,713,727,729,732,734,737],[31,702,169],{"id":168},[36,704,705],{},"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,707,182],{"id":181},[36,709,710],{},"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,712,189],{"id":188},[47,714,715,718,721,724],{},[50,716,717],{},"Migration de PHP 5.6 vers PHP 8.2 et de Symfony 3.3 vers Symfony 5.4.",[50,719,720],{},"Développement de nouvelles fonctionnalités pour répondre aux besoins de l'entreprise.",[50,722,723],{},"Intégration d'API Platform pour moderniser le projet.",[50,725,726],{},"Configuration et hébergement du projet en production.",[31,728,213],{"id":212},[36,730,731],{},"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,733,220],{"id":219},[36,735,736],{},"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,738,564,739,122],{},[118,740,654],{"href":653},{"title":124,"searchDepth":11,"depth":11,"links":742},[743,744,745,746,747],{"id":168,"depth":11,"text":169},{"id":181,"depth":11,"text":182},{"id":188,"depth":11,"text":189},{"id":212,"depth":11,"text":213},{"id":219,"depth":11,"text":220},"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":753,"alt":754,"width":281,"height":281},"\u002Fmedias\u002Flogo-vieux-crayon.jpg","Logo des éditions du vieux crayon",{},7,"\u002Frealisations\u002Feditions-du-vieux-crayon",{"start":759,"end":153},"2023-01","Développeur fullstack",{"title":698,"description":749},"Vieux Crayon : migration PHP 5.6 → 8.2",[683],{"loc":757},[766,300,301,767,408,597],"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",1791300037344]