Creé una aplicación de recorte de podcasts en un fin de semana usando Vibe Coding

estado en todas partes últimamente. Algunas personas afirman que permitirá a una sola persona construir una empresa de mil millones de dólares.

Yo era escéptico.

En lugar de debatir las exageraciones, decidí realizar un pequeño experimento: ¿podría crear un producto real utilizando vibecoding en un solo fin de semana?

El resultado fue PodClip, una aplicación web que me permite capturar y organizar clips de episodios de podcasts en Spotify.

En aproximadamente cinco horas de trabajo, Replit generó la mayor parte de la aplicación, desde la interfaz de usuario hasta la base de datos y la autenticación. De hecho, probablemente dediqué más tiempo a organizar mis pensamientos y escribir este artículo que a crear la aplicación.

Esto es lo que pasó.

El problema

Siempre escucho podcasts y aprendo constantemente algo nuevo y útil. A menudo me encuentro con una frase o una explicación que me resuena. Podría ser un idioma nuevo, un concepto perfectamente explicado o la respuesta a una pregunta que me ha estado molestando. Esto sucede con mucha frecuencia, pero a menudo no puedo recordar las palabras exactas o qué episodio lo escuché. Quiero volver a ver estos clips, pero buscar en el historial de escucha lleva mucho tiempo. Necesito una forma sencilla de almacenar y organizar clips de podcasts para poder volver a visitar mis momentos favoritos. Esa es la inspiración detrás de PodClip, una aplicación para guardar todos tus clips de podcasts favoritos.

Meta

Imaginé una aplicación que se integraría con Spotify, mi plataforma de transmisión de podcasts preferida. Idealmente, quería un contenedor para poder usar esta función adicional mientras escuchaba la aplicación Spotify. Quería un botón de inicio/parada para capturar fácilmente el clip mientras lo escuchaba. Luego, la aplicación necesitaría almacenar y organizar mis clips en un tablero. El panel necesitaría una función de búsqueda para poder encontrar fácilmente clips antiguos. Para habilitar la función de búsqueda, la aplicación tendría que transcribir los clips.

Estos fueron los requisitos generales para mi aplicación:

Conectarme a una cuenta de Spotify, mi plataforma de streaming preferida. Agregar un botón Iniciar/Detener para capturar clips. Almacenar marcas de tiempo y transcripciones de clips. Organizar clips en un panel con capacidad de búsqueda.

¿Por qué replicar?

Escuché mencionar las mismas plataformas en charlas sobre codificación de vibraciones: Cursor, Windsurf, Lovable y Replit. Según mi limitada investigación, todos parecían intercambiables. Para ser honesto, decidí probar Replit primero porque uno de los fundadores ayudó a crear React.

Al igual que otras plataformas de codificación de vibraciones, Replit requiere una suscripción. Tengo la suscripción Replit Core que cuesta $20 por mes.

No estoy afiliado a Replit.

Edificio

Para prepararme, escuché un podcast de Y Combinator sobre los mejores consejos y trucos para la codificación por vibración. Para familiarizarme con Replit IDE y el conjunto de herramientas, vi el video oficial sobre cómo crear su primera aplicación y videos de consejos y trucos. El vídeo de consejos y trucos me mostró exactamente cómo integrar mi cuenta de Spotify utilizando la función Replit Connectors.

A continuación, llegó el momento de aprender haciendo. Empecé poco a poco. El mensaje inicial fue:

Crear una aplicación que me permita marcar clips de mis podcasts favoritos en Spotify

Minutos más tarde, me sorprendió la vista previa de una elegante aplicación web con el estilo de Spotify.

Agregar función de clip

La primera versión de la aplicación se centró en la función Agregar clip. Los usuarios pueden buscar un episodio de podcast y luego ingresar las marcas de tiempo del clip.

