Cliquer pour passer
Carte interactive des producteurs locaux
Si vous passez dans une station TotalEnergies, vous apercevrez certainement des écrans dans le rayon produits locaux — j'étais en charge de développer cette application. Développé chez Artefact 3000 pour Argedis, filiale de TotalEnergies, c'est une application d'envergure nationale qui met en valeur les producteurs locaux partenaires, déployée sur des centaines de tablettes à travers toute la France.
Déployée sur des centaines de tablettes en stations, en France, pour mettre en avant les producteurs locaux partenaires. Chaque région a sa carte, son univers visuel, ses producteurs.
Une interface pensée pour tous. Simple, fluide, immédiate. Les visiteurs d'une station comprennent en un instant qui sont les producteurs locaux à proximité, où ils se trouvent, et ce qu'ils fabriquent.
Chaque région a son univers. La carte change selon le territoire. Les couleurs changent. Les icônes changent. Chaque territoire a sa propre identité visuelle — un travail de design poussé pour ancrer l'utilisateur dans son terroir.
De producteur en producteur. L'expérience est pensée pour la flânerie : un bouton, et on passe au suivant. Simple, accessible, sans friction — même pour les utilisateurs les moins à l'aise avec le digital.
En quelques chiffres
× 100s
Tablettes en station
FR · EN
Bilingue à la volée
0 réseau
Application 100% hors ligne
2024 +
Maintenu en continu
Lottie animé, palette régionale, géolocalisation des producteurs sur la carte.
Chaque région a son univers. L'image de la carte principale est un Lottie intégré — fond animé aux références culturelles locales — qui change entièrement d'une région à l'autre : Provence-Alpes-Côte d'Azur dans ses teintes dorées, Bourgogne-Franche-Comté dans ses violets profonds, Bretagne dans ses bleus océaniques.
Un radial gradient adapte dynamiquement le fond à la couleur dominante du Lottie. Sur la carte, chaque producteur est positionné à sa place exacte sur le territoire, relié au logo TotalEnergies par des traits en pointillé. Une main animée invite l'utilisateur à parcourir les producteurs dans le sens des aiguilles d'une montre.
Une identité par région
Fiche complète, navigation tactile, basculement FR/EN sans recharger.
Au clic sur un portrait, la carte s'efface et laisse place à la fiche complète : photo, story, produits, distance depuis la station. Précédent et suivant à portée de doigt.
La navigation entre producteurs s'accompagne d'un crossfade sur la photo (Framer Motion) et d'une animation fluide sur la hauteur du conteneur, qui s'ajuste selon la longueur du texte de chaque producteur.
Le basculement FR / EN ne recharge pas la page — les deux versions sont chargées à l'ouverture de l'application.
Interactions tactiles
◀ ▶
Précédent / suivant
FR ⇄ EN
Sans rechargement
↕
Hauteur animée
Fig.04 — Le même contenu en anglais, sans rechargement
FR
ENPour les développeurs et les recruteurs : pourquoi une PWA convertie en APK, pourquoi du SSG complet, comment animer une carte qui devient une fiche, et comment basculer FR / EN sans rechargement.
Au clic sur un producteur, la grande carte Lottie se réduit et se déplace pour rejoindre exactement la position de la carte producteur, puis disparaît en fondu. La carte producteur apparaît au même instant avec un léger scale et un délai coordonné via Framer Motion — pour que les deux cartes ne soient jamais visibles simultanément et que la transition paraisse continue.
Deux effets simultanés : un crossfade sur la photo (la photo suivante monte en opacité via Framer Motion pendant que l'actuelle disparaît) et une animation de hauteur sur le conteneur de texte. Comme height: auto ne s'anime pas nativement, un useRef mesure la hauteur réelle du contenu à chaque changement et met à jour un state en pixels — la transition CSS prend ensuite le relais.
Chaque producteur est positionné via des coordonnées x/y stockées dans Contentful. Le système s'adapte à toutes les résolutions de tablette pour un rendu fidèle sur chaque carte régionale.
Les PWA ne sont plus acceptées sur Android — et ne le seront bientôt plus non plus sur iOS. Impossible d'installer l'application comme une simple web app. Il a fallu convertir l'application en APK natif via un wrapper, en veillant à ce que le comportement reste identique — notamment le mode hors ligne.
Toutes les pages régions sont pré-générées au build via generateStaticParams — l'équivalent App Router des anciens getStaticProps / getStaticPaths. C'est aussi ce qui rend l'APK viable offline : toutes les données, images et contenus sont embarqués au build. Changement de producteur, navigation FR/EN — tout est instantané, sans aucun appel réseau.
Le basculement FR/EN ne passe pas par l'URL. Les deux versions des données Contentful sont chargées simultanément à l'initialisation. Un simple état client permute entre les deux — invisible pour l'utilisateur, immédiat à l'écran.
L'architecture Contentful permet à des équipes non-développeurs de gérer l'ensemble du contenu — ajout de producteurs, mise à jour des textes, photos, Lottie — sans aucune intervention technique.
Projet mené chez Artefact 3000, en collaboration avec une équipe design et un manager produit.
Des centaines de stations TotalEnergies équipées à travers toute la France. Les producteurs locaux disposent d'une vitrine digitale permanente, visible par des millions de voyageurs. Un produit vivant, maintenu et enrichi en continu depuis 2024.
Une appli tactile à imaginer ?
Je conçois et développe des apps statiques performantes, déployables hors ligne sur tablette ou borne.
Next.js statique, Contentful, Framer Motion, conversion APK : ce projet a posé les briques que je peux remettre en œuvre ailleurs.