Mehdi Hamri

Contexte : Modernisation complète d’une plateforme SaaS B2B avec des enjeux forts de performances, d’architecture et d’uniformisation UI/UX. 🧠 Ce que j’ai mis en place : - Création from scratch d’un Design System complet (Shadcn UI, Tailwind CSS, TypeScript, Storybook) pour standardiser l’expérience produit et accélérer le delivery. - Pilotage de la migration d’une application legacy vers Next.js, en définissant l’architecture, les conventions et la stratégie de découpage du code. - Optimisation avancée des performances (Core Web Vitals) : code splitting dynamique, lazy loading, stratégies de cache et images optimisées. - Architecture de formulaires dynamiques complexes basés sur JSONForm (JSON Schema / UI-Schema) : gestion multi-étapes, conditions métier et validation typée. - Conception d’une interface hautement configurable et multilingue (i18n), adaptée à différents marchés et terminaux. - Mise en place d’une stratégie de qualité logicielle solide : tests unitaires et d’intégration (Vitest), tests end-to-end (Playwright), CI/CD intégrée. 🛠️ Stack & outils : TypeScript • React • Next.js • TailwindCSS • Shadcn/UI • JSONForm • Storybook • Vitest • Playwright • Git • CI/CD 🧩 Impact : - Réduction significative du temps de chargement et des coûts de maintenance. Base front-end désormais stable, scalable et prête pour l’évolution produit. - Adoption du design system par l’ensemble des équipes, créant un socle visuel et technique commun.

Contexte : Refonte complète d’une application legacy pour une plateforme tech à forte visibilité, avec des enjeux de performance, de scalabilité et d’expérience utilisateur à long terme. 🧠 Ce que j’ai mis en place : - Migration complète vers Next.js (App Router) avec SSR/SSG, optimisant SEO, temps de rendu et performance globale. - Implémentation d’une architecture modulaire inspirée de la Clean Architecture, renforçant la maintenabilité, la testabilité et la scalabilité du front-end. - Mise en place d’un design system robuste et typé TypeScript, documenté dans Storybook, garantissant une cohérence UI/UX sur tout l’écosystème produit. - Intégration Auth0 pour l’authentification sécurisée, avec gestion avancée des sessions, rôles et permissions. - Connexion fluide avec des API tierces (GitHub OAuth, React Query) pour la gestion d’identité et les données temps réel. - Rationalisation de la codebase : linting strict, conventions de commits, CI automatisée, tests unitaires systématiques. - Optimisation des performances : code splitting, lazy loading, mémoïsation sélective et travail continu sur l’accessibilité et la réactivité UX. - Instrumentation data-driven avec PostHog : suivi des parcours utilisateurs, funnels et comportements in-app pour orienter les priorités produit. - Monitoring avancé via Datadog : dashboard sur mesure, alerting temps réel et suivi des métriques critiques (API latency, erreurs frontend). 🛠️ Stack & outils : TypeScript • React • Next.js (App Router) • TailwindCSS • Auth0 • React Query • Storybook • PostHog • Datadog • Vitest • GitHub Actions • CI/CD 🚀 Impact : - +45% de gain sur les Core Web Vitals (LCP, FID, CLS). - Réduction significative de la dette technique et du temps moyen de livraison. - Adoption du design system par l’ensemble des équipes front & design. - Produit plus stable, mesurable et aligné avec la stratégie data-driven de l’entreprise.