El mensaje inicial se encargó de las grandes tareas. Formateó la interfaz para que coincidiera con el estilo de Spotify. En el backend, se conectó a mi cuenta de Spotify y configuró el esquema de la base de datos. Replit incluso creó y ejecutó pruebas.

Todos los metadatos de los episodios que se muestran en PodClip, como el nombre del programa, el título del episodio, las marcas de tiempo y el arte, se extraen directamente de la API oficial de Spotify, de acuerdo con sus pautas para desarrolladores.

A pesar de este buen comienzo, ingresar marcas de tiempo manualmente no era la experiencia de usuario que tenía en mente. De ahora en adelante, tendría que ser más específico con el agente.

Función Reproduciendo ahora

Para mi siguiente mensaje, le expliqué cómo quería agregar un clip mientras escuchaba un podcast:

Quiero agregar clips a PodClip mientras escucho un podcast en Spotify. Quiero hacer clic en un botón para iniciar el clip y luego hacer clic en un botón para marcar el final. ¿Existe alguna forma de crear un complemento o complemento que se abra dentro de la aplicación Spotify? ¿Otras ideas para lograr esto?

En lugar de usar el modo Construir, usé el modo Planificar. De esta manera, el agente explicaría el proceso y lo dividiría en tareas en lugar de modificar automáticamente el código. Cambié al modo Plan porque no sabía si mi solicitud era posible y quería asegurarme de que fuera viable antes de que el agente dedicara tiempo a calcular los créditos.

El agente me informó que los complementos o extensiones no funcionarían ya que Spotify no permite complementos de terceros. Sin embargo, había alternativas:

Un widget complementario "Reproduciendo ahora" en el propio PodClip. El usuario tendría que escuchar Spotify en otra pestaña del navegador. Usando la API de Spotify, PodClip obtendría información sobre el episodio actual y la marca de tiempo. El usuario podría presionar un botón Iniciar/Detener en PodClip y la aplicación capturaría todos los detalles como programa, episodio, marcas de tiempo y transcripciones. Un bookmarklet del navegador o un atajo de teclado. El usuario haría clic en el marcador para registrar las marcas de tiempo de inicio y finalización. Luego, enviaría esta información a PodClip, pero el usuario aún necesitaría ingresar información del episodio. Aunque fue muy rápido de implementar, este enfoque estaba lejos de la experiencia de usuario perfecta que imaginé. Página de captura rápida compatible con dispositivos móviles. Este enfoque funciona igual que el widget, excepto que está más optimizado para un teléfono.

Decidí que la opción Widget sería la mejor. Volví al modo Construir y dejé que el agente se pusiera a trabajar.

Desafíos con la API de Spotify

Cuando el agente terminó, hubo un problema con la conexión de Spotify. PodClip no pudo llamar a la API de reproducción porque el conector Spotify de Replit está en modo de desarrollo. Como resultado, Replit no puede acceder a la API de reproducción, lo que significa que no puede cargar información sobre el episodio que el usuario está escuchando.

El agente recomendó una solución alternativa. Creó el modo manual. El usuario puede buscar un episodio y luego usar un temporizador incorporado para marcar los límites del clip mientras escucha Spotify en una pestaña separada del navegador. Es una forma de capturar el clip sin necesidad de la API de reproducción.

Si bien es suficiente, el modo manual no es tan fácil de usar como esperaba. Requiere que el usuario sincronice el temporizador PodClip con el episodio de Spotify, lo cual es una molestia. Sin embargo, aprecié que el agente implementara una solución provisional. Una vez que Replit tiene acceso a la API de reproducción, el código ya existe para obtener la información del episodio actual. Esta función del modo en vivo no se ha probado, pero me gusta que esté ahí. La aplicación está predeterminada en modo en vivo. Intenta llamar a la API de reproducción de Spotify y, si tiene éxito, incorpora el episodio actual, la marca de tiempo y los controles de reproducción. Si no tiene éxito, PodClip usa el modo manual.

Transcripción

