Ayoub MACHKOUR

Projet IPS - ENIB 2025

Portfolio web moderne présentant un système innovant de contrôle de servomoteur basé sur la déformation d'une lame mesurée par jauges de contrainte.

Interface React avec visualisation 3D Three.js, documentation technique interactive et présentation du projet IPS réalisé à l'ENIB.

Fonctionnalités :

• Modèle 3D interactif de la lame
• Architecture système complète
• Documentation technique détaillée

Technologies utilisées :

• React.js – Framework frontend
• Three.js – Visualisation 3D interactive
• Tailwind CSS – Design moderne

Interface Homme-Machine (IHM) pour l'analyse et la visualisation en temps réel de la déformation d'une lame cantilever contrôlée par STM32.

Cette application offre une interface moderne et intuitive pour contrôler et visualiser un système de déformation de lame en temps réel. Elle combine une visualisation 3D interactive avec des graphiques de données temps réel, permettant l'analyse des propriétés mécaniques d'une lame cantilever.

Fonctionnalités Principales :

• Mode Manuel : Contrôle direct du servo moteur avec positionnement précis
• Mode Automatique : Détection automatique de masse avec balance intégrée
• Visualisation 3D : Modèle interactif de la lame avec animation en temps réel
• Graphiques Temps Réel : Surveillance de la tension, force, déformation et masse
• Mode Sombre/Clair : Interface adaptable
• Export de Données : Sauvegarde des mesures au format JSON
• Communication STM32 : Liaison série bidirectionnelle temps réel

Technologies Utilisées :

Frontend :

• React - Framework UI
• Three.js - Rendu 3D
• Chart.js - Graphiques temps réel
• Socket.io-client - Communication temps réel
• Tailwind CSS - Framework CSS

Backend :

• Node.js 18.x - Serveur JavaScript
• Express - Framework web
• Socket.io - WebSockets
• SerialPort - Communication série

Hardware : STM32, Servo Moteur, Capteurs de tension/force, Balance

🔒 Marre de surveiller votre téléphone quand vous le chargez en public ?

Dans le train, à l'aéroport ou à l'hôtel, il suffit d'un instant pour qu'on vous le vole... Avec cette application anti-vol, plus besoin de stresser !

• 🔔 Détection Multi-Modal : Débranchement chargeur, détection de mouvement (accéléromètre)
• 🚨 Alarme Sonore : 6 sons différents (Police, FBI, Hacker, etc.)
• 📸 Capture Photo : Photo automatique avec caméra frontale
• 📍 Localisation GPS : Tracking précis lors de la détection
• 💬 Alertes Telegram : Envoi photo + localisation à un contact
• 🔐 Sécurité PIN : Code à 4 chiffres pour arrêter l'alarme
• 🔒 Verrouillage : Boutons bloqués pendant l'alarme

Protection intelligente : Services de premier plan assurent une protection continue en arrière-plan avec redémarrage automatique.

Conception et développement d'une application de gestion pour un magasin de cordage de raquettes, déployée et utilisée en production quotidiennement depuis décembre 2025 à Brest.

• Architecture full-stack : API REST (Node.js), interface web (React) et base de données PostgreSQL
• Déploiement cloud (Docker, Render), puis migration vers une application desktop autonome (.exe) avec Electron
• Fonctionnalités métier : gestion complète des clients, du stock, des raquettes et des poses de cordage (1500+ opérations), génération de codes-barres, impression de tickets, notifications SMS automatisées
• Dashboard avec statistiques, export de données, sauvegarde automatique et authentification sécurisée (JWT)

"Health is not just about being disease-free, it's a state of complete physical, mental, and social well-being."

Conception complète de l'interface utilisateur et du design system pour HealthyLife, une application mobile de nutrition et bien-être holistique. Projet réalisé sur Figma incluant l'ensemble des maquettes, prototypes interactifs et spécifications techniques.

Interfaces Conçues :

Landing & Onboarding :

• Landing Page : Interface d'accueil avec logo "HEALTHY life" et message holistique
• 3 Pages d'Onboarding : "Start with simple menus", "Eat Healthy", "Track Your Health"
• Système de pagination interactif avec navigation tactile (swipe et clic)
• Formes organiques personnalisées pour chaque page

Home Page (Interface Principale) :