Contexte : Mission stratégique autour de la modernisation du SI, de la standardisation front-end et de la gouvernance des APIs à l’échelle du groupe. 🏗️ SG-APIM – API Management Platform - Migration d’IBM-APIM vers une solution sur mesure, alignée sur les standards SG. - Développement des portails front-end multi-marques (React / TypeScript). - Migration de milliers d’APIs vers les nouvelles gateways et enrichissement continu du produit. 🎨 AWT – Socle Unifié & Design System - Création d’un design system React unifié et d’un socle de développement partagé entre entités. - Promotion du partage de code et de la contribution interne (tooling, documentation Storybook). 💻 URTA – Modernisation du Parc Mainframe - Refonte de 20+ applications legacy en micro-frontends React + APIs Java. - Conception des architectures front/back et encadrement d’une équipe de 6-8 devs. 🤝 SG Partners – Portail d’Intégration TPP (DSP2) - Remplacement de Konsentus/Preta par un outil sur mesure pour l’intégration TPP. - Création du référentiel interne SG et des APIs associées. 🛠️ Stack : TypeScript • React • Node.js • Java • Redux • REST / GraphQL • API Gateway • Docker • Jenkins • Storybook • GitLab CI/CD 🚀 Impact : - Migration réussie d’un écosystème de +2 000 APIs. - Uniformisation du front-end via un socle React commun. - Réduction majeure de la dette technique et meilleure cohérence UX. - Accélération du delivery et adoption large des nouveaux outils internes.

Contexte : Participation à la transformation digitale du réseau Crédit du Nord, sur des projets structurants autour du poste de travail conseiller et des applications bancaires en mobilité. 📱 Projet Conseiller Nomade - Équipe pilote Agile/Scrum, première initiative de ce type dans le département, posant les bases d’un nouveau mode de delivery. - Conception d’un design system Angular aligné sur la charte graphique Crédit du Nord, avec maintenance et évolutions continues. - Développement d’applications tablette (iOS & Android) : simulation monétique, gestion client, signature électronique. - Création d’une API REST pour la signature électronique, en collaboration avec Morpho-Dictao (interopérabilité et conformité sécurité). 💼 Projet NEXT – Poste de travail des conseillers - Rôle central dans la refonte du poste de travail conseiller, avec mise à niveau technologique et respect des contraintes KYC. - Conception et développement d’applications front-end et APIs pour la gestion des mandats, personnes liées, évaluation KYC, interdictions bancaires, etc. - Développement du portail principal d’accès aux outils conseillers, unifiant l’expérience utilisateur et la navigation entre applications. 🛠️ Stack & outils : AngularJS / Angular • TypeScript • JavaScript • REST APIs • Java EE • Git • Jenkins • Scrum 🚀 Impact : - Introduction réussie des pratiques Agile et du design system dans un environnement bancaire traditionnel. - Harmonisation de l’expérience front-end sur plusieurs applications métiers. - Accélération des cycles de livraison et amélioration de la cohérence produit pour les conseillers en agence.

Contexte : Première expérience significative au sein d’un éditeur SaaS spécialisé dans la gestion de campagnes marketing pour les marques de luxe. Participation à la modernisation complète du produit et à divers projets web à forte visibilité. 💎 Projets clés : - Modernisation de l’interface utilisateur du logiciel SaaS principal, utilisé par des marques telles que L’Oréal, Cartier, Kering, Chanel, LVMH, avec un focus sur la performance et l’UX. - Conception et développement de sites vitrines et de campagnes digitales pour les clients grands comptes du secteur du luxe. - Participation à un projet en partenariat avec l’OCDE, incluant le développement d’une application avec tableau de bord statistique interactif. - Création d’un site événementiel pour l’International Transport Forum, développé sous Drupal avec des modules personnalisés pour la gestion des contenus dynamiques. 🛠️ Stack & outils : JavaScript • jQuery • HTML5 / CSS3 / SASS • PHP • Drupal • REST APIs • Git 🚀 Impact : - Contribution directe à la refonte d’un produit SaaS internationalement utilisé. - Premiers jalons en UX/UI et design system. - Développement d’une rigueur technique et d’une approche produit orientée utilisateurs finaux.

- Développement d'une bibliothèque de composants UI sur mesure afin d'amélioré la productivité des développeurs et encourager la réutilisation de code. - Développement d'un calculateur intelligent permettant d'optimiser le fonctionnement des services logistiques

- Développement d'une application Angular en responsive design. - Optimisation des performances de l'application en réduisant le temps de chargement des pages afin d'améliorer l'expérience utilisateur.

- Développement d'une application web responsive en utilisant HTML, CSS et Jquery, assurant une compatibilité maximum avec tous les navigateurs. - Création d'un thème personnalisé pour le site web, améliorant ainsi l'engagement des utilisateurs envers la marque.