J'ai créé une application de découpage de podcasts en un week-end grâce à Vibe Coding

J'ai créé une application de découpage de podcasts en un week-end grâce à Vibe Coding

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

J'ai décidé de mener une petite expérience : pourrais-je créer un produit réel en utilisant le vibe coding en un seul week-end ? Le résultat fut PodClip, une application web qui me permet de capturer et d'organiser des extraits d'épisodes de podcasts sur Spotify.

En environ cinq heures de travail, Replit a généré la majeure partie de l'application, de l'interface front-end à la base de données et à l'authentification. En fait, j'ai probablement passé plus de temps à organiser mes pensées et à écrire cet article qu'à construire l'application.

Inspiration derrière PodClip

Écouter des podcasts est une activité que j'apprécie beaucoup. Je tombe souvent sur des phrases ou des explications qui résonnent en moi. Cela peut être un nouvel idiome, un concept parfaitement expliqué ou la réponse à une question qui me tracasse. Cependant, je peine souvent à me souvenir des mots exacts ou de l'épisode d'où cela provient. Je souhaitais donc une méthode simple pour stocker et organiser ces extraits afin de pouvoir revisiter mes moments préférés. C'est ainsi qu'est née l'idée de PodClip.

Fonctionnalités envisagées

J'imaginais une application intégrée à Spotify, ma plateforme de streaming de podcasts préférée. Voici les principales exigences que j'avais en tête :

• Connecter le compte Spotify
• Ajouter un bouton Démarrer/Arrêter pour capturer les extraits
• Stocker les horodatages et les transcriptions des extraits
• Organiser les extraits dans un tableau de bord consultable

Choix de la plateforme

J'ai entendu parler de plusieurs plateformes de vibe coding, notamment Cursor, Windsurf, Lovable et Replit. J'ai décidé d'essayer Replit en premier, car l'un des fondateurs a aidé à créer React. Replit nécessite un abonnement, et j'ai opté pour l'abonnement Replit Core à 20 $ par mois.

Apprentissage par la pratique

Pour me préparer, j'ai écouté un podcast de Y Combinator sur les meilleures astuces pour le vibe coding. J'ai également visionné des vidéos sur la création de ma première application et des conseils pratiques. Cela m'a permis de comprendre comment intégrer mon compte Spotify grâce à 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.

Peu de temps après, j'étais émerveillé par l'aperçu d'une application web élégante, stylée comme Spotify.

Fonctionnalité d'ajout d'extraits

La première itération de l'application se concentrait sur la fonctionnalité Ajouter un extrait. Les utilisateurs pouvaient rechercher un épisode de podcast et saisir les horodatages pour l'extrait. Replit a pris en charge les tâches majeures, formatant le front-end pour correspondre au style de Spotify et connectant mon compte Spotify en arrière-plan.

Malgré ce bon départ, la saisie manuelle des horodatages ne correspondait pas à l'expérience utilisateur que j'avais en tête. J'ai donc dû être plus précis dans mes demandes.

Fonctionnalité "Maintenant en cours"

Pour mon prompt suivant, j'ai expliqué comment je voulais ajouter un extrait pendant que j'écoutais 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 possibles :

• Un widget "Maintenant en cours" dans PodClip lui-même, où l'utilisateur écouterait Spotify dans un autre onglet de 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 opté pour l'option du widget.

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.