Travaux sélectionnés

Des projets conçus pour des problèmes réels.

Une sélection de produits d'entreprise, de projets personnels et d'expérimentations axés sur l'architecture frontend, les interfaces complexes et les applications React maintenables.

Projets professionnels et personnelsAxé sur React et TypeScript

Entreprise

Projets d'entreprise et professionnels

Produits en production et applications professionnelles développés pour des besoins opérationnels, des parcours complexes et une maintenance durable.

Centreon Mapv1.0

Ingénieur Frontend

Cartes de supervision interactives pour visualiser l'état des infrastructures et des services.

Projet d'entreprise chez Centreon consacré à la modernisation d'une interface de supervision à grande échelle avec une architecture React moderne.

Contributions principales

  • Migré le visualiseur et l'éditeur de cartes de Backbone.js vers React et TypeScript, sur un périmètre de plus de 700 fichiers, tout en préservant les règles métier et les intégrations backend existantes.
  • Développé et intégré draw.io comme moteur de l'éditeur graphique de Centreon MAP, permettant aux utilisateurs de créer et de modifier interactivement leurs cartes de supervision.
  • Refondu les principales pages du module et conçu une architecture de modales réutilisables avec protection contre la perte de modifications non enregistrées.
  • Développé des fonctionnalités interactives de configuration, de navigation et de supervision avec React Router, Visx et Leaflet.js.
  • React
  • TypeScript
  • Material UI
  • TanStack Query
  • Jotai
  • Rspack
  • Cypress
  • draw.io
  • React Router
  • Visx
  • Leaflet.js
Centreon BAMv1.0

Ingénieur Frontend

Interfaces de supervision et de simulation des activités métier pour les utilisateurs d'entreprise.

Projet d'entreprise chez Centreon consacré à la simulation et à la configuration des activités métier, des indicateurs et de leurs relations hiérarchiques.

Contributions principales

  • Développé un panneau de simulation permettant de prévisualiser les changements de configuration avant leur application.
  • Conçu une représentation graphique et interactive des activités métier sous forme d'arbre avec Visx, facilitant l'exploration des relations hiérarchiques et la visualisation des indicateurs associés.
  • Développé la liste des indicateurs, un workflow de création rapide et l'affichage d'icônes configurables.
  • Créé un composant réutilisable de réinitialisation des champs, intégré à Formik.
  • Restructuré la gestion d'état avec Jotai afin de séparer les modifications temporaires de simulation des données persistantes.
  • React
  • TypeScript
  • Visx
  • Jotai
  • Formik
  • Yup
  • REST APIs
Gestion des équipements de transportv1.0

Stagiaire développeur Full Stack

Application interne de gestion des équipements de transport, des inspections et du suivi opérationnel.

Application développée lors de mon stage de fin d'études chez APM Terminals Tanger pour centraliser la gestion, les inspections et le suivi des équipements de transport.

Contributions principales

  • Développement des interfaces de gestion et de suivi des équipements
  • Mise en place des parcours d'inspection et des opérations
  • Développement backend avec ASP.NET MVC et C#
  • Utilisation de JavaScript et SQL pour le comportement et les données
  • Intégration d'API REST entre les services
  • Contribution à l'ensemble du cycle de développement
  • ASP.NET MVC
  • C#
  • JavaScript
  • HTML
  • CSS
  • SQL
  • REST APIs

Personnel

Projets personnels

Projets indépendants conçus et développés pour explorer des idées produit, l'architecture et des expériences utilisateur complètes.

Portfolio développeurv2.0

Designer et développeur Frontend

Portfolio responsive présentant mon expérience, mes projets et mon parcours technique.

Conception et développement d'un portfolio bilingue et responsive avec présentation des projets, formulaire de contact sécurisé et envoi d'e-mails.

Contributions principales

  • Conçu et développé une interface bilingue et responsive pour présenter les projets, l'expérience et les compétences techniques.
  • Créé un formulaire de contact sécurisé avec validation Zod côté serveur, protection anti-spam et envoi d'e-mails avec Resend.
  • Mis en place des composants réutilisables, une navigation accessible, des mises en page responsives et les métadonnées SEO.
  • Next.js 16
  • React 19
  • TypeScript
  • Zod
  • Resend
  • REST API
  • Accessibility
  • SEO

Apprentissage

Pet projects et projets d'apprentissage

Expérimentations et projets guidés réalisés pour pratiquer de nouvelles technologies, revoir les fondamentaux et apprendre en développant.

Clone d'application de réseau socialv1.0

Développeur React Native · 2025

Application sociale mobile réalisée à partir d'un tutoriel pour explorer l'écosystème React Native.

Application développée en suivant un tutoriel YouTube pour explorer l'authentification mobile, la logique backend-as-a-service et les interfaces réutilisables avec Expo et React Native.

Contributions principales

  • Mise en place des parcours d'authentification avec Clerk
  • Utilisation de Convex pour la logique backend et la persistance des données
  • Création d'interfaces réutilisables avec Expo et les composants React Native
  • Exploration de l'architecture et de la navigation d'une application mobile
  • React Native
  • Expo
  • Clerk
  • Convex
Clone de Flappy Birdv1.0

Développeur Frontend · 2025

Jeu léger pour navigateur reproduisant les mécaniques classiques de Flappy Bird.

Projet réalisé pour revisiter les fondamentaux du web et les boucles de jeu dans le navigateur avec une architecture modulaire en HTML, CSS et JavaScript.

Contributions principales

  • Mise en place de la détection des collisions et du suivi du score
  • Création du défilement parallaxe et des animations de sprites
  • Développement de la boucle de jeu avec du JavaScript modulaire
  • Révision du rendu navigateur et des fondamentaux du web
  • HTML
  • CSS
  • JavaScript