[{"data":1,"prerenderedAt":104},["ShallowReactive",2],{"\u002Fprojects\u002Flesptitssorciers":3},{"id":4,"title":5,"body":6,"category":78,"color":79,"demo":80,"demoLabel":81,"description":82,"extension":83,"image":84,"imageFit":85,"images":86,"logo":92,"logoBg":93,"meta":94,"navigation":95,"order":96,"path":97,"repo":81,"seo":98,"stem":99,"tech":100,"__hash__":103},"projects\u002Fprojects\u002Flesptitssorciers.md","Les P'tits Sorciers",{"type":7,"value":8,"toc":72},"minimark",[9,14,18,31,34,38,41,58,61],[10,11,13],"h2",{"id":12},"contexte","Contexte",[15,16,17],"p",{},"Dans le cadre de mon Master Développement Full Stack à My Digital School (2024-2026), j'ai travaillé pendant deux ans sur Les P'tits Sorciers, une start-up fictive proposant des box de goûters éducatifs pour enfants (recettes pédagogiques + ingrédients pré-dosés, adaptés par tranche d'âge). Le projet a été mené en équipe pluridisciplinaire de 7 personnes, dans une logique de start-up réelle : idéation, développement, recette et mise en production.\nJe me suis principalement concentré sur le Front-end, développé sous Vue.js 3 + Pinia + Vite, avec notamment :",[19,20,21,25,28],"ul",{},[22,23,24],"li",{},"Le tunnel de commande complet (9 étapes : adresse, informations enfants, choix des box, recettes, paiement Stripe...), avec une gestion d'état centralisée pour fiabiliser ce parcours transactionnel complexe.",[22,26,27],{},"L'intégration des maquettes Figma, y compris une refonte visuelle complète en cours de M2.\nLes animations (GSAP), l'optimisation des performances (WebP, lazy loading, préchargement) et l'accessibilité (navigation clavier, ARIA, WCAG).",[22,29,30],{},"L'interconnexion avec l'API REST (Spring Boot \u002F Java).",[15,32,33],{},"Le site est déployé en production sur VPS OVH avec CI\u002FCD automatisé (GitHub Actions), et a fait l'objet d'une recette complète (347 cas de test, 100% de réussite).",[10,35,37],{"id":36},"ce-que-jai-appris","Ce que j'ai appris",[15,39,40],{},"Technique",[19,42,43,46,49,52,55],{},[22,44,45],{},"Vue.js 3 & Pinia pour la gestion d'état dans un parcours utilisateur complexe et multi-étapes.",[22,47,48],{},"Consommation d'une API REST sécurisée (JWT), gestion fine des erreurs côté client.",[22,50,51],{},"Optimisation des performances et éco-conception web (formats d'image, code-splitting, préchargement).",[22,53,54],{},"Accessibilité numérique (WCAG) : une compétence que j'ai développée sur ce projet.",[22,56,57],{},"CI\u002FCD et déploiement en conditions réelles.",[15,59,60],{},"Travail en équipe",[19,62,63,66,69],{},[22,64,65],{},"Traduire fidèlement une maquette Figma tout en dialoguant avec des profils non techniques (marketing, direction artistique) pour ajuster l'interface aux attentes commerciales.",[22,67,68],{},"Absorber un changement de maquette majeur en cours de projet, ce qui m'a appris à mieux séparer, à l'avenir, la logique fonctionnelle de l'habillage visuel pour limiter l'impact de ce type de pivot.",[22,70,71],{},"L'importance d'une communication régulière dans une équipe pluridisciplinaire au rythme d'alternance morcelé.",{"title":73,"searchDepth":74,"depth":74,"links":75},"",2,[76,77],{"id":12,"depth":74,"text":13},{"id":36,"depth":74,"text":37},"web","#dca03c","https:\u002F\u002Fwww.lesptitssorciers.fr\u002F",null,"Box d'activités ludo-éducatives pour enfants, par niveau scolaire.","md","\u002Fimages\u002Fprojects\u002Flesptitssorciers\u002F1.png","cover",[84,87,88,89,90,91],"\u002Fimages\u002Fprojects\u002Flesptitssorciers\u002F2.png","\u002Fimages\u002Fprojects\u002Flesptitssorciers\u002F3.png","\u002Fimages\u002Fprojects\u002Flesptitssorciers\u002F4.png","\u002Fimages\u002Fprojects\u002Flesptitssorciers\u002F5.png","\u002Fimages\u002Fprojects\u002Flesptitssorciers\u002F6.png","\u002Fimages\u002Fprojects\u002Flesptitssorciers\u002Flogo.svg","#241b12",{},true,1,"\u002Fprojects\u002Flesptitssorciers",{"title":5,"description":82},"projects\u002Flesptitssorciers",[101,102],"Vue.js 3","API REST","ZYG0OuUeOthPpKGnqaGYjf7AHNMeOgGttKxv3MGaVp0",1785180046049]