Vue d’ensemble

U Academy est une plateforme d’apprentissage en ligne conçue pour proposer des cours, des ressources pédagogiques et du contenu éducatif à travers une expérience utilisateur moderne et engageante. La plateforme inclut des parcours d’apprentissage dédiés pour les étudiants, des fonctionnalités de gestion de contenu pour les formateurs, ainsi qu’un système structuré pour accéder aux cours, aux fichiers et aux articles de blog.

Mon rôle sur ce projet était entièrement concentré sur le frontend. Le backend et la logique métier étaient gérés par une agence externe, tandis que j’ai conçu et développé toute l’application côté client à partir de zéro, en m’appuyant sur leurs APIs existantes.

Périmètre produit

La plateforme a été construite autour de plusieurs axes principaux :

• une expérience apprenant avec des cours, un suivi de progression et des quiz
• un parcours orienté formateur pour publier des supports pédagogiques
• une bibliothèque de ressources pour les fichiers et documents
• une section blog avec des fonctionnalités d’édition de contenu
• une expérience de tableau de bord soignée, pensée pour être plus dynamique et motivante que les plateformes d’e-learning traditionnelles

L’objectif n’était pas seulement de rendre la plateforme fonctionnelle, mais aussi de lui donner une identité visuelle distinctive et moderne.

Fonctionnalités clés

• Pages de cours avec contenu vidéo et textes d’accompagnement
• Système de déverrouillage progressif des chapitres
• Suivi visuel de la progression d’apprentissage
• Étapes de quiz entre les chapitres pour valider la progression
• Tableau de bord conçu avec une approche plus ludique
• Bibliothèque de fichiers pour les ressources pédagogiques
• Prévisualisation des images, fichiers audio et PDFs
• Section blog avec éditeur dédié
• Gestion de l’upload d’images dans les parcours d’édition de contenu
• Interface entièrement responsive sur tous les appareils

Mon rôle

J’étais responsable de toute la couche frontend du projet.

Mon travail incluait :

• l’architecture et l’implémentation frontend
• la direction UI et le raffinement visuel
• l’intégration des APIs backend dans le frontend
• l’adaptation responsive sur différentes tailles d’écran
• le travail d’animation et de finition des interactions
• l’implémentation de l’interface de gestion des cours
• l’implémentation de l’expérience d’édition du blog
• la gestion des médias côté client
• l’intégration du lecteur vidéo

Ce projet a également marqué ma première vraie expérience avec Vue.js et Nuxt.js, ce qui l’a rendu particulièrement important dans ma progression technique.

Approche design

L’un de mes principaux objectifs était de m’éloigner des codes visuels habituels des plateformes d’e-learning classiques.

J’ai introduit un langage d’interface plus moderne avec :

• un fort niveau de finition visuelle
• des éléments d’interface inspirés du glassmorphism
• des animations au survol et des effets d’échelle
• une sensation de tableau de bord plus premium et immersive
• une expérience d’apprentissage plus claire et plus engageante

L’intention était de rendre la plateforme moins rigide et plus motivante à utiliser au quotidien.

Défi technique

La partie la plus complexe du projet a été le gestionnaire de cours et, plus largement, la gestion frontend de structures de contenus pédagogiques complexes.

Même si le backend était propre, le frontend devait coordonner beaucoup de données interconnectées :

• les cours
• les chapitres
• les états de progression verrouillés et déverrouillés
• les quiz
• les médias
• les relations entre contenus
• les mises en page responsives

Cela a rendu l’interface de cours particulièrement exigeante à concevoir et à implémenter proprement.

Un autre défi important concernait le responsive. La plateforme avait une interface dense, avec de nombreux écrans riches en contenu, donc rendre l’ensemble fluide et lisible sur tous les appareils a demandé beaucoup d’attention. Tailwind CSS a permis d’accélérer les itérations et de maintenir une bonne cohérence pendant ce processus.

Points techniques clés

Certaines parties du frontend ont été particulièrement intéressantes à développer :

• l’interface de progression des cours avec verrouillage des chapitres et validation
• l’éditeur de blog avec gestion des images et des flux de contenu compatibles Markdown
• la bibliothèque de ressources avec prévisualisation des fichiers
• l’expérience de leçon basée sur la vidéo
• la transformation responsive d’interfaces desktop denses en mises en page mobiles utilisables

Ce projet est un bon exemple de la manière dont le travail frontend peut aller bien au-delà d’une simple intégration et impliquer de la réflexion produit, de la stratégie UX, une identité visuelle et une architecture d’interface.

Pourquoi ce projet est important

U Academy est un projet important dans mon portfolio, car il montre ma capacité à intégrer un écosystème produit existant, à comprendre une structure backend déjà établie, et à construire une expérience frontend complète, soignée, cohérente et moderne.

Il reflète également l’une de mes forces : transformer des exigences produit complexes en interfaces à la fois visuellement raffinées et pratiques à utiliser.

Statut

Le projet est propriétaire et le repository est privé. Aucune démo publique n’est actuellement disponible.