← Retour aux projets
Logo du projet Les P'tits Sorciers

Les P'tits Sorciers

Box d'activités ludo-éducatives pour enfants, par niveau scolaire.

Vue.js 3API RESTDémo ↗

Contexte

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. Je me suis principalement concentré sur le Front-end, développé sous Vue.js 3 + Pinia + Vite, avec notamment :

  • 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.
  • L'intégration des maquettes Figma, y compris une refonte visuelle complète en cours de M2. Les animations (GSAP), l'optimisation des performances (WebP, lazy loading, préchargement) et l'accessibilité (navigation clavier, ARIA, WCAG).
  • L'interconnexion avec l'API REST (Spring Boot / Java).

Le site est déployé en production sur VPS OVH avec CI/CD automatisé (GitHub Actions), et a fait l'objet d'une recette complète (347 cas de test, 100% de réussite).

Ce que j'ai appris

Technique

  • Vue.js 3 & Pinia pour la gestion d'état dans un parcours utilisateur complexe et multi-étapes.
  • Consommation d'une API REST sécurisée (JWT), gestion fine des erreurs côté client.
  • Optimisation des performances et éco-conception web (formats d'image, code-splitting, préchargement).
  • Accessibilité numérique (WCAG) : une compétence que j'ai développée sur ce projet.
  • CI/CD et déploiement en conditions réelles.

Travail en équipe

  • Traduire fidèlement une maquette Figma tout en dialoguant avec des profils non techniques (marketing, direction artistique) pour ajuster l'interface aux attentes commerciales.
  • 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.
  • L'importance d'une communication régulière dans une équipe pluridisciplinaire au rythme d'alternance morcelé.

Maël — 2026