Stage Ermes Solutions
Développeur Fullstack & DevOps
La Technopole
Développement complet de "Meditypno", une infrastructure VOD (Video On Demand)
autonome.
Création d'une plateforme de streaming sécurisée type Netflix, de l'architecture serveur jusqu'à
l'interface utilisateur et l'administration.
1. Contexte de l'Entreprise
Basée à la Technopole Hélioparc à Pau, l'entreprise Ermes Solutions avait des besoins informatiques spécifiques pour développer son activité.
L'objectif principal était de concevoir "Meditypno", une plateforme VOD complète permettant d'héberger, de sécuriser et de monétiser des contenus vidéos. Ce projet visait à offrir une solution autonome pour la diffusion de formations et de médias payants, avec une gestion simplifiée des abonnements et contenus.
2. Architecture Technique
Conception d'un pipeline d'encodage vidéo automatisé et conteneurisation complète. L'objectif était de créer un système "Zéro Clic" : dès qu'une vidéo est déposée, elle est détectée, encodée et mise en ligne automatiquement.
Flux de Données :
- 📂 Ingestion : Surveillance de dossier via Chokidar.
- ⚙️ Traitement : Transcodage HLS adaptatif via FFmpeg (Node.js).
- 🐳 Infrastructure : Orchestration Docker (Front, Back, DB, Caddy).
- 🔒 Sécurité : Reverse Proxy Caddy avec SSL Automatique.
Architecture globale du pipeline VOD et de la stack Docker.
3. Interface Publique (Vitrine)
Développement d'une Landing Page immersive en Vue.js pour présenter le produit. Le design reprend les codes des plateformes de streaming (Style Netflix/Zen) avec une mise en page aérée et visuelle.
Landing Page : Hero Section immersive.
Offres & Tarifs - Les tarifs sont récupérés dynamiquement via Stripe.
Gestion d'Incident - Mode maintenance activable à chaud par l'administrateur.
4. Authentification Sécurisée
Mise en place d'un système robuste basé sur JWT (JSON Web Tokens). L'accès au contenu est strictement protégé : middleware de vérification sur le backend et Navigation Guards sur le frontend (Vue Router).
Sécurité :
- 🔐 Tokens session longue (30 jours)
- 🚫 Protection Brute-Force (Rate Limiting)
- 👁️ Toggle visibilité mot de passe
Interface de Connexion.
Interface d'Inscription.
5. Paiement & Abonnements
Intégration complète de l'API Stripe pour la gestion des abonnements récurrents. Le système gère automatiquement les droits d'accès (Segmentation : Meditypno, Hypnolangue, Kids) via Webhooks.
Un système de "Codes d'activation" a également été développé pour permettre la vente physique d'abonnements sans CB.
Tunnel d'achat : Sélection de l'offre.
Checkout sécurisé Stripe.
6. L'Application (Espace Membre)
Une fois connecté, l'utilisateur accède à "Meditypno", l'interface de streaming. Développement d'un lecteur vidéo HLS sur mesure (VideoPlayer.vue) et d'une navigation fluide.
Espace Membre : Accueil personnalisé.
Catalogue : Grille de contenu avec filtrage par tags.
7. Back-Office Administrateur
Développement d'un Dashboard complet pour donner une autonomie totale à l'entreprise. L'administration permet de piloter le contenu, les utilisateurs et les ventes sans toucher au code.
Pilotage Global
Interrupteur de maintenance, Ajustement dynamique des prix Stripe.
CRM & Utilisateurs
Gestion des abonnés, Export CSV, Assignation manuelle.
Gestion de Contenu
Édition des métadonnées, Tags, et Vues.
Ingestion Vidéo
Upload Drag & Drop avec barre de progression temps réel.
Vente Physique & Partenariats
Interface dédiée à la génération massive de codes d'activation (pour cartes cadeaux ou vente hors ligne). Permet d'exporter des listes CSV de codes valides pour les 3 types d'abonnements.
8. Monitoring & Analytics
Intégration d'outils de suivi pour garantir la performance et comprendre l'usage de la plateforme. Utilisation de solutions respectueuses de la vie privée (Umami) et de métriques en temps réel.
Dashboard Umami : Suivi des visiteurs et des performances en temps réel.
Découvrir le projet en live
Voir le site(Le site est en production et accessible au public)