Benjamin Haddad

💻 TECHNICAL STACK

▸ CLAUDE CODE PRO, REACT 18, AG GRID, FRAMER MOTION, I18NEXT, REACT QUERY 4, MUI 5, HIGHCHART, MSW (mock API), REACT ROUTER, VITEST, AXIOS, DND, REACT MARKDOWN, REACT SYNTAX HIGHLIGHTER, REACT-ICONS

🌍 CONTEXT

▸ Mission in an INTERNATIONAL environment and entirely in ENGLISH, with strong USE OF AI.

▸ Regular communication with BACK-END teams, PRODUCT OWNERS, and sometimes the BUSINESS.

🎯 OBJECTIVES

▸ Support and train teams in the development of their FIRST INTERNAL WEB APPS

▸ Advise on front-end best practices and the use of modern technologies around REACT

▸ Develop interactive KPI pages for data visualization

🏆 RESULTS / ACHIEVEMENTS

▸ Comprehensive training for BACK-END DEVELOPERS and onboarding on front-end technologies

▸ Technical consulting, CODE REVIEWS, and implementation of chosen technologies

▸ Writing TECHNICAL DOCUMENTATION to facilitate the adoption of tools

▸ Creation of front-end REQUIREMENTS for a KPI project: definition of pages, roles, themes, needs, interactions, ESTIMATES VS ACTUALS to effectively plan the roadmap

👤 REFERENT: ISMAIL OUALAALOU

Technical stack: NEXTJS, TYPESCRIPT, SASS, GraphQL

▸ Architecture: Atomic Design, Monorepo

▸ Coverage: 91%

Context: continuing the development of CHANEL's INTERNAL CMS, focusing on TESTABILITY, SEO, accessibility, PERFORMANCE, SIMPLIFICATION, and active COMMUNICATION between different professional groups (PO, QA, Dev, UX/UI).

Objectives: improve the COVERAGE and MAINTAINABILITY of Chanel's internal CMS, add NEW FUNCTIONALITIES, and detect, correct, and REDUCE REGRESSIONS.

Results:

ADDITION OF NEW FUNCTIONALITIES:

▸ INTEGRATION of COMPONENTS (Product, Carousel, Slider, etc.).

▸ Creation of a tool to easily generate data models, similar to Strapi, to extend access to our CMS to a wider range of users, including developers.

▸ Integration of features to add dynamic properties to data using JSON, to simplify and enrich the contribution process.

▸ Integration of Figma mockups from our UX Designers.

Application maintenance:

▸ MIGRATION of JavaScript files to TYPESCRIPT.

▸ Make code COMPATIBLE with server-side rendering (SSR).

▸ Detection and CORRECTION of REGRESSIONS across all environments.

▸ Development of unit and integration tests to increase test coverage

▸ CODE REVIEW, simplification of existing code, improvement of code quality

Kering is the parent company of the following luxury brands (YVES SAINT LAURENT, Gucci, Balenciaga, Bottega Veneta, Alexander McQueen, etc.), with an annual turnover of approximately 10,487 million euros. I PARTICIPATED IN THE DEVELOPMENT of their sites in an INTERNATIONAL CONTEXT (all meetings and ceremonies were conducted in English).

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

We develop web pages using a mapping with data from a HEADLESS CMS to our Next components, allowing us to DYNAMICALLY CHANGE THE RENDERING AND CONTENT OF OUR PAGES IN ALL LANGUAGES.

Mission context:

▸ Our team consisted of about 10 front-end developers, 5 full-stack developers, 3 UX designers, 6 business analysts, and product managers.

▸ I was responsible for DEVELOPING NEW PAGES for the site, integrating STORYBOOK COMPONENTS developed by an agency.

▸ We work using SCRUM methodology and use JIRA with the following meetings: DSM, backlog refinement, poker planning, demo, retrospective.

Tasks performed:

▸ Integration of Figma mockups from our UX Designers.

▸ DEVELOPMENT of COMPONENTS (Quote, Rich Text, Block Editor Grid and Paragraph, etc.).

▸ Integration of PAGES (FAQ, 404, Customer Service, etc.).

Technical stack:

▸ Technologies: REACT, NEXTJS, TYPESCRIPT, styled components, STORYBOOK.

▸ State management: local & session storage.

▸ Tests: Jest.

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

▸ Architecture: Atomic Design.