Benjamin Haddad

💻 𝐒𝐭𝐚𝐜𝐤 𝐭𝐞𝐜𝐡𝐧𝐢𝐪𝐮𝐞

▸ 𝐂𝐥𝐚𝐮𝐝𝐞 𝐂𝐨𝐝𝐞 𝐏𝐫𝐨, 𝐑𝐞𝐚𝐜𝐭 18, 𝐀𝐆 𝐆𝐫𝐢𝐝, 𝐅𝐫𝐚𝐦𝐞𝐫 𝐌𝐨𝐭𝐢𝐨𝐧, 𝐈18𝐍𝐞𝐱𝐭, 𝐑𝐞𝐚𝐜𝐭 𝐐𝐮𝐞𝐫𝐲 4, 𝐌𝐔𝐈 5, 𝐇𝐢𝐠𝐡𝐂𝐡𝐚𝐫𝐭, 𝐌𝐒𝐖 (mock API), 𝐑𝐞𝐚𝐜𝐭 𝐑𝐨𝐮𝐭𝐞𝐫, 𝐕𝐢𝐭𝐞𝐬𝐭, 𝐀𝐱𝐢𝐨𝐬, 𝐃𝐧𝐃, 𝐑𝐞𝐚𝐜𝐭 𝐌𝐚𝐫𝐤𝐝𝐨𝐰𝐧, 𝐑𝐞𝐚𝐜𝐭 𝐒𝐲𝐧𝐭𝐚𝐱 𝐇𝐢𝐠𝐡𝐥𝐢𝐠𝐡𝐭𝐞𝐫, 𝐑𝐞𝐚𝐜𝐭-𝐈𝐜𝐨𝐧𝐬

🌍 𝐂𝐨𝐧𝐭𝐞𝐱𝐭𝐞

▸ Mission dans un environnement 𝐢𝐧𝐭𝐞𝐫𝐧𝐚𝐭𝐢𝐨𝐧𝐚𝐥 et entièrement en 𝐚𝐧𝐠𝐥𝐚𝐢𝐬, avec une forte 𝐮𝐭𝐢𝐥𝐢𝐬𝐚𝐭𝐢𝐨𝐧 𝐝𝐞 𝐥’𝐈𝐀.

▸ Communication régulière avec les équipes 𝐛𝐚𝐜𝐤-𝐞𝐧𝐝, les 𝐏𝐫𝐨𝐝𝐮𝐜𝐭 𝐎𝐰𝐧𝐞𝐫𝐬 et parfois le 𝐛𝐮𝐬𝐢𝐧𝐞𝐬𝐬.

🎯 𝐎𝐛𝐣𝐞𝐜𝐭𝐢𝐟𝐬

▸ Accompagner et former les équipes sur la réalisation de leurs 𝐩𝐫𝐞𝐦𝐢𝐞̀𝐫𝐞𝐬 𝐖𝐞𝐛𝐀𝐩𝐩𝐬 𝐢𝐧𝐭𝐞𝐫𝐧𝐞𝐬

▸ Conseiller sur les meilleures pratiques 𝐟𝐫𝐨𝐧𝐭-𝐞𝐧𝐝 et l’utilisation de technologies modernes autour de 𝐑𝐞𝐚𝐜𝐭

▸ Développer des pages de 𝐊𝐏𝐈 𝐢𝐧𝐭𝐞𝐫𝐚𝐜𝐭𝐢𝐯𝐞𝐬 pour la visualisation des données

🏆 𝐑𝐞́s𝐮𝐥𝐭𝐚𝐭𝐬 / 𝐑𝐞́𝐚𝐥𝐢𝐬𝐚𝐭𝐢𝐨𝐧𝐬

▸ Formation complète des 𝐝𝐞́𝐯𝐞𝐥𝐨𝐩𝐩𝐞𝐮𝐫𝐬 𝐛𝐚𝐜𝐤-𝐞𝐧𝐝 et onboarding sur les technologies 𝐟𝐫𝐨𝐧𝐭-𝐞𝐧𝐝

▸ Conseil technique, 𝐜𝐨𝐝𝐞 𝐫𝐞𝐯𝐢𝐞𝐰 et mise en place des technologies choisies

▸ Rédaction de 𝐝𝐨𝐜𝐮𝐦𝐞𝐧𝐭𝐚𝐭𝐢𝐨𝐧𝐬 𝐭𝐞𝐜𝐡𝐧𝐢𝐪𝐮𝐞𝐬 pour faciliter l’adoption des outils