Por último, quería una forma de capturar clips utilizando transcripciones de episodios. De esta manera, podría buscar la transcripción del clip y resaltarlo.

En este punto de mi viaje de codificación de vibraciones, aprendí que los mejores resultados se obtienen cuando divido mi visión en pasos. Aquí está el mensaje que utilicé:

Quiero agregar una función donde yo:

1. Selecciona un episodio

2. PodClip genera la transcripción del episodio.

3. Puedo buscar la transcripción

4. Puedo resaltar texto en la transcripción y guardarlo en Tus clips

El agente me advirtió que generar transcripciones de episodios consumiría muchos recursos. Cargos de transcripción de IA por minuto de audio. El agente recomendó el siguiente enfoque:

Nueva página "Transcripción del episodio": después de seleccionar un episodio, verás el botón "Generar transcripción completa". Al hacer clic en él, se inicia la transcripción en segundo plano. Transcripción fragmentada: el servidor procesa el audio del episodio disponible externamente, lo divide en segmentos más pequeños (de unos pocos minutos cada uno) y transcribe cada fragmento. La IA devuelve texto con marcas de tiempo, para que sepamos exactamente dónde cae cada oración en el episodio. Visor de transcripciones: una vez lista, la transcripción completa se muestra con marcas de tiempo en el margen. Una barra de búsqueda en la parte superior le permite filtrar/resaltar el texto coincidente. Resaltar para recortar: seleccione cualquier texto de la transcripción y aparecerá el botón "Guardar clip". Como conocemos las marcas de tiempo de cada segmento, PodClip establece automáticamente la hora de inicio/finalización en función de lo que resaltaste.

Una limitación importante con la que me encontré es que Spotify no proporciona acceso a audio de podcast sin procesar a través de su API. Si bien Spotify transmite muchos de los mismos podcasts disponibles en otros lugares, ofrece audio a través de su propia infraestructura protegida y no permite que aplicaciones de terceros descarguen o procesen ese audio directamente.

Debido a esto, PodClip no descarga ni transcribe audio de Spotify. En cambio, se basa en canales RSS de podcasts disponibles públicamente (como los indexados por Apple Podcasts), donde los archivos de audio se distribuyen intencionalmente para acceso abierto. En el modelo RSS, los creadores de podcasts alojan su audio en plataformas externas y los archivos deben ser descargados directamente por los reproductores de podcasts.

Este enfoque permite que PodClip admita funciones de transcripción respetando los límites de la plataforma y cumpliendo con las pautas para desarrolladores de Spotify.

Para manejar la transcripción, necesitaba integrar mi cuenta OpenAI usando los conectores Replit.

PÁGINA DE TRANSCRIPCIÓN: CÓMO FLUYEN LOS DATOS ────────────────────────────── ─────────────────────────────── EL USUARIO BÚSQUEDA DE EPISODIO │ ▼ Servidor PodClip │ ▼ API de búsqueda de iTunes │ ▼ URL de audio del episodio completo (MP3/AAC público en el CDN del podcast) ────────────────────────────── ─────────────────────────────── EL USUARIO HACE CLIC EN "GENERAR TRANSCRIPCIÓN COMPLETA" │ ▼ PodClip Server /api/episode-transcripts │ ▼ ffmpeg descarga el audio del episodio completo desde el CDN del podcast (p. ej., Traffic.libsyn.com) │ ▼ ffmpeg divide el audio en fragmentos de 2 minutos │ ├── ► fragmento 1 ── ► Voz a texto de OpenAI ── ► texto ├── ► fragmento 2 ── ► Voz a texto de OpenAI ── ► texto ├── ► fragmento 3 ── ► Voz a texto de OpenAI ── ► texto └── ► … │ ▼ segmentos unidos con marcas de tiempo almacenadas en PostgreSQL │ ▼ encuestas frontend cada 3 segundos ── ► muestra la barra de progreso hasta que se completa ── ► muestra la transcripción completa

