YASSINE JAAOUANE

Projet : Alpine Telemetry Data Plateform Une plateforme de données qui collecte, traite, analyse et visualise les données télémétriques détaillées pendant des sessions ou des courses sur le cloud pour plusieurs applications finales destinées au plusieurs types d’utilisateurs (Analystes de données, Coachs, Pilotes, Ingénieurs Pit wall). BESOINS : - Live streaming : o Dashboards de monitoring des données : mode LIVE et FOCUS (interactive), o video stream en temps réel synchronisée avec les données télémétriques - Historic : Replay des runs, comparison avec best-lap, reporting. RÉALISATIONS - Conception et implémentation d’une solution FRONT monorepo pour produire des composants graphiques intégrables en Grafana, Stremlite, Custom web app en react/vue/angular et dans un backoffice (Gestion des circuits, Calendrier des sessions et des pilotes) o Environnement de Dev/test : Custom Grafana docker image, o Versioning, build et packaging, o UI Factory générique, - Implémentation d’un client de récupération des données Json/Parquet via Websocket/http API - Custom grafana plugins - Implémentation/Intégration/Optimisation de chart Time-series (millions de points avec un refresh rate ~200ms) en utilisant LightiningChart. - Participation dans l’implémentation de CI/CD. - Participation et implémentation des tests e2e, d’intégration et validation. - Participation à la mise en place et test du POC de la solution sur les pistes (Le Mans bugatti, Nürburgring, Centre technique d'Aubevoye). - Documentation des composants : Storybook ENVIRONNEMENT TECHNIQUE React 18, NextJS v14, Grafana 10, Typescript, Turborepo, tusup Tailwindcss, GSAP 3, D3, visx, ChartJS, LightningChart, Media: hls.Js, three.js Playwright, Cypress, Jest, Github projects, Cloud Azure, Docker, Redis, Python, kafka, questDb.

Projet : DeepL Solution de traduction unifiée pour l’entreprise utilisant DeepL Intervenants : 3 Langue : Français/Anglais BESOINS : - Unifier l'accès à DeepL pour tous les collaborateurs d'Eramet - Extension de la limite de DeepL (taille, format, type des fichiers, performance, Sécurité/Confidentialité , UX) RÉALISATIONS - Implémentation du socle technique de l’application FRONT/BACK - Implémentation des pages : o Traduction texte o Traduction des fichiers : dashboard avec différents modes selon l’étape (Adding, Editing, Uploaded, Progress, Ready for download, Failed) - Conception et implémentation de découpage binaire et logique des documents de type PDF, Word, Powerpoint. - Multi-langue : i18n - Conception et implémentation de la couche de données : o Db design o DataContext using Entity Framework (code first) o Backup, Migration process - Background service: Développement d'un service en arrière-plan permettant l'exécution de tâches de traduction, même après la fermeture du navigateur par l'utilisateur, garantissant ainsi la continuité des processus longs. - Participation dans l’implémentation de CI/CD - Tests d’intégration et validation ENVIRONNEMENT TECHNIQUE FRONT : Vue 3 + Typescript, Pinia, TailwindCss/Flowbite, Uppy + Tus Cypress, ViteJS, Pnpm BACK : .Net 6 / C#, DeepL.NET, Tusdonet, BackgroundService, PDFsharp, OpenXML SDK, SQL Server INFRA : Azure (WebApp, Blob storage, AD), terraform   eramet Norway Projet : ENP11 – Furnace Monotoring Développement d’une vue 3D d’un four et son intégration dans la plateforme data Optimistik permettant un monitoring visuel en temps réel. Intervenants : 3 Langue : Français/Anglais RÉALISATIONS - Implémentation du socle technique de l’application FRONT en Angular, - Conception et implémentation du protocole de communication avec la plateforme Optimistik (via POST MESSAGE) o Récupération des données depuis l'API Optimistik et gestion dynamique du changement de contexte, incluant les variations de dates et de données. - Construction de la scène 3D avec l’ajout d'éléments essentiels : SceneObject, configuration de la PerspectiveCamera, intégration d’éclairages (AmbientLight, DirectionalLight, PointLight) - Décomposition du four en plusieurs composants interactifs (Meshes / Geometry / Materials) - Développement de composants de visualisation : o Heatmaps :  Api-client pour faire les calculs et les générations des Canvas pour les Heatmaps  Intégration de heatmaps pour différents composants du four (Sections, Thermocouples, Heatflux, Tapholes, Gazpipes)  Deux types visuelles de heatmaps selon la préférence d’utilisateur : représentations visuelles Bilinear ou localized.  Ajout de légendes explicites pour faciliter l'interprétation. o Développement d'un système de filtrage par profondeur pour les thermocouples, permettant un calcul ciblé sur les données des thermocouples à des profondeurs spécifiques, - Collaboration avec l’équipe métier pour la validation des fonctionnalités. - Participation dans les tests d’intégration et validation. - Participation dans l’implémentation de CI/CD. ENVIRONNEMENT TECHNIQUE Angular 13, TypeScript, Angular Material, bootstrap grid, ThreeJS, angular-three, gltf, Blender, Shaders, GLSL, heatmap.js, Azure AD, Azure App Services, Azure DevOps, terraform, Optimistik.   eramet Gabon Projet : Anticollision – Reckall Intégration des données Reckall et développement d’un outil web permettant l’analyse du traffic sur une mine. Intervenants : 4 Langue : Français RÉALISATIONS - Implémentation du socle technique de l’application FRONT/BACK, - Alimentation de la base de données Postgres par les données provenant des fichiers Reckall : o Configuration et implémentation du trigger pour initier un événement lors du dépôt d'un fichier Reckall dans le bucket S3, o Implémenter un worker dans un service en arrière-plan pour effectuer le décodage des données binaires et insérer ces données, o Gestion des queues des tâches via BullMQ, ioredis (cache) et Bull Board (monitoring) - Visualisation interactive o Implémentation d’un Player qui permet de rejouer les déplacements des engins sur le chantier en se basant sur les données collectées: o Choix de la date et de l'heure de début et de fin pour visualiser les trajets effectués pendant cette période o Filtrage par type et identifiant d'engin o Mise en évidence des alertes : Focus sur les moments où de nombreuses alertes sont survenues, permettant une analyse approfondie des incidents ou des situations à risque. - (POC) Reconstitution en 3D des scènes d'incidents : o Rejoue les déplacements des engins impliqués dans des incidents critiques ou les accidents survenus. o Intégration de modèles gltf représentant fidèlement les différents types d'engins utilisés sur le chantier. o Utilisation d'une caméra perspective pour naviguer autour de la scène, permettant une exploration sous différents angles et offrant une expérience utilisateur immersive. ENVIRONNEMENT TECHNIQUE NestJS, aws sdk v2, Angular v13, TypeScript, Mapbox, Angular Material, bootstrap grid, BabylonJS, gltf, OrbitControls, Databricks, Data Factory, Postgres, PostGIS. SLN - Nouvelle-Calédonie Projet : Geoproc / NiLime Plateforme de données géologiques d’Eramet permettant d’automatiser les estimations des Ressources et Réserves, le reporting et assure la traçabilité des calculs. Intervenants : 4 Langue : Français RÉALISATIONS - Chiffrage des demandes dans des réunions hebdomadaires, - Participation à l'implémentation de la partie Backend : Azure functions. - Modélisation des nouveaux besoins dans la base de données Postgres, Knex, - Implémentation d'un module de contrôle d'accès (ACL) : o Développement d'un système de gestion des permissions pour assurer que les utilisateurs disposent des droits appropriés en fonction de leur rôle, garantissant ainsi la sécurité et la confidentialité des données. - Amélioration de l'interface utilisateur pour une meilleure expérience : o ajout de nouvelles fonctionnalités et optimisation des performances de l'application front-end. - Revue et refactoring de code : o Analyse critique du code existant (notamment sur la partie FRONT), o identification des améliorations possibles et optimisation de la performance de rendu (Dashboard, chargements des tableaux et des images). - Test unitaire (jest), test d’intégration (cypress). - Documentation technique dans un projet de test en utilisant just-the-docs (Jekyll theme) o Rédaction de documents détaillant les aspects techniques du projet, incluant les architectures mises en place, les processus de développement, les guides d'utilisation et les procédures de maintenance. ENVIRONNEMENT TECHNIQUE React, Redux, React hooks, JavaScript, Semantic UI, Mapbox, plotly, i18n, Knex (orm), Postgres, Azure Functions, Azure Storage, terraform, AKS, k8s, docker, Python, Isatis.

Projet : Extranet idem Nouvel espace B2B remplaçant un ancien outil, l’extranet permet la gestion d’un parc de prêt pour les différents constructeurs : Microsoft, Dell, Lenovo, La Maison Bleue, etc. Intervenants : 4 Langue : Français/Anglais RÉALISATIONS - Conception et mise en place de l'architecture technique de l'application front-end en React : o Gestion d'état global de l’application : context API, o Routing et gestion des accès via des guards d’authentification, en intégrant MSAL pour l'authentification (login/mot de passe ou authentification via Azure AD). - Développement des vues/composants correspondant aux maquettes livrées par l’UX : o Layout structuré avec une sidebar, un contenu principal et un header dynamique contenant le Panier. o Switcher de mode permettant de basculer aisément entre le mode Loan (prêts) et le mode Donations (dons) o Catalogue :  avec arborescence en tree dans une hiérarchie de produits ou services  un breadcrumb réactif pour améliorer la navigation - Participation dans l’implémentation du backoffice : o Gestion du catalogue : avec une visualisation en treeView, permettant aux administrateurs de gérer de manière efficace les éléments du catalogue et d'organiser les données à l’aide d'une interface intuitive et responsive. o Gestions des utilisateurs et leurs groupes, rôles et leurs habilitations, o Gestions des constructeurs et leurs préférences, - Participation dans l’implémentation des endpoints en Asp.Net Core. - Participation dans les tests d’intégration et validation. - Mesure et optimisation de performance. - Maintenance corrective et évolutive. ENVIRONNEMENT TECHNIQUE React v16, React Hooks, material-ui, bootstrap, DotNet Core, Web API, Azure AD, MS Sql Server, T-SQL Azure DevOps, MSMQ, Microsoft Dynamics Nav

Projet : TunnelLab - Bouygues TP Application : VizuNode Dashboard de visualisation des données générées par les tunneliers connectés et des capteurs des chantiers afin d’améliorer la productivité et la sécurité. Intervenants : 4 Langue : Français BESOINS : - Collecte, Calcul et visualisation des données des capteurs sur des charts et une cartographie. - Gestion des configurations des différents capteurs : Ajout, extraire, modifier et comparer des versions de config. RÉALISATIONS - Participation à l'implémentation des APIs. - Implémentation du socle technique de l’application client Angular 7 : o Intégrer Keycloack pour l’authentification/Module de routage. o Intégration d'OpenStreetMap pour la visualisation géographique des données, permettant une localisation précise des équipements, des capteurs et du tracé d'avancement du tunnelier. o Développement des vues/composants correspondant aux maquettes graphiques livrées par l’UX en Figma - Création d'assistants de configuration pour divers types de capteurs (Toponode, MCF88, Tilt, Otrog400, Objenious, etc.), facilitant leur intégration et leur paramétrage. - Intégration de Grafana pour la visualisation et l'analyse des données en temps réel, avec développement de nouveaux plugins (custom Panels) en Angular et React pour répondre aux besoins spécifiques du projet (cartographie réactive et contextuelle). - Participation dans la mise en place d'une intégration continue avec GitLab et déploiement via Rancher sur deux environnements distincts (développement et production). ENVIRONNEMENT TECHNIQUE JavaScript/TypeScript, Angular 7/React, material-ui, Iot réseau LoRa, NodeJS/express, RabbitMQ/ amqplib, Open Street Map (OSM), Cesium OSM Buildings, GeoServer (WFS, WMS), ArcGis, SHP, Grafana 5/6, Keycloak, Rancher, docker, Gitlab, influxDb, mongoDb.   Bouygues Telecom Application : BattleFront CMS du Site boutique Bouygues Telecom Mise en place d’un mécanisme de pré-génération des pages statiques depuis les applications React/Angular, avec déploiement sur un stockage et exposition en CDN afin d’optimiser les performances et l’expérience utilisateur. Intervenants : 4 RÉALISATIONS - Participation dans l’intégration CMS et la génération des pages statiques rendues côté serveur en utilisant Wordpress (en php), react/Angular, Aws (Lambdas et Bucket), - Participation dans l’intégration du module de search (back et front) afin d’améliorer la performance et la pertinence des recherches sur la boutique en ligne : o Synchronisation des pages des articles avec Elasticsearch, o Optimisation des Analyzers, ajuster les Boosting, Pagination (schéma et resolver graphQL) o Implémentation d’une api de recherche multicritère (gamme prix, notes utilisateurs, caractéristiques techniques, délais de livraison) - Développement d'une Progressive Web App (PWA) pour le parcours de vente des forfaits B&You : o Benchmarking de performance entre les différents Frameworks PWA (Progressive Web Application) o Implémentation du socle technique de l’application : yarn, Angular CLI, Webpack, gulp o Intégration HTML, CSS, JS à partir de maquettes graphiques livrées par l’UX (Sketch, Zeplin, Adobe XD)  composants Web du parcours de vente des forfaits B&You en Angular 6 o Optimisation des performances :  Mode offline, Mise en cache dans le Service workers.  Optimisation des données réseaux : mise en place des api graphQl en utilisant le service appsync d’AWS. - Participation dans le développement du Trilogy : libs des composants Angular/react et de CSS généré par Bulma afin d’unifier le rendu visuel de toutes les applications Bouygues Telecom. - Développement des widgets intégrables sur le site de Bouygues Telecom : o Remplacement d'une page d'authentification CAS développée en Java par une popin de connexion en JS (Angular/React), afin d'améliorer l'expérience utilisateur et la flexibilité du système d'authentification. o Utilisation de l'API postMessage pour établir une communication sécurisée entre la popin de connexion et la page d'authentification CAS existante. o Création d'un header et footer unifiés, gérés par le CMS WordPress, avec une réactivité contextuelle en fonction de la page courante et de l'état de connexion de l'utilisateur. ENVIRONNEMENT TECHNIQUE HTML5, Javascript, (ES5, ES6), AWS (lambdas, gateway, bucket, ec2), React, Preact, Mobx, Angular 6, axios, Bulma css, Dareboost, Akamai, Wordpress php (battleFront), graph-ql, npm/yarn, bolt, webpack/parcel, gulp, Git, Gitlab, husky. Bouygues SA Application : ABBY - Autoévaluation et Benchmarking groupe Bouygues Autoévaluation des pratiques de management auprès des CODIR des différentes entités du groupes Bouygues regroupés en séminaires animés par le Directeur développement durable et QSE du groupe. Intervenants : 4 Langue : Français/Anglais RÉALISATIONS - Participation au chiffrage et décomposition du Sprint Backlog en éléments lors du Sprint Planning, - Participation dans l’implémentation des APIs REST en utilisant ASP.NET WebApi, - Conception et développement des applications pour les différents types d’acteurs : o Animateur : application Tablette en WPF. o Participant : application mobile en Angular (en PWA support du mode offline). o Admin : application Web backoffice en Angular pour gérer les sessions. - Participation dans l’implémentation des repositories de la couche d’accès aux données. - Revue et Re-factoring de code, - Participation dans les tests d’intégration et validation, - Mesure et optimisation de performance, - Écriture de documents pour la capitalisation des retours d’expérience, - Rédaction des documents techniques, ENVIRONNEMENT TECHNIQUE C#, .Net Framework 4.7, Entity Framework 6, MS SQL Server 2016, T-Sql, Angular 4, HTML5/CSS3, Bootstrap, Angular Material, Visual Studio 2017, IIS7.5, MS Build, TFS.   Bouygues TP Application : Ubysol Solution de traçabilité innovante reposant sur la technologie des objets connectés intégrés permettant la gestion de l’évacuation des déblais issus des chantiers et d’assurer la transparence depuis l’extraction jusqu’à la destination finale. Intervenants : 5 RÉALISATIONS - Implémentation du socle technique de la solution, - Conception et implémentation des APIs REST pour l’application portail web et la tablette mobile, - Conception et développement du portail Web (Angular 1.6) - Diffusion des bonnes pratiques, - Participation dans l’automatisation des builds (Jenkins), - Rédaction des documents techniques ENVIRONNEMENT TECHNIQUE C#, .Net Framework 4.6, ASP.Net MVC5, Web API, Swagger, HTML5/CSS3, JavaScript/AngularJS 1.6, Google Maps, Postman/Soap UI, Entity Framework (Code First), MS SQL Azure 2016, T-Sql, MongoDb, Visual Studio 2017, Jenkins, TFS, Objenious, Android. C2S Bouygues Application : Ecopolis pour la SAUR Ecopolis permet aux usagers d’une ville de Signaler des événements, Recevoir les news en temps réel et d’accéder aux infos du service de déchèterie, PAV,…) Développement d'une application mobile cross-plateformes en utilisant le Framework ionic (Cordova +AngularJS). Intervenants : 4 RÉALISATIONS - Conception et implémentation de l’API REST pour l’application mobile en utilisant WEB API2, - Conception et développement de toute l’application mobile - Génération des APK, IPA, certificats et clé de Publication & Distribution (Android/iOS), - Tests & Publications de l’application mobile sur testflight, Apple Store et PlayStore, - Participation dans l’automatisation des builds avec Jenkins, - Écriture de documents pour la capitalisation des retours d’expérience, - Rédaction des documents techniques, ENVIRONNEMENT TECHNIQUE .NET 4.5, C#, Web API 2, ASP.NET MVC 5, Cordova, AngularJS, Ionic, TestFlight, CodeFluent, SQL Server, Azure Blob, Azure SQL, Azure Website, SendGrid, GCM, APN, ASP.NET Identity, D3Js, GoogleMap, Jenkins.  Bouygues Telecom Projet : Espace de Vente des boutiques Bouygues Telecom Maintenance corrective et évolutive de l’application Comète : espace de vente utilisé dans le réseau des 550 boutiques Bouygues Telecom. Intervenants : 9 BESOINS L'application permet aux agents de vente d’accompagner le client dans un parcours complet : - acquisition de données, - test d’éligibilité, - sélection d’offres (mobile, téléphone, internet), options, - gestion des formalités administratives (paiement, pièces justificatives, impression de documents). RÉALISATIONS - Réception, Analyse des demandes métiers liées aux parcours client (prospect, client existant, éligibilité, offre mobile, internet) - Participation dans le chiffrage des demandes, en étudiant la faisabilité technique et en les qualifiant en fonction des priorités métiers et des contraintes techniques, - Priorisation des tâches en collaboration avec l’équipe, en fonction des compétences de chacun et des profils techniques, pour affecter les responsabilités de manière optimale, - Proposition technique et validation auprès du client, - Développement et évolution des fonctionnalités avec gestion des évolutions - Livraison et Déploiement sur le serveur de recette, - Gestion des versions et des déploiements via TFS, intégrant des processus de branching et merging pour garantir la stabilité du code, - Maintenance corrective et évolutive, - Mesure et optimisation de performance, ENVIRONNEMENT TECHNIQUE C#, .Net Framework 3.5, ASP.Net MVC3, HTML5/CSS3, JavaScript, JQuery, Ajax, AngularJS, ASMX, Soap UI, CodeFluent, MS SQL Server 2012/2014, T-Sql, Visual Studio 2013/2015, IIS7.5, MS Build, TFS, Mantis.

Projet : Configurateurs Peugeot Citroën Refonte Technique de configurateurs en ligne des véhicules Peugeot/Citroën et extension de nouveaux modules pour la présentation de la gamme (Comparateur véhicules, showroom 3D …) intégrés dans les sites pays. Intervenants : 6 RÉALISATIONS - Étude et analyse des spécifications techniques et fonctionnelles, - Proposition technique et validation auprès du client, - Implémentation des demandes client (de la Conception jusqu'au Développement) - Ajout des différentes configurations nécessaires (IIS, Sources des données, etc) - Configuration de nouveaux Web Services - Implémentation des scripts Sql et procédures stockées - Revue et Refactoring du code - Intégration des maquettes (responsive Design) avec les Vues de site, - Implémentation et exécution des tests unitaires (nUnit), - Tests d'intégrations (SOAP UI), - Livraison et Déploiement sur le serveur de recette, - Intégration continue avec Jenkins, - Préparation de packages pour les livraisons préproduction et production, - Gestion de sources avec SVN : branching, merging, - Maintenance corrective et évolutive, - Mesure et optimisation de performance, - Écriture de documents pour la capitalisation des retours d’expérience, - Rédaction des documents techniques, - Support et formations technique aux nouveaux arrivants. ENVIRONNEMENT TECHNIQUE C#, .Net Framework 3.5, ASP.Net MVC3/4, HTML5/CSS3, JavaScript, JQuery, Ajax, WCF, nUnit, Soap UI, Linq, Entity Framework, MS SQL Server 2008/2012, Oracle, T-Sql, Pl-Sql, Visual Studio 2010/2012, IIS7.5, Jenkins, SVN, Tortoise, Jira, ANTS Performance Profiler, YSlow

Projet : Socialisation de la plateforme VoD et TV de SFR Participation à la conception et au développement de la solution complète qui consiste à l’intégration d'un module de recommandation sociale des vidéos & un module Facebook Connect dans la plateforme VoD & TV de SFR. Intervenants : 5 RÉALISATIONS - Conception et implémentation de l’API REST pour l’application mobile en utilisant WEB API2, - Conception et développement de toute l’application mobile - Génération des APK, IPA, certificats et clé de Publication & Distribution (Android/iOS), - Tests & Publications de l’application mobile sur testflight, Apple Store et PlayStore, - Participation dans l’automatisation des builds avec Jenkins, - Écriture de documents pour la capitalisation des retours d’expérience, - Rédaction des documents techniques. ENVIRONNEMENT TECHNIQUE C#, ASP.net MVC4, Entity Framework (l’approche Code First), LinQ, WCF, JavaScript, jQuery/UI, HTML5, CSS3, Microsoft SQL Server 2012, MongoDB, Neo4j, Windows Azure, Scrum/TeamPulse.