Stage chez Api Restauration et cursus BUT MMI — design system, refonte d'interfaces, full-stack, réalité virtuelle et DevSecOps.
Formation
BUT MMI · Dev Web
Entreprise
Api Restauration
Livrés
4 projets stage
Universitaires
4 projets BUT
01
01Contexte du stage
Api Restauration
Api Restauration est une entreprise familiale fondée en 1956,
devenue l'un des acteurs majeurs de la restauration collective en France. Portée par une
croissance interne moyenne de 10 % par an depuis plus de vingt ans,
elle se distingue par un engagement fort en faveur des
produits de saison et d'origine locale,
au service de repas responsables et de qualité.
J'ai intégré son pôle informatique — plus de 100 collaborateurs —
et plus particulièrement l'équipe UI/UX, au sein de laquelle
j'ai contribué à plusieurs projets d'interface et de développement menés en parallèle.
Chiffre d'affaires 2025
1,25 Md€
Repas / jour
1 260 000
Collaborateurs (France)
11 200
Collaborateurs (international)
1 550
02
02Missions & projets réalisés
Quatre projets réalisés durant le stage.
03
03Projets · BUT MMI & Personnel
Projets réalisés au cours de l'année universitaire.
04
04Compétences acquises · Référentiel MMI
Compétences
C4
Développer
pour le web et les médias numériques
Vue.js + TypeScript sur deux projets d'envergure : la refonte complète de Cantine de saison (SPA, Supabase, SCSS/BEM, architecture scalable) et le Design System Zest (monorepo pnpm, tokens multi-thèmes, composants Vue 3 documentés dans Storybook). JavaScript vanilla pour la carte Leaflet sur Webflow (géolocalisation, filtres, données pilotées par CMS). HTML/CSS/JS responsive en intégration pure pour le Live Passage de Témoin. En formation : Symfony/PHP (Polypdf, Cineverse), API GraphQL découplée, C#/Unity en VR (Nexus) et Nuxt + DevSecOps (Cipher) — 8 projets couvrant frontend, backend, 3D et sécurité.
↳8 projets · du Vue.js au C# en passant par le PHP
C5
Entreprendre
dans le secteur du numérique
Conduite autonome de projets de A à Z : conception Figma → développement → mise en ligne sans supervision directe sur le Passage de Témoin. Collaboration inter-services avec le pôle Communication pour adapter la charte graphique, et avec les équipes UX/UI pour le Design System. Innovation fonctionnelle : gamification anti-gaspi intégrée dans Cantine de saison, PoC Leaflet sur Webflow là où aucune solution native n'existait. Adoption des pratiques professionnelles : Gitflow, revues de code croisées, réunions d'architecture sur Zest. En formation : modèle freemium + Stripe (Polypdf), pipeline DevSecOps complète from scratch (Cipher).
Ce portfolio rassemble huit projets menés entre stage professionnel et cursus BUT — des
réalisations concrètes qui couvrent un spectre technique large et une vraie progression.
Au stage, j'ai tenu plusieurs chantiers simultanément : concevoir
Cantine de saison de A à Z (Figma → Vue.js → Supabase),
co-construire le Design System Zest en monorepo avec tokens
et Storybook, implémenter une carte Leaflet là où Webflow
n'offrait rien nativement, et mettre en ligne seul un site événementiel pour
12 000 collaborateurs. En formation, j'ai élargi le spectre :
backend Symfony, API GraphQL découplée, jeu en réalité virtuelle
sous Unity et pipeline DevSecOps complète avec Cipher.
Ce que j'en retiens : une méthode de travail absorbée par immersion — Gitflow, revues de code,
réunions d'architecture —, une aisance technique qui s'est élargie à chaque projet, et la
certitude de vouloir continuer dans le développement front de
qualité et l'ingénierie logicielle.
Technique
Architecture monorepo, tokens multi-thèmes et composants Vue 3 documentés dans Storybook — Zest m'a donné une vision concrète de ce qu'est un Design System en production.
Méthode
Gitflow, revues de code croisées, réunions d'architecture : des pratiques professionnelles absorbées par immersion, sur quatre projets de stage menés en parallèle.
Polyvalence
De la conception Figma à la mise en ligne d'un live pour 12 000 personnes, en passant par la VR et le DevSecOps — huit projets, un spectre technique délibérément large.
projet 01 / 04
// Projet 01
DévelopperEntreprendre
Refonte globale de l'application « Cantine de saison »
Vue 3TypeScriptFigmaSupabaseSCSSBEM
« Cantine de saison » est l'application interne utilisée par tous les employés de l'entreprise pour gérer leurs repas hebdomadaires. L'outil gère deux grands types de profils :
Côté Utilisateurs (Convives) : Commande de plats pour la semaine suivante, notation, partage ou récupération de repas avec des collègues, et accès à l'historique.
Côté Administration (Cantiniers) : Gestion des menus par date, anticipation des quantités à commander, validation des passages au self, gestion des profils utilisateurs, commande pour des invités et accès aux statistiques.
L'ancienne version souffrait d'une interface vieillissante, d'un manque de fluidité et de lacunes en matière d'accessibilité. J'ai donc été chargé de reprendre ce projet de A à Z : un mois et demi dédié à la conception (UI/UX), suivi d'un mois de développement technique.
La première étape consistait à repenser totalement l'expérience utilisateur et l'interface via Figma, tout en respectant des contraintes strictes :
Appropriation du Design System
J'ai dû concevoir l'interface en utilisant le Design System de l'entreprise, ce qui impliquait de composer avec des couleurs et des typographies imposées pour garantir la cohérence de marque.
Contrainte visuelle majeure
Les menus changeant constamment, il était impossible d'utiliser des photos de nourriture. J'ai dû trouver des solutions graphiques alternatives pour rendre une application de restauration appétissante et intuitive sans images de plats.
Stratégie de Gamification
Pour encourager des comportements écoresponsables et lutter contre le gaspillage alimentaire, j'ai imaginé et intégré un système ludique (points, badges et grades) récompensant les bonnes pratiques des employés.
Maîtrise avancée de Figma
Cette phase m'a permis de pousser mes compétences en UI/UX en créant des prototypes avancés (sliders horizontaux et verticaux) et en gérant une bibliothèque complexe de composants, variantes, propriétés et variables.
Phase 2 — Architecture Technique et Développement
Une fois la maquette validée, j'ai entamé la phase de développement avec pour objectif principal la scalabilité et la maintenabilité du code :
Frontend (Vue.js & TypeScript)
J'ai opté pour Vue.js afin de créer une SPA (Single Page Application) garantissant une navigation extrêmement rapide et fluide. L'utilisation de TypeScript a permis de sécuriser le code (typage strict) et d'éviter les erreurs silencieuses fréquentes en JavaScript.
Backend & Base de données (Supabase)
J'ai choisi Supabase, une technologie moderne prête à l'emploi (BaaS), parfaite pour gérer facilement l'authentification et l'infrastructure de la base de données (commandes, notes, gestion dynamique des dates limites de commande). J'ai également généré des données fictives réalistes via Faker pour les tests.
Intégration (SCSS & BEM)
En prévision de ma future participation au Design System technique de l'entreprise, j'ai utilisé SCSS couplé à la convention de nommage BEM (Block Element Modifier). Cela garantit un code CSS structuré, imbriqué intelligemment et lisible par toute l'équipe.
// Développement — page commander
// Interface Supabase — schéma de la base de données
Défis rencontrés et Adaptabilité
Ce projet m'a confronté à des défis concrets qui ont mis à l'épreuve ma capacité à m'adapter :
Évolution du périmètre (Scope creep)
Initialement pensé comme une application de quatre pages, le projet s'est révélé beaucoup plus dense en raison de la complexité de la partie administration. Pour absorber cette croissance de pages, j'ai dû pivoter ergonomiquement, remplaçant le « Header » prévu par une « Navbar » latérale, beaucoup plus scalable.
Industrialisation du code
L'application contenant de très nombreux tableaux de données, j'ai conçu un « super composant Tableau » dynamique et réutilisable partout, évitant ainsi la duplication de code.
Approche Mobile-First
Tout le développement a été pensé en « mobile-first » pour répondre aux usages réels des employés. Le projet est actuellement en pause au profit de missions plus urgentes, mais les fondations techniques sont robustes et prêtes pour la suite.
Validation des Compétences BUT MMI
Ce projet justifie l'acquisition des deux compétences majeures grâce à la prise en charge complète du cycle de vie du produit :
Entreprendre dans le secteur du numérique
La phase de conception démontre ma capacité à analyser un besoin utilisateur complexe et à proposer des solutions innovantes (gamification contre le gaspillage alimentaire, contournement de l'absence de photos). L'utilisation experte de Figma et le respect d'un Design System prouvent ma maturité en matière de conception de produits numériques.
Développer pour le web et les médias numériques
La phase de réalisation met en évidence ma capacité à concevoir une architecture logicielle moderne et sécurisée (Vue.js, TypeScript, Supabase). Les choix structurels (super composants, convention BEM, adaptation de la navigation face à l'augmentation du nombre de pages) illustrent ma rigueur technique en matière de maintenabilité et de scalabilité.
// Projet 02
DévelopperEntreprendre
Implémentation d'une carte interactive sur Webflow
LeafletWebflow CMSJavaScript
Dans une démarche de modernisation, l'entreprise a décidé de migrer progressivement l'ensemble de ses sites web du CMS WordPress vers Webflow. Contrairement à WordPress qui repose beaucoup sur des plugins externes (ce qui pose souvent des problèmes de sécurité, de lenteur et de mises à jour complexes), Webflow est une plateforme intégrée qui génère un code visuel très propre, gère nativement l'hébergement et offre une interface beaucoup plus stable et maintenable sur le long terme. Dans le cadre de la refonte du site vitrine, ma mission principale a été d'étudier et d'implémenter une nouvelle fonctionnalité : une carte interactive permettant aux utilisateurs de trouver les agences les plus proches de chez eux.
// Preuve de Concept — carte interactive des agences
Stack technique
Leaflet
Bibliothèque JS open source — cartographie interactive
Webflow CMS
Base de données interne — collections d'agences
JavaScript
Architecture MVC — logique, filtres et interactions
Fonctionnalités
L'implémentation de code sur Webflow requiert une grande rigueur, car ce n'est pas un framework front-end traditionnel (comme Vue ou React). Pour garantir un code propre et maintenable, j'ai fait des choix architecturaux que j'ai présentés à mes collègues :
Séparation des responsabilités
J'ai structuré mon code JavaScript de manière à séparer strictement la Vue (l'affichage de la carte), la Donnée (les informations des agences) et la Logique (le « cerveau » qui gère les filtres et recherches). Cela permet d'avoir un système robuste qui ne cassera pas facilement lors des futures mises à jour.
Utilisation du CMS Webflow
Le terme CMS dans Webflow désigne un système de base de données interne structuré sous forme de collections, très différent d'un CMS global comme WordPress. J'ai utilisé cet outil pour stocker les données des agences et de leurs secteurs d'activités. Ainsi, à l'avenir, n'importe quel collaborateur non-technique pourra ajouter, modifier ou supprimer une agence dans l'interface de Webflow, et la carte interactive se mettra à jour automatiquement sans avoir à toucher une seule ligne de code.
// Les agences de test dans le CMS Webflow
Preuve de Concept (PoC) — Fonctionnalités
Afin de prouver la faisabilité technique du projet, j'ai développé une première version fonctionnelle (Preuve de Concept) en utilisant Leaflet, une bibliothèque JavaScript open source spécialisée dans la cartographie. Cette version intègre les fonctionnalités clés :
Affichage dynamique des agences
Les agences sont chargées depuis les collections du CMS Webflow et affichées dynamiquement sur la carte sous forme de marqueurs interactifs.
Recherche par ville ou code postal
Système de recherche permettant à l'utilisateur de localiser rapidement les agences par nom de ville ou code postal.
Géolocalisation
Bouton de géolocalisation pour détecter la position actuelle de l'utilisateur et afficher l'agence la plus proche.
Filtres par secteur d'activité
Filtres de recherche par secteur d'activité (Scolaire, crèche, entreprise, hôpital, clinique, etc.). Le design final n'est pas encore appliqué, l'objectif actuel étant de valider la logique métier et la fluidité des interactions.
Audit Technologique & Aide à la Décision
Le développement de la version finale avec son design abouti démarrera une fois le choix de la technologie cartographique définitive validé par le directeur marketing de l'entreprise. Je lui présenterai prochainement un comparatif détaillé entre deux solutions :
01
Leaflet
Solution open source et totalement gratuite, mais au rendu visuel moins moderne, avec des performances standards et une personnalisation limitée.
02
Mapbox
Solution beaucoup plus moderne, performante et hautement personnalisable visuellement, mais dont le modèle économique devient payant au-delà d'un certain nombre de visites mensuelles.
Validation des Compétences BUT MMI
Ce projet de stage me permet de justifier la validation de mes deux compétences majeures :
Développer pour le web et les médias numériques
J'ai géré l'intégration et l'interface d'un service externe de cartographie (Leaflet) via JavaScript. J'ai également prouvé ma capacité à structurer des bases de données de manière logique avec les collections du CMS Webflow, tout en concevant une architecture de code robuste et maintenable, en isolant le traitement des données de l'interface utilisateur.
Entreprendre dans le secteur du numérique
J'ai mené une conduite de projet intégrant des enjeux économiques et stratégiques. Ma démarche d'audit comparatif (Leaflet vs Mapbox) et la présentation de ces choix techniques à la Direction Marketing prouvent ma capacité à employer des notions de gestion et d'économie pour conseiller l'entreprise dans sa stratégie numérique. La réflexion sur l'autonomie future des collaborateurs (grâce au CMS Webflow) démontre également une vision à long terme du produit.
// Projet 03
DévelopperEntreprendre
Zest — Conception et développement d'un Design System
Vue 3TypeScriptSCSSStorybookpnpm workspace
Un « Design System » est un référentiel commun qui regroupe toutes les règles visuelles d'une entreprise (couleurs, typographies, espacements) et ses composants interactifs (boutons, formulaires, menus). Son but est double : garantir une cohérence visuelle absolue sur tous les sites de l'entreprise et faire gagner un temps précieux aux équipes, qui n'ont plus à recréer ces éléments à chaque nouveau projet. La mission qui m'a été confiée, en binôme avec un collègue développeur, est de créer la version « code » de ce Design System existant sur Figma — une bibliothèque prête à l'emploi pour tous les développeurs de l'entreprise.
// Maquette Figma — palette de tokens et thèmes
Stack technique
Vue 3
Framework JS — composants interactifs
TypeScript
Typage strict & autocomplétion
SCSS
Styles dynamiques — thèmes & tokens
pnpm workspace
Architecture monorepo — sous-paquets
Storybook
Documentation vivante & playground
GitLab / Gitflow
Versioning & revues de code (MR)
Fonctionnalités
Créer un outil qui sera utilisé par d'autres développeurs demande une grande rigueur. J'ai activement participé aux réunions d'architecture logicielle, car le moindre mauvais choix technique ici aura de lourdes conséquences sur tous les futurs projets de l'entreprise. L'enjeu principal était de garantir une excellente DX (Developer Experience) — faire en sorte que l'outil soit facile, intuitif et robuste à utiliser pour mes collègues. Pour cela, nous avons sélectionné des technologies modernes et performantes :
Vue.js (Vue 3)
Le framework JavaScript utilisé pour créer les composants interactifs.
TypeScript
Une surcouche à JavaScript qui ajoute un typage strict et permet l'autocomplétion — le code suggère automatiquement les bonnes options au développeur, évitant ainsi les erreurs.
SCSS et variables CSS
Pour coder et gérer de manière dynamique toutes les règles de style.
pnpm workspace
Un outil permettant de gérer efficacement un projet divisé en plusieurs sous-paquets distincts (monorepo).
// Maquette Figma — composant Button, variantes et états
Structure du Projet
Pour rendre le projet maintenable et évolutif (scalable), nous l'avons découpé en trois parties distinctes :
Le package « Tokens » (Partie indépendante)
Les tokens sont les plus petites unités du design (les codes couleurs exacts, les tailles de police, les arrondis). Ce paquet est volontairement indépendant pour qu'un projet externe puisse n'importer que les couleurs de l'entreprise sans s'encombrer du reste. C'est la partie sur laquelle je travaille actuellement. Elle intègre une forte complexité car elle doit gérer deux thèmes distincts (interne et externe), chacun décliné en mode clair (Light) et sombre (Dark).
La bibliothèque UI (Interface Utilisateur)
C'est le catalogue des composants Vue 3 qui utilisent les tokens. La complexité de développement y est élevée. Par exemple, un simple composant « Bouton » doit être codé pour gérer des dizaines d'états différents : tailles (petit, moyen, grand), variantes (avec ou sans icône, destructif/rouge, par défaut), et interactions (survolé par la souris, désactivé, etc.).
Storybook
Un outil qui sert de documentation vivante. Il génère une interface web (un « playground ») où les développeurs peuvent visualiser les composants isolés, lire leur documentation et tester leurs différents états en direct avant de les intégrer dans leurs projets.
// Storybook — documentation vivante des composants
Méthodologie et Travail Collaboratif
Ce projet me permet de m'immerger totalement dans les standards du travail collaboratif en entreprise. Nous utilisons GitLab avec la méthode Gitflow pour gérer les versions de notre code. Concrètement, le développement fonctionne par « Merge Requests » : mon code est relu, analysé et validé par mon collègue, et inversement, j'examine et valide également son code (peer review) avant toute fusion avec la branche principale. Cette revue de code croisée garantit une qualité logicielle irréprochable tout en favorisant le partage de connaissances.
Validation des Compétences BUT MMI
Ce projet d'envergure valide de manière très concrète mes deux compétences clés :
Développer pour le web et les médias numériques
Je démontre une maîtrise avancée de l'intégration web et de l'ingénierie logicielle front-end (Vue 3, TypeScript, SCSS). La création d'une architecture en workspace et la gestion de la complexité algorithmique des composants (gestion des états, des thèmes et du Dark Mode) prouvent ma capacité à développer des outils web robustes, scalables et destinés à être interfacés avec de multiples projets consommateurs.
Entreprendre dans le secteur du numérique
Travailler sur un Design System est une démarche hautement stratégique pour une entreprise, visant à optimiser les coûts, gagner du temps de production et unifier la communication numérique. De plus, ma participation active aux réunions d'architecture, ma gestion rigoureuse du projet via Gitflow, et ma collaboration étroite avec mon binôme et l'équipe UX/UI démontrent ma capacité à apprendre et à gérer un projet complexe dans un environnement d'entreprise réel.
// Projet 04
DévelopperEntreprendre
Page web événementielle — Live « Passage de témoin de la Direction Générale »
HTMLCSSJavaScriptUI/UXResponsive
Lors de mon stage chez Api Restauration, l'entreprise m'a confié la réalisation d'un site web dédié à un événement interne majeur : le passage de témoin de la direction générale prévu le 1er juillet. L'enjeu de ce projet était de taille, car le directeur actuel devait passer la main à la nouvelle génération lors d'une diffusion en direct destinée à l'ensemble des collaborateurs du groupe, soit plus de 12 000 personnes.
// Première maquette
Stack technique
HTML / CSS
Structure et mise en forme de l'interface
JavaScript
Animations et dynamisme de la page
Responsive
Adaptation à tous les formats d'écran
Figma
Maquettage et conception UI
Phase de Conception
Avant de coder, j'ai géré la phase de conception en collaboration avec les autres services de l'entreprise :
Maquettage
J'ai d'abord réalisé une maquette de la « page d'attente » (le site accessible avant le jour J) afin de proposer une première direction visuelle.
Collaboration interdisciplinaire
J'ai soumis cette maquette au pôle Communication pour validation. Suite à nos échanges, j'ai adapté mon design pour qu'il respecte la charte graphique du flyer d'invitation qu'ils avaient déjà créé, assurant ainsi une cohérence visuelle totale sur l'événement.
// Flyer à gauche et maquette adaptée à droite
Développement Technique
Une fois le design validé, je me suis occupé du développement technique de la page d'attente :
Technologies utilisées
Intégration pure en HTML et CSS, avec l'ajout de JavaScript pour dynamiser l'interface.
Responsive Design
J'ai conçu le site pour qu'il s'adapte parfaitement à toutes les tailles d'écrans (ordinateurs, tablettes, smartphones), une nécessité pour que les 12 000 employés puissent y accéder depuis n'importe quel appareil.
Animations et Finitions
J'ai intégré des animations CSS/JS pour rendre la page d'attente plus vivante et engageante, et j'ai rédigé et intégré la page des mentions légales nécessaire pour la conformité du site.
// Site en format tablette
Validation des Compétences BUT MMI
Ce projet de stage illustre parfaitement ma capacité à mobiliser mes deux compétences majeures dans un contexte professionnel réel et à fort enjeu :
Développer pour le web et les médias numériques
Je démontre ici ma maîtrise de l'intégration web (HTML, CSS, JavaScript) et des normes du Web (Responsive Design, accessibilité multi-supports, conformité avec les mentions légales). J'ai également prouvé mon autonomie sur la mise en ligne d'un projet.
Entreprendre dans le secteur du numérique
J'ai conduit ce projet de bout en bout en répondant à un besoin d'entreprise précis. Le travail d'itération sur la maquette avec le pôle Communication et l'adaptation stricte à une charte graphique existante valident ma capacité à appliquer des notions de communication numérique et à collaborer efficacement avec différents services.
Le résultat
J'ai pris en charge la mise en ligne autonome de cette page d'attente sur les serveurs. Pour le jour de l'événement, ma mission consistera à réaliser une seconde page web, sur laquelle j'intégrerai l'iframe (le module vidéo externe) permettant de diffuser le flux en direct à tous les collaborateurs.
// Projet 01
BUT MMI · 2025/2026DévelopperEntreprendre
Polypdf — Micro-service de conversion et génération de PDF
SymfonyPHPTwigGotenbergStripeCypressCI/CD
Dans le cadre de mon année universitaire, j'ai réalisé un projet de micro-service de génération de documents PDF. L'objectif était de concevoir une plateforme fonctionnelle, sécurisée et basée sur un modèle économique réel, simulant les exigences d'un produit commercialisable.
// Page d'accueil
Stack technique
Symfony
Framework PHP backend
Twig
Moteur de template
Gotenberg
Génération PDF
Stripe
Paiements & abonnements
Cypress
Tests end-to-end
CI/CD
Intégration continue
Fonctionnalités
Afin d'offrir une expérience utilisateur fluide et complète, j'ai développé plusieurs modules essentiels :
Sécurisation des accès
Mise en place d'un système d'inscription et de connexion sécurisé, incluant une vérification obligatoire par e-mail ainsi qu'une procédure de réinitialisation du mot de passe en cas d'oubli.
Modèle Économique "Freemium" et Paiement
J'ai intégré la solution de paiement Stripe pour gérer trois types d'abonnements. Selon son forfait, l'utilisateur dispose de droits d'accès différents grâce à une gestion dynamique des rôles et des permissions :
Forfait Free
Limité à 2 PDF par jour avec un accès restreint aux outils.
Forfait Basic
Permet de générer jusqu'à 20 PDF par jour et offre plus d'outils.
Forfait Premium
Permet de générer jusqu'à 200 PDF par jour et offre l'accès à tous les outils disponibles.
Espace Client
L'utilisateur peut consulter l'historique complet de ses documents générés et a la flexibilité de modifier ou résilier son abonnement à tout moment.
// Page des outils disponibles
Qualité logicielle & CI
Pour garantir la fiabilité de l'application au fil des modifications, j'ai mis en place une stratégie de test rigoureuse :
01
Tests unitaires
Ils permettent de vérifier individuellement le bon fonctionnement de chaque petite brique de code de manière isolée.
02
Tests end to end (de bout en bout) avec Cypress
Ces tests simulent le comportement d'un véritable utilisateur sur le site pour s'assurer que le parcours global ne présente aucun blocage.
L'intégration continue est un processus automatisé permettant de vérifier systématiquement la qualité du code à chaque modification. Concrètement, lorsque j'apporte une modification au code, un serveur distant prend le relais pour exécuter automatiquement l'ensemble de mes tests (unitaires et Cypress). Si un seul test échoue, le système me prévient immédiatement, ce qui garantit une application toujours stable et un développement plus efficace.
Validation des Compétences BUT MMI
Développer pour le web et les médias numériques
J'ai conçu l'intégralité d'une application web dynamique en articulant un backend (PHP avec Symfony) et une interface (HTML/CSS avec Twig). J'ai également interfacé des services en ligne complexes, notamment pour sécuriser les accès (système d'authentification par mail) et automatiser la génération de fichiers PDF.
Entreprendre dans le secteur du numérique
Ce projet simule un modèle économique réel. J'ai dû adapter des notions de gestion et de marketing en intégrant un modèle "Freemium" à trois forfaits, et implémenter concrètement le système de paiement Stripe. De plus, la gestion automatisée des permissions selon les abonnements répond directement à une logique de stratégie commerciale numérique.
// Projet 02
BUT MMI · 2025/2026Développer
Cineverse — Plateforme cinématographique en architecture découplée
Vue.jsSymfonyAPI PlatformGraphQLPHPCI/CD
Dans le cadre de mon année universitaire, j'ai conçu et développé une plateforme cinématographique interactive. Ce projet a été réalisé de manière transversale à travers deux modules complémentaires : le module WR506D dédié au développement backend et le module WR505D dédié au développement frontend. La particularité de cette application repose sur son architecture découplée : l'interface utilisateur (le frontend) et le serveur gérant les données (le backend) sont deux applications totalement indépendantes qui communiquent entre elles de manière sécurisée.
// Page d'accueil
Stack technique
Vue.js
Framework JS · Interface utilisateur (WR505D)
Symfony
Framework PHP · Backend API (WR506D)
API Platform
Génération et exposition de l'API
GraphQL
Communication frontend ↔ backend
Fixtures & Faker
Génération de données factices réalistes
Postman
Tests manuels des endpoints API
Fonctionnalités
L'interface frontend (Vue.js) propose une expérience fluide pour les visiteurs :
Espace personnel
Création de compte et connexion sécurisée.
Catalogue et Recherche
Accès à une liste complète de films avec une barre de recherche intégrée et des filtres de tri (par réalisateur ou par ancienneté).
Fiches détaillées
Chaque film possède sa propre page affichant ses informations (date de sortie, réalisateur, genre, synopsis).
Interactions sociales
Les utilisateurs peuvent consulter les critiques laissées par les autres membres de la plateforme et publier leurs propres avis.
// Fiche détaillée d'un film
Administration & Sécurité
Pour gérer cette plateforme, j'ai développé des fonctionnalités avancées côté serveur :
Backoffice Administrateur
Un espace de gestion (CRUD - Create, Read, Update, Delete) centralisé, réservé au personnel autorisé, permettant d'ajouter, modifier ou supprimer des films, des acteurs, des catégories, des commentaires ou des utilisateurs.
Gestion des rôles
Un système strict définissant les permissions (un simple utilisateur n'a pas les mêmes droits d'accès qu'un administrateur).
Double Authentification (2FA)
Intégration de Google Authenticator lors de la connexion pour ajouter une couche de sécurité supplémentaire au compte utilisateur.
Rate Limiter (Limiteur de requêtes)
Une protection empêchant un utilisateur ou un robot de lancer trop de requêtes simultanées, afin de protéger le serveur contre les surcharges ou les attaques malveillantes.
Qualité logicielle & CI
Pour garantir un code propre et sans erreur, j'ai mis en place un pipeline d'Intégration Continue (CI) incluant plusieurs outils d'analyse automatique du code PHP :
01
PHP Code Sniffer
Vérifie que le code respecte les standards de programmation professionnels à chaque modification.
02
PHPStan
Analyse statique du code pour détecter les bugs potentiels avant sa mise en ligne.
03
PHPMD
Détecte les problèmes d'optimisation et les mauvaises pratiques dans le code PHP.
Validation des Compétences BUT MMI
Développer pour le web et les médias numériques
J'ai mis en pratique un développement "Fullstack" avancé en créant une architecture découplée complexe. Cela valide ma maîtrise du backend (PHP avec Symfony, création d'une API GraphQL) et du frontend (JavaScript avec Vue.js). J'ai également prouvé ma capacité à interfacer des services de sécurité (Double authentification avec Google Authenticator) et à gérer des bases de données de manière optimisée (CRUD, filtres, données factices).
// Projet 03
BUT MMI · 2025/2026DévelopperEntreprendre
Nexus — Jeu de tir en Réalité Virtuelle (VR) et site de présentation
UnityC#VRMeta QuestVue.jsTailwind CSSCI/CD
Dans le cadre du module universitaire WR507D, j'ai développé une expérience en réalité virtuelle : un jeu de tir à la première personne jouable sur les casques Meta Quest 2 et 3. L'univers graphique et immersif que j'ai choisi est de style Cyberpunk, caractérisé par un environnement sombre, une esthétique futuriste, un pistolet laser et des effets visuels de "glitch" (artefacts numériques) sur les cibles. En complément du jeu, j'ai conçu un site web dédié pour présenter le projet et distribuer l'application.
// Site de présentation — Nexus
Stack technique
Unity
Moteur de jeu 3D utilisé pour créer l'environnement, gérer la physique de la réalité virtuelle et assembler le projet.
C#
Langage de programmation utilisé pour coder toute la logique du jeu (scripts, comportements des objets, décompte des points).
Vue.js
Framework JavaScript utilisé pour construire une interface web dynamique et structurée.
Tailwind CSS
Framework CSS basé sur des classes utilitaires pour concevoir rapidement un design moderne et responsive (adapté aux mobiles et ordinateurs).
Fonctionnalités
Le cœur de l'application VR repose sur une boucle de gameplay complète et interactive d'une minute :
Interactions VR
Implémentation des mécaniques fondamentales de la VR, à savoir une arme "grabbable" (que l'on peut saisir physiquement avec la manette) et "actionable" (sur laquelle on peut presser la gâchette pour tirer).
Règles du jeu et système de score
Apparition de cibles en mouvement. Toucher une cible verte augmente le score, tandis que toucher une cible rouge fait perdre des points.
Boucle de jeu (Gameplay Loop)
Gestion des différents états de la partie : un écran d'accueil pour démarrer, la phase de jeu active avec un minuteur d'une minute et le score, et un écran de fin affichant le score final avec la possibilité de relancer une partie.
"Juice" et Immersion
Ajout de finitions pour rendre le jeu plus dynamique et satisfaisant à jouer, notamment grâce à l'intégration du sound design (effets sonores lors des tirs et des impacts) et des effets de glitch visuels sur les cibles.
// Vue en jeu
Le Site Web & CI/CD
Le site web sert de vitrine et de plateforme de téléchargement pour le projet :
Contenu du site
Il intègre une vidéo montrant une boucle de gameplay complète, des explications textuelles des règles, une présentation des assets (modèles 3D utilisés), un extrait de code source pour la partie technique, ainsi qu'un lien pour télécharger directement le fichier APK.
Déploiement avec une CI/CD (Continuous Integration / Continuous Delivery)
La CI/CD (Intégration Continue et Déploiement Continu) est une chaîne de scripts automatisée liée à mon dépôt de code GitHub. Concrètement, dès que je modifie le code du site web et que je l'envoie sur GitHub, la CI vérifie automatiquement que le projet compile sans erreur. Si tout est correct, la CD prend immédiatement le relais pour compiler la version finale du site et la mettre à jour en ligne automatiquement sur GitHub Pages. Cela évite d'avoir à transférer manuellement les fichiers du site sur un serveur à chaque modification.
Validation des Compétences BUT MMI
Ce projet pluridisciplinaire m'a permis de mobiliser l'ensemble de mes compétences :
Développer pour le web et les médias numériques
La dimension développement est double ici. D'une part, j'ai codé la logique globale, la physique et les interactions d'un dispositif interactif 3D complexe (C# sous Unity). D'autre part, j'ai développé et intégré le site web de présentation en utilisant des technologies modernes (Vue.js et Tailwind CSS).
Entreprendre dans le secteur du numérique
Ce projet a nécessité une conduite de projet rigoureuse pour mener de front le développement de deux produits distincts (le jeu VR et le site de distribution). La mise en valeur des assets graphiques, la présentation des fonctionnalités et la mise à disposition de l'APK traduisent une démarche marketing concrète pour promouvoir et diffuser un produit numérique auprès de son public cible.
// Projet 04
Personnel · 2025/2026DévelopperEntreprendre
Cipher — Gestionnaire de mots de passe pour développeurs
SymfonyNuxtPostgreSQLCI/CDDevSecOps
Réalisé dans le cadre du module WR610D, ce projet en autonomie complète avait pour objectif de démontrer ma capacité à entreprendre, concevoir et piloter un projet d'envergure de bout en bout. Visant une poursuite d'études en cybersécurité pour devenir ingénieur DevSecOps (une spécialité qui consiste à intégrer et automatiser la sécurité informatique à toutes les étapes de la création d'un logiciel, plutôt que de la vérifier uniquement à la fin), j'ai développé une application répondant à un besoin critique en entreprise : la gestion et le partage sécurisés d'identifiants entre développeurs (qui s'échangent encore trop souvent des mots de passe ou des clés d'API par Slack ou par e-mail). Ce projet prouve mon opérationnalité immédiate sur des problématiques de sécurité et d'automatisation à la sortie du BUT.
// Page d'accueil
Stack technique
Symfony
Backend · Framework PHP
Nuxt
Frontend · Framework Vue.js SSR
PostgreSQL
Base de données relationnelle
AES-256
Chiffrement symétrique des secrets
Docker
Conteneurisation & déploiement
PHPStan
Analyse statique (SAST)
Fonctionnalités
L'application est structurée autour du concept de « coffres-forts » numériques hautement sécurisés :
Types de données supportés
Prise en charge des besoins spécifiques des développeurs, permettant de stocker des mots de passe, des clés d'API, des jetons (tokens), des clés SSH ou des variables d'environnement.
Gestion fine des permissions
Le créateur d'un coffre peut administrer précisément les droits des autres collaborateurs (autorisation de lecture seule, d'ajout, de modification).
Traçabilité et Logs d'activité
Implémentation d'un système de journalisation (logs) strict. Chaque action est enregistrée avec horodatage précis (qui a consulté, créé, modifié ou supprimé un secret, quel jour et à quelle heure) à des fins d'audit.
// Vue d'un coffre-fort
Mesures de Cybersécurité
Pour assurer la confidentialité et la résilience de la plateforme, plusieurs barrières de sécurité ont été intégrées :
Chiffrement fort (AES-256)
Toutes les données sensibles sont chiffrées directement en base de données avec l'algorithme de chiffrement symétrique standard de niveau militaire AES-256. Même en cas de fuite de la base de données, les secrets restent illisibles.
Double Authentification (2FA)
Possibilité pour les utilisateurs de renforcer la sécurité de leur compte lors de la connexion.
Rate Limiter (Limiteur de requêtes)
Protection contre les attaques par force brute (tentatives de connexion répétées) en bloquant les requêtes excessives.
Pipeline DevSecOps & Automatisation
L'aspect DevOps et sécurité a été automatisé à travers une chaîne d'intégration et de déploiement continu (CI/CD) stricte, articulée autour de plusieurs étapes clés avant la mise en production :
Commit
Publication et envoi du code source sur le dépôt distant.
Lint & Test
Analyse de la syntaxe du code pour assurer sa conformité aux standards professionnels et exécution des tests unitaires pour valider la logique métier.
Security Audit
Scan automatisé des dépendances PHP pour détecter si une bibliothèque externe utilisée par le projet comporte une vulnérabilité connue.
SAST (Static Application Security Testing)
Analyse statique automatique du code source pour identifier d'éventuelles failles de sécurité directement dans notre propre code (comme des risques d'injections SQL) à l'aide des outils PHPStan et enlightn/security-checker.
Build & Deploy
Si et seulement si toutes les étapes précédentes réussissent et que le score de sécurité est validé par la pipeline, le projet est automatiquement packagé et déployé via Docker.
Validation des Compétences BUT MMI
Véritable projet de fin d'études, cette réalisation est l'aboutissement de mon parcours de BUT :
Développer pour le web et les médias numériques
J'ai poussé le développement web à un niveau avancé en concevant une architecture découplée sécurisée (Symfony pour l'API, Nuxt pour le frontend et PostgreSQL pour les données). J'ai également mis en place l'interfaçage de services d'authentification forte (Double authentification 2FA) et des algorithmes de chiffrement de pointe (AES-256).
Entreprendre dans le secteur du numérique
Ce projet illustre parfaitement ma capacité à construire mon projet professionnel en accord avec mes aspirations (devenir ingénieur DevSecOps). J'ai fait preuve d'une autonomie totale en gérant et conduisant ce projet de bout en bout. De plus, j'ai identifié un besoin réel et non pourvu en entreprise (le partage de clés d'API et secrets entre développeurs) pour concevoir un outil y répondant précisément, ce qui démontre une forte capacité d'initiative et d'entreprenariat.
