Visioconf
BUT MMI — 3ᵉ année
- React
- TypeScript
- Node.js
- MongoDB
- Docker
- VPS
Transmis d’une promotion à l’autre, Visioconf est un réseau social interne au campus que nous avons continué en équipe de huit, sur un socle à garder modulaire et maintenable. J’ai pris en charge l’authentification de bout en bout : protection des routes, hachage des mots de passe, gestion des sessions. Ces sessions sont créées et stockées dans une base MongoDB déjà en place. Le projet peinant à avancer, j’ai fini par coordonner l’équipe.
La stack initiale — Next.js + un backend full JavaScript — ne répondait pas à une des contraintes du projet : livrer un bundle JavaScript exploitable. Next.js n’a pas été créé uniquement pour rendre des bundles JS. De plus, faire du SSR — Server Side Rendering — en interne ne nous sert à rien. React, lui, le rend directement : je suis donc passé de l’un à l’autre. J’en ai profité pour généraliser TypeScript, au sein de l’environnement du projet — la détection d’erreurs se fait avant l’exécution, c’est un avantage —, et réorganiser en modules un backend constitué de trop peu de fichiers spaghetti. Enfin, j’ai adapté la configuration Docker existante et déployé l’environnement sur un VPS monté avec Benjamin.
L’application est en ligne, à visioconf.xyz, sur un serveur OVH conséquent par défaut sur le premier plan proposé, mais nous hébergeons aussi nos autres réalisations étudiantes pour le rentabiliser. Nous n’avons pas tout livré dans les temps, l’élan de l’équipe s’étant essoufflé. J’en retiens un code mené jusqu’à la production, et qu’entretenir la motivation d’une équipe compte autant que la technique.
En troisième année de MMI, j’ai repris un projet que les promotions se transmettent : Visioconf, un réseau social interne — le « Teams du campus » de l’IUT de Toulon — pour les étudiants, enseignants et équipes pédagogiques. Hérité tel quel, il devait rester modulaire et maintenable. Nous étions huit à le faire vivre : Benjamin, Rahnya, Bilel, Thomas, Miriam, Luis, Akash et moi. Chacun s’est vu confier un composant à concevoir et à intégrer ; j’ai pris en charge l’authentification.
J’ai développé ce composant de bout en bout : protection des routes, hachage des mots de passe et gestion des sessions. J’ai d’abord pensé aux jetons JWT, mais, la base reposant sur MongoDB, je pouvais utiliser directement la lib connect-mongodb-session. Seul l’identifiant de session voyage dans un cookie (AC34.04).
Le frontend reposait sur Next.js. Or une des contraintes du projet était de produire un bundle JavaScript, ce pour quoi Next.js n’a pas été initialement conçu : il réclamait des commandes de build supplémentaires, d’autant que son principal atout — le référencement — ne servait à rien sur une application interne. React.js, lui, le produit directement, avec un rendu plus rapide une fois celui-ci chargé ; ainsi, j’ai passé le frontend de Next.js à React.js (AC34.01).
J’en ai profité pour adopter TypeScript au sein du backend — ses erreurs se détectent avant l’exécution — et pour le réorganiser en modules : il reposait sur trop peu de fichiers spaghetti en CommonJS. J’ai enfin adapté la configuration Docker existante et déployé l’environnement sur un VPS (déjà conséquent pour le premier plan proposé) mis en place avec Benjamin (AC34.05) : l’application est aujourd’hui en ligne à visioconf.xyz, pour le campus de l’IUT de Toulon ; et nous hébergeons aussi nos autres réalisations étudiantes sur ce même VPS, pour le rentabiliser.
Diriger n’était pas mon rôle au départ, mais le projet stagnait et personne ne prenait vraiment les choses en main. Je me suis mis à répartir les tâches, et l’équipe m’a peu à peu reconnu comme chef de projet (AC35.01). Nous suivions l’avancement sur GitHub, tableaux de projet à l’appui, et l’information circulait sur nos canaux Discord. Pourtant, l’élan collectif s’est essoufflé et nous n’avons pas tout mené à terme dans les temps. J’en retiens qu’outiller le suivi ne suffit pas : entretenir la motivation d’une équipe est le vrai travail d’un chef de projet. Ce point capital sera à peaufiner prochainement.
Galerie
Connexion — authentification aux couleurs de l'Université de Toulon
Tableau de bord — messages non lus, appels manqués et contacts en un coup d'œil
Messagerie privée — discussions en temps réel entre membres
Espaces d'équipe — canaux publics et privés organisés par groupe
Annuaire — les membres du campus, leurs coordonnées et leurs rôles
Appel entrant — modale de réception d'un appel audio
Appel audio en cours, lancé depuis l'annuaire
Gestion des fichiers — dossiers et partage de documents