Dans le cadre de la SAE S3.A.01 / S4.A.01 de BUT2, notre groupe de 4 étudiants (Emilien Emeriau, Helori Ollivier, Nolan Chailloleau, Evan Bouvier) a développé ClashCode - une plateforme web de défis informatiques type CTF (Capture The Flag) pour un client réel. L'objectif était de livrer une application complète, déployable en production, permettant à des utilisateurs de relever des défis en équipe, de suivre leur progression et de se mesurer via un classement.
On était 4 avec des rôles répartis selon les compétences de chacun. On a travaillé sur toute l'année scolaire 2025-2026, découpée en deux grandes phases.
| Période | Phase | Contenu |
|---|---|---|
| Sept → Janv | Semestre 3 | Maquette UI, architecture frontend |
| Janv → Avril | Semestre 4 | Conception BDD, développement backend, déploiement, tests, livraison |
| Tâche | S | O | N | D | J | F | M | A |
|---|---|---|---|---|---|---|---|---|
| Analyse du cahier des charges | ■ | ■ | ||||||
| Maquette UI / design système | ■ | ■ | ■ | |||||
| Conception BDD (MySQL 3NF) | ■ | ■ | ||||||
| Développement frontend Vue.js | ■ | ■ | ■ | |||||
| Développement backend Express | ■ | ■ | ■ | |||||
| Intégration frontend ↔ backend | ■ | ■ | ||||||
| Déploiement Docker / Azure | ■ | ■ | ||||||
| Tests et documentation | ■ | ■ | ||||||
| Livraison finale | ■ |
| Couche | Technologie |
|---|---|
| Frontend | Vue.js 3 + Vite + Tailwind CSS |
| Backend | Express.js (Node.js) |
| Base de données | MySQL 8 (normalisé 3NF) |
| Authentification | JWT + bcrypt |
| Emails | Nodemailer (reset mot de passe) |
| Déploiement | Docker + Docker Compose + Nginx |
| Hébergement | Machine virtuelle Azure (Ubuntu 24.04) |
| CI/CD | GitLab CI (déploiement automatique sur push main) |
| Gestion de version | Git / GitLab (branches feature → dev → main) |
Le projet est séparé en 3 dossiers distincts : src/ pour le frontend, server/ pour le backend, et docker/ pour toute la configuration de déploiement.
Côté frontend, on a tiré pleinement parti des Single File Components de Vue.js. Les Views orchestrent les pages et les appels API via une couche Services (Axios), les Components gèrent la présentation et remontent les événements via des emits, et les Stores conservent l'état global (auth, UI). Le router est structuré par domaine (auth, défis, équipes, admin, public) avec des guards de navigation pour protéger les routes selon le rôle.
Côté backend, l'architecture suit le pattern Route → Controller → Repository. Les repositories contiennent uniquement les requêtes SQL avec des prepared statements (protection injection SQL), les controllers gèrent la validation et la logique métier, et les middlewares s'occupent de l'authentification JWT, du logging et de la gestion des uploads (Multer).