Plateforme Syren

Présentation

Syren est une plateforme SaaS destinée aux collectivités territoriales pour la gestion intelligente de leurs déchets. Le système repose sur des capteurs à ultrasons installés dans les conteneurs (aériens ou enterrés) qui remontent en temps réel le niveau de remplissage via les réseaux LoRaWAN et cellulaires (NB-IoT, LTE-M). Ces capteurs, autonomes pendant 10 ans et résistants aux conditions difficiles (lavages haute pression, chocs), alimentent une interface web permettant aux gestionnaires d’optimiser les tournées de collecte.

L’enjeu principal est de réduire les coûts opérationnels des collectivités tout en améliorant la qualité du service. En chiffres : 40% d’économies sur les coûts de collecte, un taux de remplissage moyen qui passe de 50% à 85%, et 25-30% de kilomètres parcourus en moins. La plateforme intègre le système Redin pour le contrôle d’accès aux Points d’Apport Volontaire (PAV) et la supervision de la redevance incitative : contrôle par badge, QR code ou application mobile Ecopass, suivi des ouvertures de tambour, et gestion des foyers. L’écosystème comprend également l’application terrain Redin Tech pour la récupération des données via Bluetooth en zone sans réseau. Le projet est déployé notamment sur l’agglomération grenobloise, dans le cadre de la démarche smart city de BH Technologies.

Objectifs, contexte, enjeu et risques

Contexte : Durant mon alternance chez BH Technologies, j’ai travaillé sur la plateforme Syren V3 (Angular) puis sur la refonte majeure Syren V4 (migration vers Svelte 5).

Problématique V3 : Rationaliser la gestion de milliers de conteneurs et badges usagers pour plusieurs dizaines de collectivités avec une interface réactive et multilingue.

Problématique V4 : Moderniser la stack technique pour améliorer les performances, la maintenabilité et préparer l’internationalisation avec un système i18n moderne.

Objectifs : Fournir une interface cartographique réactive et un back-office clair pour réduire les appels hotline, tout en supportant plusieurs langues pour les clients internationaux.

Étapes – ce que j’ai fait

Phase 1 - Ateliers utilisateurs : Participation aux sessions de recueil de besoins avec les responsables déchets des collectivités pilotes. Observation des workflows existants, identification des pain points et priorisation des fonctionnalités avec l’équipe produit.

Phase 2 - Conception UX : Création de wireframes basse fidélité sur Penpot en collaboration avec l’UX designer. Itérations rapides avec des tests utilisateurs pour valider les parcours principaux (consultation carte, gestion des alertes, export de rapports).

Phase 3 - Développement Syren V3 : Implémentation de l’interface en Angular 14 avec Angular Material et PrimeNG. Développement de la carte interactive (Park Map) avec Mapbox GL pour visualiser conteneurs et PAV, avec affichage des flux par type de déchets et taux de remplissage. Création du module de gestion des foyers (Foyer V3) avec listing, création et suivi des transactions pour la redevance incitative. Implémentation du système de badges virtuels avec gestion de la cohérence des données. Gestion des états temps-réel via RxJS et Socket.IO, et mise en place de l’internationalisation avec Transloco.

Phase 4 - Développement backend : Contribution au backend NestJS avec création d’APIs REST pour la gestion des conteneurs, des alertes et des statistiques. Intégration de la bibliothèque winston-logger pour le logging centralisé et de l’API Key management pour l’authentification inter-services.

Phase 5 - Migration Syren V4 : Participation à la réécriture complète du frontend en Svelte 5 avec SvelteKit 2. Migration du système d’internationalisation vers Paraglide.js (Inlang) pour une meilleure expérience développeur. Intégration de Mapbox GL et Mapbox Draw pour l’édition cartographique avancée.

Phase 6 - Accessibilité et qualité : Audit et mise en conformité WCAG 2.1 AA. Ajout des attributs ARIA, gestion du focus clavier, tests avec lecteurs d’écran. Mise en place de tests unitaires avec Jest.

Équipe

• Équipe de développement front-end et back-end
• UX designer
• Responsables déchets des collectivités
• Équipe support client
• Product Owner
• Équipe Luce

Résultats

• Pratique concrète de l’UX research via les ateliers utilisateurs
• RxJS maîtrisé en profondeur pour les flux temps-réel et Socket.IO
• Migration complète Angular 14 → Svelte 5 (réécriture de A à Z)
• Internationalisation avec Transloco (Angular) et Paraglide.js (Svelte)
• Accessibilité numérique : WCAG 2.1 AA, ce n’est plus un sujet flou pour moi
• Cartographie interactive avec Mapbox GL et Mapbox Draw
• Scrum pratiqué au quotidien pendant 3 ans
• Interface cartographique nettement plus réactive grâce à Svelte 5 et aux optimisations de rendu
• Réduction des appels au support client grâce à une UX repensée
• Plateforme accessible conforme aux exigences des marchés publics (RGAA)
• Support multilingue facilité par Paraglide.js pour l’expansion internationale
• Architecture modulaire où ajouter une fonctionnalité ne casse pas le reste
• Performance améliorée avec Svelte 5 par rapport à Angular
• Retours positifs des utilisateurs lors des enquêtes de satisfaction