Portfolio

SAE 501 VISIOCONF

VisioConf

Technologies utilisées:

Next
Node.js
Docker
Github
MongoDB

Apprentissage Critiques:

AC34.01 Développer à l’aide d’un framework de développement côté client
AC34.02 Développer à l’aide d’un framework de développement côté serveur
AC34.03 Développer des dispositifs interactifs sophistiqués
AC34.04 Concevoir et développer des composants logiciels, plugins ou extensions
AC34.05 Maitriser l'hébergement et le déploiement d'applications
AC35.01 Piloter un produit, un service ou une équipe
AC35.02 Maîtriser la qualité en projet Web ou multimédia
AC35.03 Concevoir un projet d’entreprise innovante en définissant le nom, l’identité, la forme juridique et le ton de la marque
AC35.04 Défendre un projet de manière convaincante

Compétences:

Développer
Entreprendre

OBJECTIF :

Dans le cadre de la troisième année du BUT MMI, nous avons réalisé en équipe de dix développeurs un projet ambitieux : VisioConf, une plateforme web de visioconférence inspirée de Discord. L’objectif était de concevoir une application de communication en temps réel intégrant des fonctionnalités comme la messagerie privée, les groupes, les appels audio/vidéo, ainsi qu’un espace administrateur. Ce projet visait à mettre en œuvre une architecture web moderne, en répondant à des exigences techniques complexes imposées par notre encadrant, notamment l’utilisation de sockets pour toute la communication entre le front-end et le back-end.

Lors de ma troisième année de BUT MMI, j’ai participé au développement de VisioConf, une application de visioconférence collaborative inspirée de Discord. Ce projet avait pour ambition de recréer une plateforme de communication en ligne intégrant discussions privées, groupes, appels, visioconférences et un espace d’administration, le tout dans un fonctionnement temps réel.

Architecture et organisation technique :
Nous avons choisi de repartir entièrement de zéro par rapport à la version de l’année précédente, afin d’opter pour une architecture plus propre et mieux structurée. Le back-end est développé avec Express.js, le front-end avec Next.js, et l’ensemble de l’application repose sur un système de contrôleurs gérant les messages Socket.IO. Tous les échanges entre client et serveur sont centralisés via ces messages, conformément aux consignes du professeur (AC34.03, AC34.04).
Une documentation technique complète a été produite, recensant tous les messages Socket.IO disponibles, leur usage, et la procédure d’installation du projet (AC34.02). Le groupe s’est organisé en pôles (front, back, gestion GitHub), avec un fonctionnement proche de celui d’une équipe professionnelle.
Mes contributions :
J’ai fait partie du pôle front-end, où j’ai conçu et développé plusieurs interfaces essentielles de l’application. J’ai notamment réalisé la page d’inscription, la page de connexion, la page de profil utilisateur, ainsi que la page d’accueil. J’ai également mis en place la barre de navigation verticale, qui structure l’interface et facilite la navigation entre les différentes sections. En parallèle de ces tâches de développement, j’ai activement participé aux échanges avec notre professeur encadrant afin de définir un usage cohérent et pertinent des sockets, en veillant à limiter les communications superflues et à optimiser le système d’interactions en temps réel. (AC34.01, AC35.03).
Compétences et production :
Ce projet m’a permis de mettre en œuvre une architecture web temps réel, de collaborer efficacement en équipe et de suivre une logique de développement modulaire et contrôlée. J’ai renforcé mes compétences en React/Next.js, en structuration des échanges avec un contrôleur unique (AC35.01), et en documentation technique (AC35.04).

Nous avons décidé de reconstruire entièrement le projet en partant d’une base vierge pour corriger les erreurs d’architecture du projet précédent et construire un système plus propre. Nous avons utilisé Next.js pour le front-end, Express.js pour le back-end, et Socket.IO pour gérer l’ensemble des interactions en temps réel via un contrôleur centralisé.
L’équipe s’est organisée de façon structurée : des membres spécialisés sur le front, d’autres sur le back, et un référent en charge de la gestion du GitHub. De mon côté, j’ai intégré le pôle front-end, où j’ai conçu plusieurs interfaces clés : connexion, inscription, profil utilisateur, accueil, ainsi qu’un système de navigation verticale pensé pour optimiser l’expérience utilisateur.
Nous avons produit une documentation exhaustive expliquant chaque message envoyé ou reçu via les sockets, ce qui a permis une intégration fluide entre les différents pôles et garantit la maintenabilité du projet.
Compétences mobilisées :
Ce projet m’a permis d’approfondir mes compétences techniques en React/Next.js, en architecture web temps réel avec Socket.IO, et en travail en équipe sur un projet ambitieux. J’ai également pu expérimenter une organisation de projet proche d’un contexte professionnel, avec une gestion rigoureuse des rôles, une documentation claire, et des décisions techniques concertées.