Defiut

Publié le : 30/09/2026

Dernière modification : 30/09/2026

Tags :

DockerFirebaseVueJS

Introduction

Dans le cadre de la SAE S4.Real.01, nous avons conçu Defiut, une plateforme de défis informatiques de type “Capture The Flag”. Ce projet a été réalisé selon une approche client-fournisseur : les étudiants de BUT3 agissaient en tant que clients, avec un cahier des charges rigoureux, tandis que notre équipe assurait la maîtrise d’œuvre.

Dans ce projet, j’ai occupé le rôle de Chef de projet. Mes missions incluaient la définition des solutions techniques, la configuration de l’infrastructure et la mise en place des outils collaboratifs.

Phase 1 : Maquettage

Avant la phase de développement, nous avons conçu l’interface utilisateur sur Figma. Cette étape a donné lieu à une soutenance devant nos clients (BUT3). Leurs retours nous ont permis d’itérer sur le design afin de garantir que l’expérience utilisateur soit parfaitement alignée avec les exigences du cahier des charges.

Image de l'article

Phase 2 : Développement

La réalisation technique a été marquée par une gestion de contraintes technologiques forte :

  • Adaptation au stack imposé : Le client exigeait l’utilisation de Vue.js et Vuetify. Malgré une proposition de notre part pour React/ShadcnUI (mieux maîtrisé par l’équipe), nous avons dû faire preuve d’adaptabilité et monter en compétence rapidement sur Vue.js pour respecter la demande client.
  • Architecture Backend : Pour l’authentification et l’API, nous avons implémenté la suite Firebase. J’ai notamment préconisé l’utilisation de Cloud Functions pour sécuriser la validation des défis : le contrôle est ainsi effectué côté serveur, empêchant toute manipulation frauduleuse côté client.

Phase 3 : Déploiement et production

Pour la mise en production, nous avons utilisé Docker (Dockerfile et Docker-compose) afin de déployer la solution sur un serveur Debian hébergé sur Microsoft Azure, conformément aux exigences d’infrastructure.

J’ai également rédigé une documentation technique exhaustive incluant :

  • Les conventions de code pour assurer la maintenabilité.
  • Un guide d’administration pour la publication de nouveaux défis.
  • Les procédures de déploiement.

Conclusion

Pour conclure j’ai adoré faire ce projet, surtout lors de la fin où l’on voyait le site internet prendre vraiment forme. Cependant le développement du site avec VueJS a vraiement été un freint en raison du manque de connaissance dans ce domaine. Après l’avoir testé, ReactJS reste toujours mon framework javascript préféré.

Pour le moment je n’ai pas encore reçu la note de cette SAE.