• Dashboard Santé : Visualisation des données nutritionnelles et métriques
• Graphique Calories : Suivi hebdomadaire en barres avec dégradés
• Suivi Nutriments : Graphique circulaire à 3 anneaux (glucides, protéines, lipides)
• Widgets Métriques : Eau, fréquence cardiaque, sommeil
• Liste des Repas : Petit-déjeuner, déjeuner, dîner avec calories
• Section Recettes : Suggestions de plats santé avec rating et temps de préparation
• Barre de Navigation : 5 icônes personnalisées avec bouton Scan central surélevé

Pages Fonctionnelles :

• Page Chatbot : Interface de conversation avec agent IA pour conseils nutritionnels
• Page Détails Recette : Informations complètes (ingrédients, préparation, valeurs nutritionnelles)
• Page Diététiciens : Grille de cartes avec photos, spécialités et expertise
• Profil Diététicien : Détails complets avec boutons "Rendez-vous" et "Discussion"
• Formulaire Contact : 4 champs (nom, sexe, âge, description) avec validation
• Sélection Date : Calendrier interactif pour prise de rendez-vous
• Page Recettes : Liste complète avec affichage détaillé

Design System :

• Palette de Couleurs : Fond #F9FFED, accents #91C788, #3AC7BF, #9BDCFD, #FF9898, #FFD188
• Typographie : Police Poppins avec hiérarchie claire
• Composants : Cartes arrondies, ombres légères, transitions fluides
• Graphiques : Visualisations SVG interactives
• Navigation : Système cohérent avec indicateurs visuels

Spécifications Techniques :

• Format adapté au Samsung Galaxy S25 Ultra
• Design responsive mobile-first
• Navigation tactile optimisée (swipe, tap)
• Animations et transitions fluides
• Accessibilité et hiérarchie visuelle

L'École Nationale d'Ingénieurs de Brest (ENIB), récemment transformée en établissement public à caractère scientifique, culturel et professionnel (EPSCP), rejoindra en 2025 le nouvel Institut National Polytechnique de Bretagne (INP Bretagne) aux côtés de l'ESIAB et de l'IAE. Cette transformation institutionnelle marque une étape importante dans le développement de l'école, visant à élargir son offre académique et à répondre aux standards des établissements d'ingénieurs de haut niveau. Dans ce cadre, l'ENIB enrichit son offre de formation avec l'ouverture de la nouvelle voie de formation FISEA (Formation Initiale sous Statut Apprenti), accréditée par la Commission des Titres d'Ingénieur (CTI), en complément de la formation classique FISE (Formation Initiale sous Statut Étudiant).

La formation FISE offre un parcours classique sous statut étudiant, tandis que FISEA propose un modèle hybride combinant une première année sous statut étudiant et deux années en alternance. Ces deux formations doivent répondre à des exigences strictes en termes de gestion documentaire, notamment pour satisfaire aux audits réguliers de la CTI, qui exige une documentation précise et structurée des programmes pédagogiques, et aux attentes des OPCO (Opérateurs de Compétences), responsables du financement et du suivi des apprentis en entreprise. De plus, les services entreprise, scolarité et relations internationales de l'école nécessitent également des documents pédagogiques adaptés pour des usages spécifiques, tels que les mobilités étudiantes et les échanges académiques.

Pour répondre à ces besoins croissants, un système automatisé a été conçu, permettant de générer des documents pédagogiques sous forme de PDF personnalisés. Ces documents peuvent être produits pour l'ensemble d'une formation ou pour un étudiant spécifique, en fonction des cours suivis et des besoins identifiés par les différents services. Cette solution repose sur Typst, une alternative moderne et plus performante que LaTeX, offrant une génération rapide des documents, une maintenance simplifiée des templates et une réduction significative des temps de compilation.

Plusieurs outils ont été développés pour enrichir ce système :

• Un contrôle des fichiers Markdown via le terminal, permettant de gérer les données pédagogiques en un seul lot, garantissant la cohérence des informations et réduisant les risques d'erreur lors des mises à jour.
• Une intégration complète avec GitLab, où les enseignants peuvent directement modifier les fichiers Markdown des cours. Ces modifications sont ensuite validées par un ingénieur pédagogique avant d'être intégrées, assurant ainsi la conformité des données.
• Une interface web intuitive, développée avec Flask, destinée principalement au personnel administratif. Cette interface permet de générer, supprimer et visualiser l'état des fichiers générés (JSON, Typst, PDF) pour les deux formations, FISE et FISEA. Elle offre également la possibilité de personnaliser le document, notamment la page de garde, l'organisation des sections, et d'autres paramètres configurables. Enfin, l'interface permet de déclencher la génération complète des documents pédagogiques, ou de générer individuellement une catégorie spécifique de fichiers (JSON, Typst ou PDF), le tout sans nécessiter de compétences techniques.

