Evianchezvous

React.jsGraphQLMagento 2
Voir le site
Evianchezvous, capture d'écran 2 de l'interface (React.js, GraphQL)
Evianchezvous, capture d'écran 3 de l'interface (React.js, GraphQL)

Contexte

Refonte complète d'evianchezvous, site de livraison d'eau Evian à domicile sur Paris et l'Île-de-France. On est passés d'un Magento 1 monolithique à un Magento 2 headless, avec un front React et GraphQL. J'ai été tech lead front pendant deux ans, du cadrage jusqu'à la prod.

Mon approche

Le plus dur, c'était de tout mener de front : migrer Magento 1 vers 2, sortir l'interface du monolithe pour en faire une vraie app React, repenser le checkout et le compte client, et coder la logique d'abonnement (la livraison récurrente d'eau) qui n'existe pas nativement dans Magento. Il fallait aussi garder le SSR pour ne pas perdre le référencement, et arriver à des performances meilleures que la V1 dès le premier jour.

  • Front React construit from scratch sur tout le tunnel e-commerce (panier, checkout, compte, abonnements, créneaux de livraison par code postal), avec toute la logique métier rapatriée côté JS.
  • J'ai construit une couche GraphQL custom au-dessus de Magento 2, parce que le natif M2 ne couvre pas tout. Ça a demandé pas mal de resolvers et de schémas étendus, pour servir le front sans aller-retour superflus.
  • Module d'abonnement avec paiement récurrent et commandes ponctuelles, le tout branché sur les contraintes de livraison par zone. Magento ne sait pas faire ça tout seul, il a fallu coder ça en custom des deux côtés.

Stack & choix techniques

Magento 2 en backend pour toute la stack e-commerce (catalogue, commandes, clients, paiements), avec une couche GraphQL étendue sur mesure. Front en React, Apollo Client et SSR pour la perf et le SEO : sortir d'un monolithe Magento sans dégrader l'indexation, c'était tout l'enjeu du headless. React a aussi permis une vraie expérience mobile, avec des composants pensés pour le tactile et des transitions natives que Magento 1 ne savait pas offrir. La migration des données de M1 vers M2 (produits, clients, commandes, abonnements actifs) s'est faite sans casser l'historique.

React.jsGraphQLMagento 2

Résultat & apprentissages

Le site tourne toujours en prod, plusieurs années après la livraison. La perf et le taux de conversion sont en hausse par rapport à la V1 Magento 1. Pour moi, c'était mon premier site e-commerce en React et mon premier rôle de tech lead front sur la durée, deux ans. Ce que j'en retiens : passer un Magento en headless oblige à réinventer en React tout ce que la V1 faisait gratuitement, le panier, les sessions, les parcours client. Il y a beaucoup de plomberie à reposer pour gagner en UX et en perf.

Décrivez-moi votre projet, je vous dis honnêtement si je peux vous aider.

Développeur fullstack freelance senior. J'aide les startups et les équipes tech à construire ce qu'il faut, et à le construire bien.

Basé à Chambéry, full remote ou déplacement selon le projet. Lyon, Grenoble, Annecy, Paris…