PodClip: Create a Podcast App in a Weekend

Rapid Prototyping with Replit, AI Agents, and Minimal Manual Coding

The idea of creating an application in record time through vibe coding took shape during a weekend dedicated to experimentation. The project, named PodClip, aimed to develop a web platform that allows users to capture and organize podcast snippets directly from Spotify. In just five hours, Replit handled most of the development, from the user interface to database management and authentication. In fact, the time spent conceptualizing and writing this article about the experience almost exceeded the time dedicated to creating the application itself.

Inspiration Behind PodClip

Listening to podcasts is a daily passion of mine. Often, I am struck by phrases or explanations that resonate deeply with me, whether it's a new idiom, a clear explanation, or an answer to a lingering question. However, I find it challenging to remember the exact words or the original episode. It was this need to store and revisit these impactful moments that inspired the creation of PodClip.

Planned Features

The application was intended to integrate seamlessly with Spotify, my preferred podcast platform. The key features envisioned included:

• Connecting to the user's Spotify account
• A Start/Stop button to capture audio snippets
• Storing timestamps and transcriptions of the snippets
• Organizing the snippets in an accessible and searchable dashboard

Platform Choice

Among the many vibe coding platforms available, such as Cursor, Windsurf, Lovable, and Replit, I chose Replit. This decision was influenced by the fact that one of the founders of Replit contributed to the development of React. Replit offers a subscription, and I opted for Replit Core at $20 per month to take advantage of all its features.

Learning by Doing

To prepare, I listened to a podcast from Y Combinator that shared tips for vibe coding. I also watched tutorials on app creation and practical advice. These resources helped me understand how to integrate my Spotify account via Replit's Connectors feature.

Application Development

My first prompt was simple:

Build an application that allows me to mark snippets from my favorite podcasts on Spotify.

Quickly, I was able to see a preview of a sleek web application inspired by Spotify's design.

Snippet Addition Feature

The first version of the application focused on the Add Snippet feature. Users could search for a podcast episode and enter the timestamps for the desired snippet. Replit handled essential tasks, such as formatting the front-end to match Spotify's aesthetic and connecting to my Spotify account in the background.

However, the manual entry of timestamps did not align with the user experience I had envisioned. I had to refine my requests to improve this feature.

"Now Playing" Feature

For my next prompt, I specified my desire to add snippets while listening to a podcast:

I want to add snippets to PodClip while I listen to a podcast on Spotify. I want to click a button to start the snippet and another to mark the end. Is there a way to create a plugin or add-on that would open in the Spotify app?

The agent informed me that plugins or extensions would not work because Spotify does not allow third-party add-ons. However, several alternatives were possible:

• An integrated "Now Playing" widget within PodClip, allowing users to listen to Spotify in another browser tab.
• A bookmarklet or keyboard shortcut to save start and end timestamps.
• A quick capture page optimized for mobile.

I ultimately chose to develop the "Now Playing" widget.

Challenges with the Spotify API

After the agent completed the task, an issue arose with connecting to Spotify. PodClip could not call the playback API because Replit's Spotify connector was in development mode. The agent recommended a workaround by creating a manual mode where the user can search for an episode and use a built-in timer to mark the snippet boundaries.

While sufficient, this manual mode was not as user-friendly as I had hoped. However, I appreciated that the agent implemented a temporary workaround.

Episode Transcription Feature

I also wanted a way to capture snippets using episode transcriptions. Here’s the prompt I used:

I want to add a feature where I:

1. Select an episode
2. PodClip generates the episode transcription
3. I can search within the transcription
4. I can highlight text in the transcription and save it to My Snippets

The agent warned me that generating episode transcriptions would be resource-intensive. He proposed a multi-step approach:

• New "Episode Transcription" Page: After selecting an episode, a Generate Full Transcription button would be available.
• Segmented Transcription: The server would process the episode audio, break it into smaller segments, and transcribe each segment.
• Transcription Viewer: Once ready, the complete transcription would display with timestamps in the margin.

Limitations and Compliance with Guidelines

A significant limitation encountered is that Spotify does not provide access to raw podcast audio via its API. Therefore, PodClip neither downloads nor transcribes audio from Spotify but relies on publicly available podcast RSS feeds.

This approach allows PodClip to support transcription features while adhering to the platform's limitations and complying with Spotify's developer guidelines.