Ce projet a permis de centraliser toutes les données pédagogiques dans des fichiers JSON et Markdown, garantissant une source unique de vérité. Cette centralisation élimine les incohérences et facilite une synchronisation parfaite des données entre les différents services de l'école. Les processus automatisés répondent désormais de manière efficace aux attentes des acteurs institutionnels et pédagogiques, tout en offrant une solution évolutive pour l'intégration future de nouvelles formations.

Application de peinture professionnelle développée avec PyQt5, offrant des outils de dessin avancés, des opérations de groupe sophistiquées et des interactions UI intelligentes. Ce projet exploite le Graphics View Framework pour un rendu optimisé des objets 2D.

Outils de dessin :

• Crayon : Dessin libre avec trajectoires fluides
• Gomme : Suppression précise d'objets sélectionnés
• Formes géométriques : Lignes, rectangles, ellipses, polygones
• Texte intelligent : Dialogue avancé avec police, taille, couleur
• Sélection avancée : Manipulation et groupement d'objets

Opérations de groupe avancées :

• Multi-sélection : Ctrl + Clic pour sélection multiple
• Déplacement groupé : Tous les éléments bougent ensemble
• Copier/Coller de groupe : Positions relatives préservées
• Suppression en lot : Via la touche Suppr

Fonctionnalités avancées : L'interface propose des styles de ligne variés (normal, gras, pointillé, tirets), des couleurs personnalisables, des motifs de remplissage multiples avec aperçu temps réel. La gestion des fichiers supporte le format JSON pour la sauvegarde complète du projet et l'export en images (PNG, JPEG, BMP).

Architecture MVC : Le projet implémente une séparation claire entre le modèle, la vue et le contrôleur, garantissant une maintenance aisée et une extensibilité optimale.

Application graphique Python sophistiquée pour générer, visualiser et contrôler des signaux harmoniques en temps réel. Ce projet implémente rigoureusement les patrons de conception Observer et MVC avec une interface TkInter moderne et responsive.

Fonctionnalités principales :

• Deux générateurs indépendants : X et Y avec contrôles séparés (fréquence, magnitude, phase, harmoniques)
• Visualisation temps réel : Graphiques instantanés des signaux générés
• Mode X-Y : Analyse des relations complexes entre signaux
• Persistance SQLite : Sauvegarde/chargement automatique des configurations
• Interface adaptative : Redimensionnement automatique et ergonomie optimisée

Formule mathématique implémentée :
y(t) = Σ(h=1→H) (M/h) * sin(2π * f * h * t - φ)
Où M = Magnitude, f = Fréquence, φ = Phase, H = Harmoniques

Architecture logicielle :

• Pattern Observer : Generator (Subject) → Screen (Observer) pour mise à jour automatique
• Pattern MVC : Séparation claire entre modèles (calculs), vues (interface) et contrôleurs (événements)
• Base SQLite : Tables 'signals' et 'samples' pour persistance complète

Ce projet démontre une maîtrise avancée des patterns de conception, du calcul mathématique temps réel et de l'interface utilisateur moderne avec Python.

Dans le cadre de notre module de Réalité Virtuelle à l'ENIB, nous avons été chargés de développer un musée virtuel en utilisant BabylonJS, une puissante bibliothèque JavaScript open-source dédiée à la création d'applications 3D interactives directement dans les navigateurs web. Notre musée s'inscrit dans l'étude de la Belle Époque, de 1880 à 1914, et exploite les capacités avancées de BabylonJS pour orchestrer un espace muséal de 30m x 30m avec des fonctionnalités de réalité virtuelle enrichies.

