Dhia Eddine Boussandel

Contexte : Dans le périmètre Finance (CFT/FIN) du Groupe Société Générale, j’ai participé à la refonte complète et à l’implémentation from scratch d’une application web interne dédiée au pilotage des charges budgétaires des projets IT. Cette application permet aux équipes financières, analystes et responsables de projets IT de suivre, analyser et consolider les coûts, d’améliorer la visibilité budgétaire, et de faciliter le reporting financier au niveau du groupe.L’application s’appuie sur une architecture moderne avec un front-end en React (Hooks, Context API, MobX), un back-end en Node.js (NestJS) et une base de données Postgres, garantissant performance, maintenabilité et fiabilité des données financières, développée selon une méthodologie Agile Scrum dans un cadre SAFe. Réalisations : Frontend : - Définition et mise en place d’une architecture frontend feature-based (par domaine métier) afin de structurer le projet en modules indépendants (budget, reporting, transaction, etc.), améliorant la maintenabilité, la réutilisabilité et la scalabilité du code. - Conception du Design System (SgBootstrap, Antd, Material-UI) et standardisation des composants via Storybook, garantissant une UI cohérente et conforme à la charte SG. - Implémentation des routes avec React Router v6 et génération des pages/composants à partir du store MobX, en respectant la structure feature-based. - Développement de composants fonctionnels (Functional Components) basés sur Hooks, en appliquant les bonnes pratiques React (Clean Code, SOLID, DRY) et en garantissant une architecture modulable. - Développement et intégration des maquettes Figma en composants React, en garantissant une conformité UI/UX et une cohérence avec les exigences métiers. - Utilisation de GitHub Copilot pour accélérer le développement React, la génération de code boilerplate et de tests, tout en assurant une validation humaine pour garantir qualité et conformité. - Intégration d’Ag-Grid pour l’affichage et la gestion des listes/tableaux complexes, avec optimisation des performances, filtrage, tri, pagination et édition inline. - Génération automatique des clients API via OpenAPI et intégration des API REST backend côté frontend, assurant la cohérence des contrats front/back. - Mise en place d’un système de notification global via le store central, permettant un suivi temps réel des événements métiers. - Implémentation des règles de conversion d’unités financières (JH, k€uros, k€uros sales, klc) avec centralisation de la logique métier et réduction de la complexité. - Mise en place de l’authentification via SGConnect et gestion des rôles/permissions via SG IAM pour garantir un accès sécurisé aux fonctionnalités. - Tests de validation fonctionnelle entre V1 et V2, comparaison des résultats avec les équipes métiers et correction des écarts et mise en place de tests unitaires et d’intégration avec React Testing Library et tests end-to-end avec Cypress, assurant la fiabilité et la stabilité des fonctionnalités. - Traitement des anomalies et résolution des bugs en appliquant les méthodes de développement (TDD, SOLID) afin de réduire les coûts de maintenance et améliorer la qualité. - Mise en place de SonarQube pour contrôler la qualité du code, réduire les duplications et augmenter la couverture des tests. - Suivi des environnements HOMOL/PROD via Lens et intervention en production en cas d’incident. - Migration du frontend vers Vite pour améliorer la rapidité des Builds et des installations. Backend : - Mise en place d’une architecture DDD (Domain-Driven Design) et Clean Architecture (domain, application, infrastructure, interface), en garantissant séparation des responsabilités, testabilité, évolutivité et maintenabilité. - Encadrement de l’équipe (code review, mentoring), mise en place de standards TDD, Clean Code, SOLID, bonnes pratiques NestJS/TypeScript, et amélioration continue de la qualité du code. - Maintien des règles de gouvernance (Quality Gate : ESLint, SonarQube, couverture de tests (JEST), duplication de code, etc.). - Développement de fonctions AWS Lambda (Node.js) exposées via API Gateway, avec ingestion et stockage de fichiers dans S3, pour automatiser et scaler les traitements financiers (import de données, calculs budgétaires, notifications) tout en garantissant sécurité et performance. - Ajout d’annotations Swagger sur les contrôleurs, routes et DTOs pour générer une documentation standardisée, sécurisée et exploitable par OpenAPI, facilitant l’intégration côté front (consommation automatique des contrats API) et assurant la conformité des endpoints. - Mise en place de Grafana pour le monitoring (performance, logs, alerting), amélioration de l’exploitation et de la disponibilité. - Modernisation et DevOps : Migration vers une version Node LTS plus récente, mise en place d’un environnement Cloud (Docker, Kubernetes), optimisation des pipelines CI/CD (Jenkins → GitHub Actions). - Supervision des pods via Lens, et mise en place d’un calendrier d’activation/désactivation pour réduire les coûts (CPU/Mémoire) hors heures métiers. Environnement technique • Front-end: React (Hooks, Context API), TypeScript, MobX, React Router v6, Vite, Ag-Grid UI & Design System: Ant Design, Material-UI, SgBootstrap, Storybook, Figma • Back-end: Node.js, NestJS, API REST, OpenAPI / Swagger • Architecture: DDD (Domain-Driven Design), Clean Architecture • Base de données : PostgreSQL • Cloud & DevOps: AWS (Lambda, S3, API Gateway), Docker, Kubernetes • CI/CD & Outils : GitHub Actions, Jenkins, GitHub Copilot • Tests & Qualité: Jest, React Testing Library, Cypress, ESLint, SonarQube • Monitoring & Exploitation : Grafana, Lens • Sécurité & Authentification : OAuth 2.0, SGConnect, IAM

