Accueil

Projets

Stage chez Flers Agglo

Intranet de la collectivité et application Ideabox

Quiz cybersécurité Ideabox
Éditeur de quiz de cybersécurité de l'intranet de Flers Agglo

L'éditeur de quiz : on modifie le quiz directement sur son rendu final.

Pour mon stage de 1re année au CESI, j'ai rejoint la direction des systèmes d'information de Flers Agglo, la communauté d'agglomération du Pays de Flers, de mai à juillet 2025.

J'y ai travaillé sur deux applications internes pour les agents de la collectivité : le module de quiz de cybersécurité de l'intranet, un projet déjà en cours, puis Ideabox, une boîte à idées que j'ai créée de A à Z.

Les deux sont faits en Vue.js 3 et Express.js avec une base MySQL, et je les ai suivis jusqu'à la mise en production.

Technologies & Informations

Stack technique

Frontend

Vue.js

Backend

Node.js et Express.js

Base de données

MySQL

Mobile

Flutter

Serveur local

XAMPP

IDE

Visual Studio Code

Transfert

WinSCP

Serveur distant

PuTTY

Organisation

Trello

Détails du projet

Période

5 mai - 30 juillet 2025

Statut

Terminé

Type

Stage de 1re année

Entreprise

Flers Agglo - DSI

Projets

2 applications internes

Mise en production

Nginx, PM2, HTTPS

Intranet : module de quiz cybersécurité

L'intranet centralise l'accès aux services numériques des agents : outils métiers, informations, maintenances... J'ai rejoint le projet en cours pour y ajouter des quiz qui sensibilisent les agents à la cybersécurité.

Quiz interactifs

Questions à une ou plusieurs réponses, vidéo YouTube explicative au-dessus d'une question, et compte à rebours avant la fin du quiz.

Éditeur façon Google Forms

J'ai proposé de refaire l'éditeur pour modifier le quiz directement sur son rendu, avec une navigation latérale, une vue d'ensemble et le glisser-déposer des questions.

Refactorisation

Le fichier de l'éditeur dépassait les 1 600 lignes : je l'ai découpé en 8 composants pour le rendre lisible et maintenable.

Base de données et API

Conception du MLD des quiz, routes CRUD, et un cookie pour ne garder que la première tentative de chaque agent.

Statistiques exportables

Les réponses de chaque quiz sont regroupées en statistiques, exportables en fichier Excel (xlsx).

Notifications

Des toasts sur tout l'intranet : rouge pour une erreur, orange pour une mise en garde, vert pour un succès.

Tests, déploiement et documentation

J'ai testé chaque fonctionnalité en local, puis je l'ai régulièrement déployée sur le serveur de test pour la vérifier dans un environnement proche de la production. J'ai ensuite assisté à la mise en production de la nouvelle version de l'intranet.

Pour finir, j'ai rédigé la documentation des quiz sur le Confluence de la collectivité, pour que les agents puissent créer et modifier les quiz sans aide.

Difficultés rencontrées

Arriver sur un projet déjà commencé demande du temps pour comprendre le code existant. J'ai aussi dû régler des erreurs CORS liées au certificat SSL : Firefox bloquait les requêtes quand le poste n'était pas dans le domaine de Flers Agglo, là où les autres navigateurs affichaient seulement un avertissement.

Ideabox : la boîte à idées

Ideabox permet aux agents de proposer des idées pour améliorer les services et de voter pour celles des autres. Je l'ai développée de façon autonome, du backend au frontend, puis j'ai commencé une version mobile en Flutter.

Page de profil d'un agent dans Ideabox

La page de profil d'un agent (données de test).

Page de profil

Chaque agent a sa page de profil : elle résume le nombre d'idées publiées et les votes positifs et négatifs reçus, et regroupe toutes ses idées, publiées ou en brouillon.

Le bouton « Détails » ouvre chaque idée, et le bouton « Créer une idée » permet d'en proposer une nouvelle.

Connexion LDAP

Les agents se connectent avec leurs identifiants professionnels grâce à l'annuaire Active Directory, sans compte à créer.

Idées et brouillons

Une idée incomplète est enregistrée en brouillon ; une idée complète peut être publiée tout de suite ou gardée de côté.

Vote par swipe

On vote pour ou contre une idée en la faisant glisser, et on retrouve les idées avec la recherche et les filtres.

Espace administrateur

Tableau de bord des statistiques, export d'une idée ou de toutes, suppression d'une idée et réinitialisation complète.

Historique

Ajouté de ma propre initiative : chacun retrouve ses actions, et les administrateurs voient toutes les publications.

Logger des routes

Un middleware qui affiche en couleur chaque route appelée (GET, POST, DELETE...), comme j'en avais l'habitude avec Laravel.

Export Excel de toutes les idées d'Ideabox

L'export Excel de toutes les idées, généré depuis l'espace administrateur (données de test).

Mise en production

Avec l'aide de l'équipe systèmes et réseaux, j'ai déployé Ideabox sur une machine virtuelle dédiée. Je m'y suis connecté avec PuTTY et j'ai configuré un vhost Nginx :

  • redirection automatique du HTTP vers le HTTPS, avec les certificats SSL fournis ;
  • les requêtes vers /api envoyées au backend Node.js ;
  • le frontend servi depuis le dossier dist généré par npm run build et transféré avec WinSCP ;
  • le backend lancé et maintenu en ligne avec le gestionnaire de processus PM2.

Difficultés rencontrées

En voulant permettre de modifier un vote, j'ai eu des erreurs 409 que je ne connaissais pas : la requête SQL faisait un INSERT au lieu d'un UPDATE. Après la mise en production, j'ai eu des erreurs 502, car le HTTPS et les certificats SSL n'étaient pas configurés côté serveur, puis des erreurs 404, parce que j'avais déclaré les routes après le bloc de gestion des erreurs 404.