I Built a Podcast Clipping App in One Weekend Using Vibe Coding

been in all places currently. Some people claim it’s going to enable a single person to construct a billion-dollar company.

I used to be skeptical.

As a substitute of debating the hype, I made a decision to run a small experiment: could I construct an actual product using vibe coding in a single weekend?

The result was PodClip, an internet app that lets me capture and organize clips from podcast episodes on Spotify.

In about five hours of labor, Replit generated most of the applying—from the front-end interface to the database and authentication. In actual fact, I probably spent more time organizing my thoughts and writing this text than I did constructing the app.

Here’s what happened.

The Problem

I’m at all times listening to podcasts and consistently learning something latest and useful. I often come across a phrase or a proof that resonates with me. It may very well be a brand new idiom, a superbly explained concept, or the reply to an issue that’s been bugging me. This happens so continuously, but I often can’t remember the precise words or which episode I heard it. I need to revisit these clips, but looking through listening history is time-consuming. I want a pain-free approach to store and organize podcast clips so I can revisit my favorite moments. That’s the inspiration behind PodClip, an app to avoid wasting all of your favorite podcast clips. 

Goal

I envisioned an app that may integrate with Spotify, my preferred podcast streaming platform. Ideally, I wanted a wrapper so I could use this extra feature while listening to the Spotify app. I wanted a start/stop button to simply capture the clip while listening. Then, the app would wish to store and organize my clips on a dashboard. The dashboard would wish a search feature so I could easily find old clips. To enable the search feature, the app would wish to transcribe the clips.

Here were the big-picture requirements for my app:

1. Connect with Spotify account, my preferred streaming platform
2. Add a Start/Stop button to capture clips
3. Store clip timestamps and transcripts
4. Organize clips in searchable dashboard

Why Replit?

I heard the identical platforms mentioned in talks about vibe coding: Cursor, Windsurf, Lovable, and Replit. From my limited research, all of them seemed interchangeable. To be honest, I made a decision to try Replit first because one among the founders helped create React.

Like other vibe coding platforms, Replit requires a subscription. I even have the Replit Core subscription which costs $20 per 30 days.

I’m not affiliated with Replit.

Constructing

To organize, I listened to a Y combinator podcast about one of the best suggestions and tricks for vibe coding. To familiarize myself with the Replit IDE and toolset, I watched the official constructing your first app and suggestions and tricks videos. The information and tricks video showed me exactly find out how to integrate my Spotify account using the Replit Connectors feature.

Next, it was time to learn by doing. I began small. The initial prompt was:

Minutes later, I used to be amazed by the preview of a sleek web app styled similar to Spotify.

Add Clip Feature

The primary iteration of the app centered across the Add Clip feature. Users could seek for a podcast episode after which input the time stamps for the clip.

The initial prompt took care of the large tasks. It formatted the frontend to match Spotify’s style. On the backend, it connected to my Spotify account and arrange the database schema. Replit even created and executed tests.

All episode metadata shown in PodClip—corresponding to show name, episode title, timestamps, and artwork—is pulled directly from Spotify’s official API, in keeping with their developer guidelines.

Despite this strong start, manually inputting timestamps was not the user experience I had in mind. Going forward, I’d should be more specific with the agent.

Now Playing Feature

For my next prompt, I explained how I desired to add to a clip while listening to a podcast:

I need so as to add clips to PodClip while i’m listening to a podcast on spotify. I need to click a button to start out the clip after which click a button to mark the top. Is there a way create a plug in or add-on that may open inside the Spotify app? Other ideas to perform this?

As a substitute of using Construct mode, I used Plan mode. This fashion the agent would explain the method and break it into tasks as an alternative of routinely tinkering with the code. I switched to Plan mode because I didn’t know if my request was possible, and desired to ensure that it was viable before the agent frolicked and computing credits.

The agent informed me that plugins or extensions wouldn’t work since Spotify doesn’t allow third-party add-ons. Nevertheless, there have been alternatives:

1. A companion “Now Playing” widget in PodClip itself. The user would should hearken to Spotify on one other browser tab. Using Spotify’s API, PodClip would pull-in info concerning the current episode and the timestamp. The user could hit a Start/Stop button in PodClip and the app would capture all the small print like show, episode, timestamps, and transcripts.
2. A browser bookmarklet or keyboard shortcut. The user would click the bookmarklet to record the beginning and stop timestamps. Then, it will send this info to PodClip, however the user would still must input episode info. Although very quick to implement, this approach was removed from the seamless user experience I envisioned.
3. Mobile-friendly quick-capture page. This approach works similar to the widget except it more optimized for a phone.

I made a decision the Widget option could be best. I toggled back to Construct mode and let the agent go to work.

Challenges with Spotify API

After the agent finished, there was a problem with the Spotify connection. PodClip was unable to call the playback API because Replit’s Spotify connector is in development mode. In consequence, Replit can’t access the playback API meaning it could’t load in info concerning the episode the user is listening to.

The agent beneficial a workaround. It created manual mode. The user can seek for an episode, then use a built-in timer to mark clip boundaries while listening to Spotify in a separate browser tab. It’s a approach to capture the clip with no need the playback API.

While sufficient, manual mode isn’t as user friendly as I hoped. It requires the user to sync the PodClip timer with Spotify episode, which is a hassle. Nevertheless, I appreciated that the agent implemented a workaround as a stopgap. Once Replit has access to the playback API, the code already exists to tug in current episode info. This live mode feature is untested, but I like that it’s there. The app defaults to live mode. It tries to call the Spotify playback API and if successful, pulls in the present episode, timestamp, and playback controls. If unsuccessful, PodClip uses manual mode.

Transcript