▸ Création des 𝐫𝐞𝐪𝐮𝐢𝐫𝐞𝐦𝐞𝐧𝐭𝐬 𝐟𝐫𝐨𝐧𝐭-𝐞𝐧𝐝 pour un projet KPI : définition des pages, rôles, thèmes, besoins, interactions, 𝐞𝐬𝐭𝐢𝐦𝐚𝐭𝐢𝐨𝐧𝐬 𝐯𝐬 𝐫𝐞́𝐞𝐥 pour planifier efficacement la roadmap

👤 𝐑𝐞́𝐟𝐞́𝐫𝐞𝐧𝐭 : 𝐈𝐬𝐦𝐚𝐢𝐥 𝐎𝐔𝐀𝐋𝐀𝐀𝐋𝐎𝐔

Stack technique : 𝐍𝐞𝐱𝐭𝐉𝐒, 𝐓𝐲𝐩𝐞𝐬𝐜𝐫𝐢𝐩𝐭, SASS, GraphQL

▸ Architecture : Atomic Design, Monorepo

▸ Coverage: 91%

Contexte : poursuivre le développement du 𝐂𝐌𝐒 𝐢𝐧𝐭𝐞𝐫𝐧𝐞 𝐝𝐞 𝐂𝐡𝐚𝐧𝐞𝐥, en mettant l'accent sur la 𝐭𝐞𝐬𝐭𝐚𝐛𝐢𝐥𝐢𝐭é, le SEO, l'accessibilité, la 𝐩𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞, la 𝐬𝐢𝐦𝐩𝐥𝐢𝐟𝐢𝐜𝐚𝐭𝐢𝐨𝐧 et la 𝐜𝐨𝐦𝐦𝐮𝐧𝐢𝐜𝐚𝐭𝐢𝐨𝐧 active entre les différents corps de métier (PO, QA, Dev, UX/UI).

Objectifs : améliorer la 𝐜𝐨𝐮𝐯𝐞𝐫𝐭𝐮𝐫𝐞 et la 𝐦𝐚𝐢𝐧𝐭𝐞𝐧𝐚𝐛𝐢𝐥𝐢𝐭é du CMS interne de Chanel, ajouter de 𝐧𝐨𝐮𝐯𝐞𝐥𝐥𝐞𝐬 𝐟𝐨𝐧𝐜𝐭𝐢𝐨𝐧𝐧𝐚𝐥𝐢𝐭é𝐬 et détecter, corriger et 𝐫é𝐝𝐮𝐢𝐫𝐞 𝐥𝐞𝐬 𝐫é𝐠𝐫𝐞𝐬𝐬𝐢𝐨𝐧𝐬.

Résultats :

𝐀𝐣𝐨𝐮𝐭 𝐝𝐞 𝐧𝐨𝐮𝐯𝐞𝐥𝐥𝐞𝐬 𝐟𝐨𝐧𝐜𝐭𝐢𝐨𝐧𝐧𝐚𝐥𝐢𝐭é𝐬 :

▸ 𝐈𝐧𝐭é𝐠𝐫𝐚𝐭𝐢𝐨𝐧 de 𝐜𝐨𝐦𝐩𝐨𝐬𝐚𝐧𝐭𝐬 (Produit, Carousel, Slider, etc...).

▸ Création d'un outil permettant de générer facilement des modèles de données, similaire à Strapi, afin d'étendre l'accès à notre CMS à un plus large éventail d'utilisateurs, notamment les développeurs.

▸ Intégration de fonctionnalités permettant d'ajouter des propriétés dynamiques aux données en utilisant du JSON, afin de simplifier et d'enrichir le processus de contribution.

▸ Intégration des maquettes Figma de nos UX Designer.

Maintenance applicative :

▸ 𝐌𝐢𝐠𝐫𝐚𝐭𝐢𝐨𝐧 des fichiers JavaScript vers 𝐓𝐲𝐩𝐞𝐒𝐜𝐫𝐢𝐩𝐭.

▸ Rendre le code 𝐜𝐨𝐦𝐩𝐚𝐭𝐢𝐛𝐥𝐞 avec le rendu côté serveur (𝐒𝐒𝐑).

▸ Détection et 𝐜𝐨𝐫𝐫𝐞𝐜𝐭𝐢𝐨𝐧 des 𝐫é𝐠𝐫𝐞𝐬𝐬𝐢𝐨𝐧𝐬 sur tous les environnements.