La aplicación transcribe en fragmentos de dos minutos. Como resultado, la marca de tiempo del clip destacado no es muy precisa. Sin embargo, me importa más el contenido que la marca de tiempo exacta.

Producto final y aplicación de publicación

Al final, tuve una aplicación funcional para almacenar todas mis citas de podcasts favoritas. Replit facilita la publicación de la aplicación para otros usuarios. Manejó la autenticación de inicio de sesión para que los usuarios puedan crear su propia cuenta PodClip. Replit también agregó un botón de comentarios.

Aquí hay un enlace a la aplicación publicada: aplicación PodClip. ¡No dude en utilizar el botón Comentarios! Tengo mucha curiosidad por saber qué se podría mejorar.

Aquí hay un enlace al repositorio de GitHub: repositorio PodClip

No llevé la cuenta de exactamente cuántas horas dediqué a este proyecto, ya que podía avisarle al agente y luego alejarme mientras funcionaba. Calculo que pasé entre 3 y 5 horas en total en el transcurso de un fin de semana. Las partes que consumieron más tiempo fueron avisar al agente y probar las funciones por mí mismo.

Trabajo futuro

En general considero esta aplicación un éxito. Sé que lo voy a utilizar y es mucho mejor que mi sistema anterior de almacenar citas de podcasts en la aplicación Notas. Sin embargo, todavía hay margen de mejora.

Veamos cómo se compara el producto final con los requisitos que enumeré al principio:

La mayor tarea pendiente es obtener información del episodio actual y reproducirlo para el modo en vivo en la función Reproducción en curso. Si bien el código para el modo en vivo ya existe en la aplicación, aún requiere pruebas. Cuándo (o si) eso sucederá depende de cuándo Spotify permita el acceso a la API de reproducción.

Lo que aprendí sobre la codificación Vibe

Mis mayores sorpresas sobre la codificación de vibraciones:

El agente manejó la mayor parte de la arquitectura de la aplicación automáticamente. Las indicaciones breves y simples fueron más que adecuadas. Las limitaciones de la plataforma (API de Spotify) fueron el mayor obstáculo.

El proceso me recordó mirar la clave de respuestas antes de intentar de todo corazón resolver el conjunto de problemas. En otras palabras, la codificación por vibración es excelente para la creación de prototipos, pero no necesariamente desarrolla habilidades de codificación. Y eso está bien. El objetivo del proyecto es crear rápidamente un prototipo de un MVP, que es exactamente lo que se logró.

Para los desarrolladores, la codificación por vibración puede parecer como saltarse pasos en el proceso de aprendizaje. Pero en el caso de la experimentación y la creación rápida de prototipos, reduce drásticamente la barrera para convertir una idea en un producto funcional.

Para cualquiera que quiera comenzar a codificar en Vibe, mi consejo es encontrar un problema y sumergirse en él. Elija un problema que realmente le interese para mantenerse motivado mientras aprende a usar el IDE y cómo avisar mejor al agente. Inicialmente, la curva de aprendizaje de la codificación vibe parecía empinada con muchas opiniones sobre las distintas plataformas y mejores prácticas. Pensé incorrectamente que necesitaba saber más antes de comenzar. No lo hice. Desearía no dejar que toda esa charla me intimidara. Como la mayoría de las cosas, la codificación por vibración es más fácil de aprender haciendo.

PodClip no me convertirá en un unicornio emprendedor en solitario. Sin embargo, quizás algún día se incluya una función similar a PodClip con Spotify.

Conclusión

Gracias por leer mi artículo. Conéctese conmigo en LinkedIn, Twitter o Instagram.

Todos los comentarios son bienvenidos. Siempre estoy ansioso por aprender nuevas o mejores formas de hacer las cosas.

No dude en dejar un comentario o comunicarse conmigo en [correo electrónico protegido].

Referencias