MyJobGlasses : Module de Visioconférence

Résumé exécutif

Développement d'un module de visioconférence complet pour MyJobGlasses, plateforme qui met en relation étudiants et professionnels pour des échanges sur l'orientation. Le module permet aux utilisateurs de réaliser des appels vidéo directement dans l'application, sans passer par un outil externe.

Contexte et problème

MyJobGlasses est une plateforme B2B qui connecte des étudiants avec des professionnels pour des échanges sur leur métier et leur parcours. Jusqu'alors, les échanges vidéo nécessitaient de passer par des outils externes (Zoom, Teams, etc.), ce qui créait plusieurs frictions :

• Expérience fragmentée : Les utilisateurs devaient jongler entre la plateforme et un outil de visio externe
• Perte de contexte : Les informations du profil n'étaient pas accessibles pendant l'appel
• Tracking limité : Impossible de suivre si les échanges avaient bien eu lieu
• Professionnalisme : L'expérience manquait de cohérence avec la marque

L'équipe avait besoin d'une solution de visioconférence intégrée, livrée rapidement pour un lancement proche.

Contraintes et objectifs

Contraintes

• Délai serré : MVP fonctionnel attendu en 10 jours
• Intégration existante : S'adapter à l'architecture et aux conventions de code en place
• Fiabilité : La visio doit fonctionner parfaitement dès le premier jour
• Multi-navigateurs : Support Chrome, Firefox, Safari, Edge

Objectifs

• Permettre les appels vidéo 1-to-1 directement dans la plateforme
• Offrir une expérience fluide et professionnelle
• S'intégrer parfaitement au design system existant
• Fournir les métriques d'usage nécessaires

Mon rôle

Mission freelance de développement fullstack :

• Analyse technique : Évaluation des solutions de visio (AWS Chime retenu)
• Développement frontend : Composants React pour l'interface de visio
• Développement backend : API Node.js pour la gestion des sessions
• Intégration : Connexion avec l'existant (auth, profils, calendrier)
• Tests : Validation cross-browser et scénarios d'erreur

Décisions techniques

1. AWS Chime SDK

Choix d'AWS Chime plutôt que des alternatives (Twilio, Daily.co) pour :

• Qualité : Infrastructure AWS robuste, faible latence
• Scalabilité : Gestion automatique de la charge
• Coût : Tarification à l'usage, prévisible
• Intégration AWS : L'équipe utilisait déjà AWS, facilitant l'intégration

Utilisation de amazon-chime-sdk-component-library-react avec un ChimeProvider personnalisé encapsulant MeetingProvider, NotificationProvider, UserActivityProvider et ThemeProvider pour une intégration cohérente.

2. Architecture React moderne

Stack frontend soigneusement choisie pour la productivité et la maintenabilité :

• React + Vite : Build rapide et hot reload instantané
• TypeScript : Typage strict pour réduire les bugs runtime
• shadcn/ui + Radix UI : Composants accessibles et personnalisables
• Zustand : State management léger avec useMeetingStore pour l'état de session
• React Router : Navigation entre pré-appel, meeting et post-appel

Architecture atomique (atoms/molecules/organisms) avec des composants comme DeviceSelector, ParticipantCard, MeetingControlButton pour une réutilisabilité maximale.

3. API GraphQL typée

Communication backend robuste avec :

• Apollo Client : Gestion du cache et des requêtes
• GraphQL Codegen : Génération automatique des types TypeScript depuis le schema
• Mutations métier : EnsureAppointment, JoinAppointment, SetConsent
• Queries riches : Récupération des informations participant (ambassador/interlocutor), statut d'enregistrement, consentements

L'API gère les concepts métier spécifiques : appointments, conversationId, consentements RGPD, régions média AWS.

4. Hooks personnalisés découplés

Logique métier encapsulée dans des hooks réutilisables :

• useJoinMeeting : Orchestration de la connexion avec gestion d'état (isJoining, error)
• usePrepareMeeting : Configuration pré-appel et validation des devices
• useDeviceSelection : Sélection micro/caméra avec persistence
• useAudioTest : Test du niveau audio avant l'appel
• useLeaveMeeting : Nettoyage propre de la session

Chaque hook gère son propre état et expose une API claire.

5. Gestion robuste des erreurs

La visio est sensible aux conditions réseau. Implémentation de :

• Détection de perte de connexion avec reconnexion automatique
• Fallback audio si la vidéo pose problème
• Messages d'erreur clairs pour l'utilisateur
• Logs détaillés via ConsoleLogger du SDK Chime

Ce qui a été livré

Interface utilisateur

• Pré-appel : Page PreJoinPage avec sélection devices (DeviceSelector), test audio (useAudioTest), preview vidéo
• Contrôles meeting : MeetingControlButton pour mute/unmute, VideoInputControl pour caméra
• Affichage participants : ParticipantCard avec indicateurs de statut, NoRemoteVideoView pour les participants sans vidéo
• États vides : EmptyState component pour les cas limites
• Header : BrandHeader avec branding MyJobGlasses, MeetingHeader avec infos session

Backend (API GraphQL)

• Mutations : ensureAppointment (création session), joinAppointment (rejoindre avec credentials Chime), setConsent (RGPD)
• Queries : getAppointment avec données complètes (participants, recording, consents)
• Modèle de données : Appointment avec chimeMeetingId, mediaRegion, ambassador/interlocutor
• Enregistrement : Support du recording avec pipelineId, startedAt, stoppedAt

Intégration

• Connexion avec le système de rendez-vous via appointmentId
• Accès aux profils pendant l'appel (nom, avatar, rôle, entreprise, présentation)
• Gestion des mineurs avec flag dédié
• Support des utilisateurs anonymisés/supprimés

Résultat

Module livré en 10 jours, fonctionnel et déployé en production. L'équipe MyJobGlasses a pu lancer la fonctionnalité comme prévu, offrant une expérience de visioconférence intégrée à leurs utilisateurs.

Ce que ce projet démontre

Rapidité d'exécution

• Capacité à délivrer un MVP fonctionnel en délai contraint
• Priorisation efficace des fonctionnalités essentielles

Adaptabilité

• Intégration dans un environnement de code existant
• Respect des conventions et pratiques de l'équipe
• Collaboration fluide avec les développeurs internes

Expertise technique

• Maîtrise des SDK de visioconférence (WebRTC, AWS Chime)
• Développement fullstack React/Node.js
• Gestion des cas d'erreur en environnement temps réel

Quand cette approche est pertinente

Ce type de mission convient si vous :

• Avez besoin d'intégrer une fonctionnalité complexe rapidement
• Cherchez un développeur capable de s'adapter à votre codebase
• Voulez quelqu'un d'autonome qui livre sans supervision constante
• Avez un délai serré mais des standards de qualité élevés