PodClip : créer une app de podcasts en un week-end

Prototypage rapide avec Replit, agents IA et peu de codage manuel

L'idée de créer une application en un temps record grâce au vibe coding a pris forme lors d'un week-end dédié à l'expérimentation. Le projet, baptisé PodClip, visait à développer une plateforme web permettant de capturer et d'organiser des extraits de podcasts directement depuis Spotify. En seulement cinq heures, Replit a pris en charge la majeure partie du développement, allant de l'interface utilisateur à la gestion de la base de données et l'authentification. En réalité, le temps passé à conceptualiser et rédiger l'article sur cette expérience a presque dépassé celui consacré à la création de l'application elle-même.

Inspiration derrière PodClip

L'écoute de podcasts est une passion qui m'accompagne au quotidien. Souvent, je suis frappé par des phrases ou des explications qui me marquent profondément, qu'il s'agisse d'un idiome nouveau, d'une explication limpide ou d'une réponse à une question persistante. Cependant, il m'est difficile de me souvenir précisément des mots ou de l'épisode d'origine. C'est ce besoin de pouvoir stocker et revisiter ces moments marquants qui a inspiré la création de PodClip.

Fonctionnalités envisagées

L'application devait s'intégrer harmonieusement avec Spotify, ma plateforme de podcasts de prédilection. Les fonctionnalités clés envisagées incluaient :

• La connexion au compte Spotify de l'utilisateur
• Un bouton Démarrer/Arrêter pour capturer les extraits audio
• Le stockage des horodatages et des transcriptions des extraits
• L'organisation des extraits dans un tableau de bord accessible et consultable

Choix de la plateforme

Parmi les nombreuses plateformes de vibe coding disponibles, telles que Cursor, Windsurf, Lovable et Replit, mon choix s'est porté sur Replit. Ce choix a été influencé par le fait qu'un des fondateurs de Replit a contribué au développement de React. Replit propose un abonnement, et j'ai opté pour le Replit Core à 20 $ par mois pour bénéficier de toutes ses fonctionnalités.

Apprentissage par la pratique

Pour me préparer, j'ai écouté un podcast de Y Combinator qui partageait des astuces pour le vibe coding. J'ai également visionné des tutoriels sur la création d'applications et des conseils pratiques. Ces ressources m'ont aidé à comprendre comment intégrer mon compte Spotify via la fonctionnalité Connectors de Replit.

Développement de l'application

Mon premier prompt était simple :

Construire une application qui me permet de marquer des extraits de mes podcasts préférés sur Spotify.

Rapidement, j'ai pu voir un aperçu d'une application web élégante, inspirée du design de Spotify.

Fonctionnalité d'ajout d'extraits

La première version de l'application se concentrait sur la fonctionnalité Ajouter un extrait. Les utilisateurs pouvaient rechercher un épisode de podcast et entrer les horodatages pour l'extrait souhaité. Replit a géré les tâches essentielles, comme le formatage du front-end pour correspondre à l'esthétique de Spotify et la connexion à mon compte Spotify en arrière-plan.

Cependant, la saisie manuelle des horodatages ne correspondait pas à l'expérience utilisateur que j'avais imaginée. J'ai donc dû affiner mes demandes pour améliorer cette fonctionnalité.

Fonctionnalité "Maintenant en cours"

Pour mon prompt suivant, j'ai précisé mon souhait d'ajouter des extraits pendant l'écoute d'un podcast :

Je veux ajouter des extraits à PodClip pendant que j'écoute un podcast sur Spotify. Je veux cliquer sur un bouton pour commencer l'extrait et un autre pour marquer la fin. Existe-t-il un moyen de créer un plugin ou un add-on qui s'ouvrirait dans l'application Spotify ?

L'agent m'a informé que les plugins ou extensions ne fonctionneraient pas car Spotify n'autorise pas les add-ons tiers. Cependant, plusieurs alternatives étaient envisageables :

• Un widget "Maintenant en cours" intégré à PodClip, permettant d'écouter Spotify dans un autre onglet du navigateur.
• Un bookmarklet ou un raccourci clavier pour enregistrer les horodatages de début et de fin.
• Une page de capture rapide optimisée pour mobile.

J'ai finalement choisi de développer le widget "Maintenant en cours".

Défis avec l'API Spotify

Après que l'agent ait terminé, un problème est survenu avec la connexion à Spotify. PodClip ne pouvait pas appeler l'API de lecture car le connecteur Spotify de Replit était en mode développement. L'agent a recommandé un contournement en créant un mode manuel où l'utilisateur peut rechercher un épisode et utiliser un minuteur intégré pour marquer les limites des extraits.

Bien que suffisant, ce mode manuel n'était pas aussi convivial que je l'espérais. Cependant, j'ai apprécié que l'agent ait mis en place un contournement temporaire.

Fonctionnalité de transcription d'épisodes

Je voulais également une manière de capturer des extraits à l'aide des transcriptions d'épisodes. Voici le prompt que j'ai utilisé :

Je veux ajouter une fonctionnalité où je :

1. Sélectionne un épisode
2. PodClip génère la transcription de l'épisode
3. Je peux rechercher dans la transcription
4. Je peux surligner du texte dans la transcription et l'enregistrer dans Mes extraits

L'agent m'a averti que la génération de transcriptions d'épisodes serait très gourmande en ressources. Il a proposé une approche en plusieurs étapes :

• Nouvelle page "Transcription d'épisode" : après avoir sélectionné un épisode, un bouton Générer la transcription complète serait disponible.
• Transcription par segments : le serveur traiterait l'audio de l'épisode, le diviserait en segments plus petits et transcrirait chaque segment.
• Visionneuse de transcription : une fois prête, la transcription complète s'afficherait avec des horodatages dans la marge.

Limitations et respect des directives

Une limitation importante rencontrée est que Spotify ne fournit pas d'accès à l'audio brut des podcasts via son API. Par conséquent, PodClip ne télécharge ni ne transcrit l'audio de Spotify, mais s'appuie sur des flux RSS de podcasts disponibles publiquement.

Cette approche permet à PodClip de prendre en charge les fonctionnalités de transcription tout en respectant les limites de la plateforme et en adhérant aux directives des développeurs de Spotify.