▸ Développement de tests unitaires et d'intégration pour accroître la couverture des tests

▸ 𝐑𝐞𝐯𝐮𝐞 𝐝𝐞 𝐜𝐨𝐝𝐞, simplification de l’existant, amélioration de la qualité du code

Kering est la maison mère des marques de luxe suivantes (𝐘𝐯𝐞𝐬 𝐒𝐚𝐢𝐧𝐭 𝐋𝐚𝐮𝐫𝐞𝐧𝐭, Gucci, Balenciaga, Bottega Veneta, Alexander McQueen, etc…), elle réalise un chiffre d’affaires d’environ 10 487 millions d’euros par an. J’ai 𝐩𝐚𝐫𝐭𝐢𝐜𝐢𝐩é 𝐚𝐮 𝐝é𝐯𝐞𝐥𝐨𝐩𝐩𝐞𝐦𝐞𝐧𝐭 de leurs sites dans un 𝐜𝐨𝐧𝐭𝐞𝐱𝐭𝐞 𝐢𝐧𝐭𝐞𝐫𝐧𝐚𝐭𝐢𝐨𝐧𝐚𝐥 (toutes les réunions et cérémonies se déroulaient en anglais).

▸ https://www.ysl.com/fr-fr

Nous développons des pages web à l’aide d’un mapping avec des données provenant d’un 𝐡𝐞𝐚𝐝𝐥𝐞𝐬𝐬 𝐂𝐌𝐒 vers nos composants Next, ce qui nous permet de 𝐜𝐡𝐚𝐧𝐠𝐞𝐫 𝐝𝐲𝐧𝐚𝐦𝐢𝐪𝐮𝐞𝐦𝐞𝐧𝐭 𝐞𝐭 𝐝𝐚𝐧𝐬 𝐭𝐨𝐮𝐭𝐞𝐬 𝐥𝐞𝐬 𝐥𝐚𝐧𝐠𝐮𝐞𝐬 𝐥𝐞 𝐫𝐞𝐧𝐝𝐮 𝐞𝐭 𝐥𝐞 𝐜𝐨𝐧𝐭𝐞𝐧𝐮 𝐝𝐞 𝐧𝐨𝐬 𝐩𝐚𝐠𝐞𝐬.

Contexte de la mission :

▸ Notre équipe était composée d'environ 10 développeurs front-end, 5 développeurs full-stack, 3 UX designers, 6 analystes métier et chefs de produit.

▸ J’étais en charge de 𝐝é𝐯𝐞𝐥𝐨𝐩𝐩𝐞𝐫 𝐥𝐞𝐬 𝐧𝐨𝐮𝐯𝐞𝐥𝐥𝐞𝐬 𝐩𝐚𝐠𝐞𝐬 du site, d'intégrer des 𝐜𝐨𝐦𝐩𝐨𝐬𝐚𝐧𝐭𝐬 𝐒𝐭𝐨𝐫𝐲𝐁𝐨𝐨𝐤 développés par une agence.

▸ Nous travaillons en méthodologie 𝐒𝐜𝐫𝐮𝐦 et nous utilisons 𝐉𝐢𝐫𝐚 avec les réunions suivantes DSM, backlog refinement, poker planning, démo, rétrospective.

Tâches réalisées :

▸ Intégration des maquettes 𝐅𝐢𝐠𝐦𝐚 de nos UX Designer.

▸ 𝐃é𝐯𝐞𝐥𝐨𝐩𝐩𝐞𝐦𝐞𝐧𝐭 de 𝐜𝐨𝐦𝐩𝐨𝐬𝐚𝐧𝐭𝐬 (Quote, Rich Text, Block Edito Grid et Paragraph, etc...).

▸ Intégration de 𝐩𝐚𝐠𝐞𝐬 (FAQ, 404, Service Client, etc...).

Stack technique :

▸ Technologies : 𝐑𝐞𝐚𝐜𝐭, 𝐍𝐞𝐱𝐭𝐉𝐒, 𝐓𝐲𝐩𝐞𝐒𝐜𝐫𝐢𝐩𝐭, styled components, 𝐒𝐭𝐨𝐫𝐲𝐁𝐨𝐨𝐤.

▸ Gestion de l’état : local & session storage.

▸ Tests : Jest.

▸ Librairies : Axios, React Hook Form, Yup, Swipper, QS.

▸ Architecture : Atomic Design.