Contexte : Intégration dans l’équipe de développement d’un chatbot en ligne permettant de proposer et d’effectuer des prêts, avec une interface utilisateur riche et un parcours client optimisé. Réalisations : Frontend : • Développement de composants React modernes (Functional Components) basés sur Hooks, avec un focus sur la performance, la réutilisabilité et la cohérence UI. • Migration et refactoring des composants vers TypeScript et conversion de composants legacy en Functional Components, garantissant une meilleure maintenabilité. • Mise en place de wrappers React pour centraliser la consommation des APIs et standardiser les appels backend (gestion d’erreurs, loading states, retries). • Implémentation de nouvelles fonctionnalités front (UI/UX) du chatbot, incluant la gestion des états, des formulaires, et l’optimisation du rendu. • Intégration et gestion de l’authentification OAuth2 via Keycloak (SSO) (authority, audience, JWT Token), avec sécurisation des routes et des appels API. • Développement de tests unitaires et d’intégration front avec Jest, garantissant la stabilité et la qualité des livraisons. Backend : • Participation à l’élaboration des spécifications fonctionnelles et techniques en collaboration avec les équipes produit et métier. • Conception et développement d’un backend en Node.js avec Express.js, en mettant en place une architecture modulaire et maintenable. • Développement d’APIs REST pour gérer les échanges entre le chatbot, le frontend et les services externes. • Implémentation de mécanismes d’authentification et de sécurisation des échanges (JWT, gestion des sessions). • Intégration d’un serveur Model Context Protocol (MCP) pour permettre l’interconnexion du chatbot avec des outils externes et faciliter l’exposition de fonctionnalités backend à des agents intelligents. • Optimisation des performances et amélioration continue de la qualité du code. Environnement technique • Front-end: React (Hooks, Functional Components), TypeScript, Wrappers pour API, gestion des formulaires et états, UI/UX du chatbot • Back-end: Node.js, Express.js, APIs REST, JWT, sessions • Intégration & Protocoles : OAuth2, Keycloak (SSO), MCP server (Model Context Protocol) • Tests & Qualité : Jest (unitaires et intégration) • Architecture & Performance : modularité backend, optimisation du frontend, bonnes pratiques de code