Lastly, I wanted a approach to capture clips using episode transcripts. This fashion, I could search the transcript for the clip and highlight it.

At this point in my vibe coding journey, I learned one of the best results occur after I break down my vision into steps. Here’s the prompt I used:

I need so as to add a feature where I:

1. Select an episode

2. PodClip generates the transcript of the episode

3. I can search the transcript

4. I can highlight text within the transcript and put it aside to Your Clips

The agent warned me that generating episode transcripts could be very resource intensive. AI transcription charges per minute of audio. The agent beneficial the next approach:

1. Latest “Episode Transcript” page — after choosing an episode, you’d see a “Generate Full Transcript” button. Clicking it kicks off transcription within the background.
2. Chunked transcription — the server processes externally available episode audio, splits it into smaller segments (a number of minutes each), and transcribes each chunk. The AI returns text with timestamps, so we all know exactly where each sentence falls within the episode.
3. Transcript viewer — once ready, the total transcript displays with timestamps within the margin. A search bar at the highest helps you to filter/highlight matching text.
4. Highlight to clip — select any text within the transcript, and a “Save Clip” button appears. Since we all know the timestamps for every segment, PodClip routinely sets the beginning/end time based on what you highlighted.

One vital limitation I bumped into is that Spotify doesn’t provide access to raw podcast audio through its API. While Spotify streams most of the same podcasts available elsewhere, it delivers audio through its own protected infrastructure and doesn’t allow third-party apps to download or process that audio directly.

For this reason, PodClip doesn’t download or transcribe audio from Spotify. As a substitute, it relies on publicly available podcast RSS feeds (corresponding to those indexed by Apple Podcasts), where audio files are intentionally distributed for open access. Within the RSS model, podcast creators host their audio on external platforms, and the files are supposed to be directly downloaded by podcast players.

This approach allows PodClip to support transcription features while respecting platform boundaries and adhering to Spotify’s developer guidelines.

To handle the transcription, I needed to integrate my OpenAI account using the Replit connectors.

TRANSCRIPT PAGE — HOW DATA FLOWS
─────────────────────────────────────────────────────────────

  USER SEARCHES FOR EPISODE
          │
          ▼
    PodClip Server
          │
          ▼
    iTunes Search API
          │
          ▼
    full episode audio URL
    (public MP3/AAC on podcast CDN)

─────────────────────────────────────────────────────────────

  USER CLICKS "GENERATE FULL TRANSCRIPT"
          │
          ▼
    PodClip Server
    /api/episode-transcripts
          │
          ▼
    ffmpeg downloads full episode audio
    from podcast CDN (e.g. traffic.libsyn.com)
          │
          ▼
    ffmpeg splits audio into 2-minute chunks
          │
          ├──► chunk 1 ──► OpenAI speech-to-text ──► text
          ├──► chunk 2 ──► OpenAI speech-to-text ──► text
          ├──► chunk 3 ──► OpenAI speech-to-text ──► text
          └──► ...
          │
          ▼
    segments stitched along with timestamps
    stored in PostgreSQL
          │
          ▼
    frontend polls every 3s ──► shows progress bar
    until complete ──► displays full transcript

The app transcribes in two minute chunks. In consequence, the timestamp of the highlight clip isn’t very precise. Nevertheless, I care more concerning the content than the precise timestamp.

End Product & Publishing App

In the long run, I had a working app to store all my favorite podcast quotes. Replit makes it easy to publish the app for other users. It handled the login authentication so users can create their very own PodClip account. Replit also added a Feedback button.

Here’s a link to the published app: PodClip app. Please don’t be shy about using the Feedback button! I’m very curious to know what may very well be improved.

Here’s a link to the GitHub repo: PodClip repo

I didn’t keep track of exactly what number of hours I spent on this project since I could prompt the agent after which step away while it worked. I estimate I spent about 3 to five hours total over the course of a weekend. Probably the most time consuming parts were prompting the agent and testing out the features for myself.

Future Work

Overall, I consider this app successful. I do know I’m going to make use of it, and it’s a lot better than my previous system of storing podcast quotes within the Notes app. Nevertheless, there continues to be room for improvement.

Let’s see how the ultimate product compares to the necessities I listed on the outset:

The most important remaining task is pulling in current episode info and playback for live mode within the Now Playing feature. While the code for live mode already exists within the app, it still requires testing. When (or if) that may occur is dependent upon when the Spotify allows access to the playback API.

What I Learned About Vibe Coding

My biggest surprises about vibe coding:

1. The agent handled most of the applying architecture routinely
2. Short and easy prompts were greater than adequate
3. Platform limitations (Spotify API) were the largest blocker

The means of jogged my memory of the reply key before wholeheartedly attempting to work the issue set. In other words, vibe coding is great for prototyping but doesn’t necessarily construct coding skill. And that’s OK. The goal of the project to rapidly prototype a MVP, which is strictly what this achieved.

For developers, vibe coding may feel like skipping steps in the educational process. But for experimentation and rapid prototyping, it dramatically lowers the barrier to turning an idea right into a working product.

To anyone else who wants to start out vibe coding my advice is locate an issue and dive in. Select an issue you genuinely care to maintain you motivated as you learn find out how to use the IDE and find out how to best prompt the agent. Initially, the vibe coding learning curve seemed steep with loads of opinions on the assorted platforms and best practices. I incorrectly thought I needed to know more before starting. I didn’t. I wish I didn’t let all that chatter intimidate me. Like most things, vibe coding is easiest to learn by doing.

PodClip won’t turn me right into a solopreneur unicorn. Nevertheless, perhaps someday a PodClip-like feature can be included with Spotify.

Conclusion

References