Le musée comprend un hall principal, trois salles et une mezzanine accessible via un escalier. Les salles accueillent 8 à 10 tableaux, tandis que le hall et la mezzanine abritent des statues animées, toutes adaptées au thème de la Belle Époque. Les visiteurs peuvent interagir avec les œuvres d'art et se déplacer dans le musée grâce à des téléporteurs, créant ainsi une expérience immersive unique. Lorsqu'un visiteur s'approche d'un tableau, son nom apparaît au-dessus et une description en dessous. Si le visiteur s'éloigne, le nom et la description disparaissent. De plus, les portes s'ouvrent lorsque le visiteur s'approche et se ferment lorsqu'il s'éloigne. Les téléporteurs, sous forme de sphères noires placées à divers endroits du musée, deviennent rouges lorsque le visiteur les regarde. En cliquant sur le bouton gauche de la souris, le visiteur est téléporté à la position de la sphère.

J'ai été responsable de la configuration des éléments dans le musée, des choix de matériaux, ainsi que des mécanismes d'interaction, offrant une expérience éducative immersive. J'ai également traité les défis rencontrés et les solutions adoptées pour surmonter ces obstacles.

Dans le cadre du module Intelligence Artificielle et Simulation à l'ENIB, j'ai développé un système d'apprentissage automatique pour jouer au jeu Mu Torere, un jeu de stratégie traditionnel des Maoris de Nouvelle-Zélande. Le projet utilise l'apprentissage par renforcement pour permettre au programme d'apprendre et de maîtriser le jeu en s'entraînant contre lui-même.

Le Mu Torere se joue avec quatre pions par joueur sur un plateau à neuf emplacements. Les algorithmes de renforcement utilisés incluent Q-learning et Sarsa. Chaque agent perçoit l'état du plateau et choisit parmi neuf actions possibles. Les agents reçoivent un renforcement positif pour une victoire et un renforcement négatif pour une défaite ou un coup illégal, ce qui les guide dans l'apprentissage des règles et des stratégies gagnantes.

J'ai mené le développement des agents intelligents et l'intégration des mécanismes d'apprentissage par renforcement. Les principaux défis étaient la modélisation précise des règles du jeu et l'ajustement des paramètres de l'algorithme pour optimiser l'apprentissage. Ce projet a démontré la puissance de l'apprentissage par renforcement dans les jeux de stratégie.

Dans le cadre du module Développement Web 2 à l'École Polytechnique, nous avons été chargés de développer un site web en utilisant ReactJS, et moi j'ai choisi de créer une bibliothèque en ligne.

Cette application permet aux utilisateurs de gérer leur propre collection de livres. J'ai implémenté des fonctionnalités de base telles que l'affichage des couvertures, des titres, des auteurs et des prix des livres.

Les principales fonctionnalités incluent :

• Affichage des couvertures, des titres, des auteurs et des prix des livres.
• Ajout et suppression de livres au panier avec un compteur dynamique.
• Gestion du panier avec possibilité d'augmenter ou de diminuer le nombre de copies de chaque livre, ainsi qu'un bouton pour supprimer des articles.
• Calcul automatique du montant total du panier.
• Récapitulatif des livres achetés avec un bouton "Passer à la Commande" pour accéder directement à la page de paiement.

Réalisé dans le cadre du module Technologie Web à l'École Polytechnique, ce projet consistait à créer un site web e-commerce en utilisant HTML, CSS, JavaScript, et PHP. Le site comprend une partie client pour la navigation et l'achat de produits, ainsi qu'une partie administrateur pour la gestion des produits, des commandes et des utilisateurs. Ce projet a permis de mettre en pratique diverses compétences en développement web, notamment la création de pages dynamiques, la gestion de bases de données et l'implémentation de fonctionnalités de sécurité.

Cette application développée en Java Swing permet de gérer les chauffeurs, offrant des fonctionnalités de création, visualisation, modification et suppression d'enregistrements. L'application dispose d'une interface graphique conviviale pour la gestion des opérations, ce qui permet de faciliter l'organisation et la manipulation des informations sur les chauffeurs.

Ce projet est une API REST développée en Spring Boot pour la gestion d'une bibliothèque vidéo. L'application permet d'effectuer des opérations CRUD (Créer, Lire, Mettre à jour, Supprimer) sur les acteurs, catégories et films de la base de données.

L'API repose sur Spring Data JPA pour gérer les données, avec une base de données H2 en mémoire pour un environnement de test. Chaque entité (acteurs, catégories, films) dispose de ses propres endpoints pour la gestion des enregistrements, accessibles via des requêtes HTTP.

