Cas client #5
Refonte front-end
en Vue.JS en un
temps record
Découvrir en détails le cas client
Découvrir en détails le cas client
Temps
de lecture
mn
Entre Tout&Bon et Widop, c’est une relation qui s’inscrit dans la durée.
Depuis 2019, nous accompagnons ce réseau de franchisés dans le développement et la consolidation de ses outils numériques.
Tout&Bon nous a sollicités initialement dans le cadre de la reprise de son ERP, basé sur Laravel.
Dans l’écosystème PHP, Laravel est, avec Symfony et CakePHP l’un des frameworks les plus populaires.
Les franchisés, en contractualisant avec T&B, attendent un onboarding sur un système performant et de bénéficier d’un outil adapté et efficace.
C’est donc un travail de maintenance et d’optimisation complexe dans lequel nous nous engageons avec l’entreprise.
Au fil des années, la confiance s’est renforcée, et notre collaboration s’est naturellement étendue au site e-commerce, avec une volonté commune de bâtir un partenariat solide et pérenne.
En tant que franchiseur, Tout&Bon se doit de proposer une solution technique simple, fiable et facile d’utilisation afin de répondre aux besoins des franchisés. Le site e-commerce sous Sylius est à la fois la vitrine de l'entreprise pour le client final qui y commandera ses repas ou buffets, mais également le premier point d’entrée pour tout entrepreneur qui souhaiterait devenir franchisé. Son aspect, sa fonctionnalité, et son ergonomie sont donc le premier pas vers une croissance du chiffre d’affaires de l’entreprise.
Nous vous présentons ci-dessous l’un des projets sur lesquels nous avons accompagné Tout&Bon, une refonte totale de leur identité graphique, impliquant principalement des modifications sur le site vitrine Sylius en Vue.js, mais également sur l’ERP.
Un projet porté par la nouvelle identité de marque
Fin 2023, Tout&Bon entame un tournant stratégique fort : une nouvelle identité visuelle voit le jour, avec un logo revisité, une nouvelle palette de couleurs, et une charte modernisée. L’objectif est clair : aligner l’ensemble des supports et outils à cette nouvelle image.
C’est dans ce cadre que nous avons été mobilisés pour faire évoluer le site e-commerce, conçu avec Sylius et Vue.js. Le projet intégrait également un ajustement de certains éléments de l’ERP afin d’assurer une cohérence globale. Cette évolution a été pensée pour offrir à la fois une continuité technique et une harmonie graphique, tout en préservant les usages établis.
Vue.js : accompagner une transition écologique
L’un des grands axes techniques du projet portait sur la migration de Vue.js 2 vers Vue.js 3, ainsi que de Nuxt 2 vers Nuxt 3. Ces évolutions technologiques majeures s’inscrivent dans le cycle naturel des frameworks que nous utilisons. Nous avons également mis à jour l’environnement Node.js (passage de la version 10 à 13) et adapté le container Docker en conséquence.
Cette transition a été l’occasion d’adopter Pinia en remplacement de VueX pour la gestion des stores, conformément aux recommandations de la communauté Vue. L’équipe a porté une attention particulière aux performances SEO, aux formulaires, à la gestion des cartes interactives et à l’intégration de Google Tag Manager.
Etape par étape
Une fois cette migration technique terminée, nous avons pu démarrer l’intégration graphique du nouveau design. Chaque page du site a été repensée dans le respect des maquettes fournies, avec un soin tout particulier apporté à la cohérence visuelle, à l’ergonomie et à l'accessibilité. L’équipe a également pris en charge certains éléments complémentaires non maquettés, afin de garantir une expérience homogène sur l’ensemble du site.
Enfin, le site dans sa version pour les franchisés, hébergé ailleurs, a dû également être intégré au projet Nuxt afin de bénéficier du SEO de Tout&Bon et de correspondre au mieux à la nouvelle charte graphique.
Une organisation flexible et une coordination fine
Pour répondre à un planning exigeant – la nouvelle identité devant être présentée aux franchisés dès fin avril – nous avons mis en place une équipe évolutive, passant de 3 à 5 développeurs selon les phases. L’enjeu : maximiser l’efficacité tout en assurant une communication fluide. Le pilotage du projet s’est appuyé sur une synchronisation étroite entre les membres de l’équipe, avec un suivi rigoureux des priorités et un arbitrage régulier sur le périmètre fonctionnel à livrer.
Une feuille de route claire pour la suite
Cette collaboration s’inscrit dans une continuité : depuis la mise en ligne de cette nouvelle version, plusieurs lots fonctionnels ont été livrés et un quatrième est en cours de développement. Nous poursuivons notre accompagnement en mode « run », avec un rythme stabilisé mêlant évolutions, maintenance et co-construction de futurs outils.
Ce projet nous a permis, ensemble, de poser les bases d’un pilotage adapté à des délais courts, tout en cultivant la rigueur nécessaire à des environnements techniques exigeants. Il marque une étape structurante dans notre partenariat avec Tout&Bon, et nous servira de socle pour les prochaines évolutions de leur système d'information.