Organisme de formation2025
Acadyo
Plateforme e-learning fullstack pour la gestion de cours, apprenants et instructeurs.
- React
- TypeScript
- Symfony 7
- MongoDB
Projet personnel
TranscribeX
Application de conversion de fichiers audio, images et documents en ligne via l'API CloudConvert.
Aperçu privé
Le besoin
Projet personnel réalisé pour explorer l'intégration d'une API de conversion de fichiers tierce. L'objectif était de maîtriser CloudConvert, la gestion de fichiers côté client avec react-dropzone, le traitement de fichiers binaires avec jszip et ffprobe, et la gestion d'état React avec useState.
Le résultat
TranscribeX permet de convertir rapidement des fichiers audio, images et documents dans de nombreux formats de sortie. L'utilisateur sélectionne le type de fichier, dépose son fichier dans la dropzone et choisit le format cible. Les conversions sont traitées en temps réel via l'API CloudConvert.
- Types de fichiers
- 3
- CloudConvert
- API
- Export groupé
- ZIP
- Conversion
- Live
Sous le capot
Défis rencontrés et technologies utilisées
Cette partie s'adresse aux développeurs et aux curieux : les obstacles techniques rencontrés et les outils choisis.
Défis rencontrés
Problème : Gestion des fichiers binaires côté client
La conversion de fichiers audio nécessitait d'extraire des métadonnées (durée, codec, bitrate) avant envoi à CloudConvert pour valider la compatibilité du format de sortie.
Solution : Intégration de ffprobe via API route Next.js
Création d'une API route Next.js qui exécute ffprobe côté serveur pour analyser les métadonnées audio avant de déclencher la conversion CloudConvert. Le résultat est renvoyé au client pour affichage.
Problème : Téléchargement de plusieurs fichiers convertis
Lorsque l'utilisateur convertissait plusieurs fichiers simultanément, il fallait les regrouper en une seule archive téléchargeable plutôt que de déclencher N téléchargements.
Solution : Génération d'une archive ZIP avec jszip
Utilisation de jszip côté client pour regrouper tous les fichiers convertis dans une archive ZIP unique, téléchargeable en un seul clic. Le store Zustand centralise l'état de chaque conversion en cours.
Problème : Gestion des états de conversion en temps réel
Chaque fichier dropé passe par plusieurs états (en attente, en cours, terminé, erreur) et l'UI devait refléter ces transitions proprement pour chaque fichier indépendamment.
Solution : useState avec un tableau de jobs indexés
Un useState local contenant un tableau d'objets, chacun représentant un fichier avec son état, sa progression et son résultat. Les mises à jour sont faites par immutabilité via map() pour ne re-rendre que les composants concernés.
Technologies utilisées
Autres réalisations
Tous les projets
Projet personnel2024
MovieStream
Application de recherche de films en temps réel via l'API TMDB.
- React
- TMDB API
- Axios
- GSAP
Un projet similaire en tête ?
Une idée de plateforme, un site à créer, un besoin métier à digitaliser — discutons-en.
Me contacter