Le projet intègre également Swagger pour la documentation de l'API et pour faciliter les tests des endpoints. Des tests unitaires sont aussi inclus dans le projet, utilisant JUnit pour garantir la fiabilité des différentes fonctionnalités.

En plus de la gestion de la bibliothèque vidéo, le projet inclut une console H2 , permettant aux utilisateurs de visualiser et manipuler les données stockées dans la base.

Dans le cadre du module de Réalité Virtuelle à l'ENIB, nous avons été chargés de développer un jeu vidéo utilisant Unity, et j'ai choisi de réaliser le célèbre jeu Flappy Bird. Ce projet représente ma première expérience avec Unity et le langage C#. Tous les graphismes ont été générés avec DALL-E.

Le développement du jeu a inclus plusieurs étapes clés :

Ajout de graphismes en tant que sprites : Les éléments visuels du jeu, tels que l'oiseau, les tuyaux et l'arrière-plan, ont été importés en tant que sprites dans Unity. DALL-E a été utilisé pour générer ces graphismes de manière originale et attrayante.

Installation de composants pour la gestion de la physique et des collisions : Les composants de physique dans Unity ont été configurés pour gérer le mouvement de l'oiseau et les collisions avec les tuyaux. Cela inclut l'ajout de composants Rigidbody2D et Collider2D aux objets pertinents.

Génération dynamique des tuyaux : Un système de génération procédurale pour les tuyaux a été implémenté, assurant qu'ils apparaissent à intervalles réguliers avec des positions verticales aléatoires, ajoutant un défi constant pour le joueur.

Mise en place du système de score : Un système de score affiché en haut à gauche de l'écran a été développé pour suivre les points du joueur, qui augmentent à chaque passage réussi entre les tuyaux.

Optimisation des performances : Afin de garantir une expérience de jeu fluide, les éléments du jeu ont été optimisés en minimisant les calculs inutiles et en gérant efficacement les objets de jeu actifs et inactifs.

Ce projet a permis de maîtriser les bases du développement de jeux avec Unity et de comprendre les concepts essentiels de la physique des jeux, de la gestion des collisions et de l'interface utilisateur. Une expérience précieuse dans la génération dynamique de contenu et l'optimisation des performances a également été acquise pour assurer une expérience de jeu agréable.

Dans le cadre du projet Fikra de 4ème année à l'École Polytechnique d'Agadir, nous devions réaliser un projet innovant en étudiant le marché, la cible, les types et niveaux d'innovation, le benchmark autour du produit et le business model. Mon groupe a choisi de créer une application de covoiturage appelée ByBike, une application de partage de motos similaire à Indriver.

ByBike permet aux utilisateurs de réserver facilement une moto disponible à proximité pour leurs trajets, offrant ainsi une alternative pratique et rapide aux autres modes de transport. Le projet s'ancre dans la volonté de répondre à des défis contemporains de mobilité urbaine, proposant une solution agile et durable face à l'urbanisation croissante et aux problèmes de congestion des villes. En offrant une alternative de transport individuel flexible, notre projet ambitionne de désengorger le trafic et de réduire l'empreinte carbone.

J'étais responsable de la création du logo et de toutes les maquettes de l'application, y compris les parties client et chauffeur. Après la phase de conception, nous avons procédé au développement en utilisant le langage Dart, Flutter pour le front-end, et Firebase pour gérer l'authentification. J'ai également codé plusieurs interfaces de l'application.

Ce projet a été réalisé lors d'un stage de 3 mois, axé sur la configuration d'une solution de gestion et de sécurité des réseaux en utilisant pfSense. L'objectif principal était de sécuriser les infrastructures réseau tout en optimisant la gestion du trafic et des utilisateurs.

Parmi les technologies implémentées figurent :

• Squid et SquidGuard : Configuration de Squid pour le filtrage du contenu et gestion des règles de filtrage avec SquidGuard.
• Snort IDS/IPS : Mise en place d'un système de détection et de prévention des intrusions pour sécuriser le réseau.
• pfBlockerNG : Utilisation de pfBlockerNG pour bloquer des catégories de sites non autorisées, renforçant ainsi la sécurité.
• Portail Captif : Mise en place d'un portail captif pour authentifier les utilisateurs avant qu'ils puissent accéder à Internet.

Le stage m'a permis de développer des compétences pratiques dans la configuration et la sécurisation des réseaux, ainsi que dans l'utilisation avancée de pfSense pour répondre aux besoins de l'entreprise.