Contexte : Développement d’une application backoffice pour une entreprise de services en ligne, permettant la gestion des prestations, le suivi des commandes, la validation des demandes et le pilotage des KPI. Réalisations : • Conception et développement d’une application backoffice permettant la gestion des prestations et le suivi des commandes clients • Développement de l’interface utilisateur avec React.js (hooks, composants fonctionnels, gestion d’état) • Mise en place d’API REST avec Node.js / Nest.Js pour la gestion des prestations, utilisateurs et commandes • Implémentation des fonctionnalités de validation et traitement des demandes (workflows simples) • Intégration d’une base de données (MongoDB) pour le stockage des données métiers • Mise en œuvre de tableaux de bord pour le suivi des KPI (statuts des commandes, volumes, délais) • Consommation et sécurisation des API (JWT, Nest.Js) • Tests fonctionnels des fonctionnalités développées et correction des anomalies • Utilisation de Git pour le versionnement du code et le travail collaboratif • Participation aux phases d’analyse des besoins et de conception technique Environnement technique • Front-end: React (Hooks, Functional Components), gestion d’état • Back-end: Node.js, Nest.js, API REST, middleware JWT • Base de données : MongoDB • Tests & Qualité : tests fonctionnels et correction d’anomalies • Versioning & Collaboration : Git • Reporting & KPI : tableaux de bord backoffice pour suivi des commandes et indicateurs

Contexte : Participation à l’évolution d’une application mobile (Android / iOS) de comparaison de services VTC et taxis, avec intégration de services partenaires et fonctionnalités temps réel. Réalisations : • Contribution à la stabilisation de l’application via la correction d’anomalies critiques, améliorant la performance et l’expérience utilisateur. • Développement de nouvelles fonctionnalités mobile et backend, avec intégration et consommation d’APIs REST internes et externes (VTC, Taxi, partenaires de paiement). • Implémentation de fonctionnalités de géolocalisation et suivi en temps réel pour localiser les chauffeurs et tracer les trajets des utilisateurs. • Intégration d’une map dynamique (Google Maps) pour visualiser les positions des chauffeurs et trajets sur l’application. • Optimisation de l’UI/UX mobile pour garantir une navigation fluide et un rendu responsif sur Android et iOS. • Participation à l’intégration de contenus web embarqués (WebView) et création de composants interactifs via Svelte, améliorant la performance et la modularité. • Utilisation de Astro pour générer des pages statiques rapides et optimiser le rendu côté client, tout en conservant les composants React existants. • Mise en place d’un système de notifications et d’indicateurs temps réel pour informer l’utilisateur sur le statut des courses. • Collaboration étroite en Agile Scrum avec les équipes produit et techniques pour améliorer le produit de manière itérative. Environnement technique : • Front-end mobile : React Native (Hooks, Functional Components), Redux, Svelte pour composants web interactifs, Astro pour pages statiques rapides, intégration de Google Maps / cartes dynamiques, gestion des états et UI/UX mobile • Back-end : Node.js, APIs REST internes et externes (VTC, Taxi, paiement), gestion des sessions et JWT • Base de données : MySQL • Tests & Qualité : tests unitaires et fonctionnels, correction d’anomalies • Collaboration & DevOps : Git, Trello, Agile Scrum • Notifications & Temps réel : WebSockets / systèmes temps réel pour le suivi des trajets et notifications utilisateurs

– Concevoir et implémentation des nouveaux Interfaces en se basant sur les maquettes du designer. – Styler les nouveaux composant. – Intégration du Template choisi par le directeur technique. – Implémentation des formulaires et génération des control de saisie nécessaires. Déploiement du front end sur heroku. – Implémenter le principe de stockage des images coté serveur. – Appliquer le Pair Programming. – Organiser et animer les Daily Meetings (Scrum Master).

– Concevoir et implémentation des nouveaux composants Angular. – Consommation des appels réseaux Restful et implémentation des services nécessaires – Intégration du matériel design et amélioration des interfaces graphiques. – Vérification de la conformité des interfaces aux maquettes du client. – Intégration de la librairie npm ng2-charts pour générer les différentes chartes graphiques. – Automatisation des tests.