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

been all over the place these days. Some individuals declare it’ll allow a single individual to construct a billion-dollar firm.

I used to be skeptical.

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

The consequence was PodClip, an online app that lets me seize and set up clips from podcast episodes on Spotify.

In about 5 hours of labor, Replit generated a lot of the utility—from the front-end interface to the database and authentication. In reality, I in all probability spent extra time organizing my ideas and writing this text than I did constructing the app.

Right here’s what occurred.

The Downside

I’m all the time listening to podcasts and consistently studying one thing new and helpful. I usually come throughout a phrase or a proof that resonates with me. It might be a brand new idiom, a superbly defined idea, or the reply to a query that’s been bugging me. This occurs so incessantly, however I usually can’t keep in mind the precise phrases or which episode I heard it. I wish to revisit these clips, however looking via listening historical past is time-consuming. I want a pain-free approach to retailer and set up podcast clips so I can revisit my favourite moments. That’s the inspiration behind PodClip, an app to avoid wasting all of your favourite podcast clips. 

Objective

I envisioned an app that might combine with Spotify, my most well-liked podcast streaming platform. Ideally, I needed a wrapper so I might use this additional function whereas listening to the Spotify app. I needed a begin/cease button to simply seize the clip whereas listening. Then, the app would wish to retailer and set up my clips on a dashboard. The dashboard would wish a search function so I might simply discover previous clips. To allow the search function, the app would wish to transcribe the clips.

Right here have been the big-picture necessities for my app:

1. Hook up with Spotify account, my most well-liked streaming platform
2. Add a Begin/Cease button to seize clips
3. Retailer clip timestamps and transcripts
4. Manage clips in searchable dashboard

Why Replit?

I heard the identical platforms talked about in talks about vibe coding: Cursor, Windsurf, Lovable, and Replit. From my restricted analysis, all of them appeared interchangeable. To be sincere, I made a decision to attempt Replit first as a result of one of many founders helped create React.

Like different vibe coding platforms, Replit requires a subscription. I’ve the Replit Core subscription which prices $20 per thirty days.

I’m not affiliated with Replit.

Constructing

To organize, I listened to a Y combinator podcast about the very best ideas and methods for vibe coding. To familiarize myself with the Replit IDE and toolset, I watched the official building your first app and tips and tricks videos. The information and methods video confirmed me precisely tips on how to combine my Spotify account utilizing the Replit Connectors function.

Subsequent, it was time to be taught by doing. I began small. The preliminary immediate was:

Construct an app that lets me bookmark clips of my favourite podcasts in Spotify

Minutes later, I used to be amazed by the preview of a modern net app styled identical to Spotify.

Add Clip Characteristic

The primary iteration of the app centered across the Add Clip function. Customers might seek for a podcast episode after which enter the time stamps for the clip.

The preliminary immediate took care of the large duties. It formatted the frontend to match Spotify’s fashion. On the backend, it linked to my Spotify account and arrange the database schema. Replit even created and executed checks.

All episode metadata proven in PodClip—corresponding to present title, episode title, timestamps, and paintings—is pulled instantly from Spotify’s official API, consistent with their developer pointers.

Regardless of this sturdy begin, manually inputting timestamps was not the consumer expertise I had in thoughts. Going ahead, I must be extra particular with the agent.

Now Enjoying Characteristic

For my subsequent immediate, I defined how I needed so as to add to a clip whereas listening to a podcast:

I wish to add clips to PodClip whereas i’m listening to a podcast on spotify. I wish to click on a button to begin the clip after which click on a button to mark the top. Is there a means create a plug in or add-on that might open inside the Spotify app? Different concepts to perform this?

As a substitute of utilizing Construct mode, I used Plan mode. This fashion the agent would clarify the method and break it into duties as an alternative of routinely tinkering with the code. I switched to Plan mode as a result of I didn’t know if my request was attainable, and needed to verify it was viable earlier than the agent frolicked and computing credit.

The agent knowledgeable me that plugins or extensions wouldn’t work since Spotify doesn’t permit third-party add-ons. Nonetheless, there have been alternate options:

1. A companion “Now Enjoying” widget in PodClip itself. The consumer must hearken to Spotify on one other browser tab. Utilizing Spotify’s API, PodClip would pull-in information in regards to the present episode and the timestamp. The consumer might hit a Begin/Cease button in PodClip and the app would seize all the small print like present, episode, timestamps, and transcripts.
2. A browser bookmarklet or keyboard shortcut. The consumer would click on the bookmarklet to file the beginning and cease timestamps. Then, it might ship this information to PodClip, however the consumer would nonetheless must enter episode information. Though very fast to implement, this strategy was removed from the seamless consumer expertise I envisioned.
3. Cellular-friendly quick-capture web page. This strategy works identical to the widget besides it extra optimized for a telephone.

I made a decision the Widget choice can be greatest. I toggled again to Construct mode and let the agent go to work.

Challenges with Spotify API

After the agent completed, there was a difficulty with the Spotify connection. PodClip was unable to name the playback API as a result of Replit’s Spotify connector is in growth mode. Because of this, Replit can’t entry the playback API that means it may’t load in information in regards to the episode the consumer is listening to.

The agent advisable a workaround. It created handbook mode. The consumer can seek for an episode, then use a built-in timer to mark clip boundaries whereas listening to Spotify in a separate browser tab. It’s a approach to seize the clip without having the playback API.

Whereas adequate, handbook mode isn’t as consumer pleasant as I hoped. It requires the consumer to sync the PodClip timer with Spotify episode, which is a problem. Nonetheless, I appreciated that the agent applied a workaround as a stopgap. As soon as Replit has entry to the playback API, the code already exists to drag in present episode information. This dwell mode function is untested, however I like that it’s there. The app defaults to dwell mode. It tries to name the Spotify playback API and if profitable, pulls within the present episode, timestamp, and playback controls. If unsuccessful, PodClip makes use of handbook mode.

Transcript

Lastly, I needed a approach to seize clips utilizing episode transcripts. This fashion, I might search the transcript for the clip and spotlight it.

At this level in my vibe coding journey, I realized the very best outcomes occur after I break down my imaginative and prescient into steps. Right here’s the immediate I used:

I wish to add a function the place I:

1. Choose an episode

2. PodClip generates the transcript of the episode

3. I can search the transcript

4. I can spotlight textual content within the transcript and put it aside to Your Clips

The agent warned me that producing episode transcripts can be very useful resource intensive. AI transcription expenses per minute of audio. The agent advisable the next strategy:

1. New “Episode Transcript” web 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 accessible episode audio, splits it into smaller segments (a couple of minutes every), and transcribes every chunk. The AI returns textual content with timestamps, so we all know precisely the place every sentence falls within the episode.
3. Transcript viewer — as soon as prepared, the complete transcript shows with timestamps within the margin. A search bar on the prime enables you to filter/spotlight matching textual content.
4. Spotlight to clip — choose any textual content within the transcript, and a “Save Clip” button seems. Since we all know the timestamps for every section, PodClip routinely units the beginning/finish time primarily based on what you highlighted.

One essential limitation I bumped into is that Spotify doesn’t present entry to uncooked podcast audio via its API. Whereas Spotify streams most of the identical podcasts accessible elsewhere, it delivers audio via its personal protected infrastructure and doesn’t permit third-party apps to obtain or course of that audio instantly.

Due to this, PodClip doesn’t obtain or transcribe audio from Spotify. As a substitute, it depends on publicly accessible podcast RSS feeds (corresponding to these listed by Apple Podcasts), the place audio recordsdata are deliberately distributed for open entry. Within the RSS mannequin, podcast creators host their audio on exterior platforms, and the recordsdata are supposed to be instantly downloaded by podcast gamers.

This strategy permits PodClip to help transcription options whereas respecting platform boundaries and adhering to Spotify’s developer pointers.

To deal with the transcription, I wanted to combine my OpenAI account utilizing 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. visitors.libsyn.com)
          │
          ▼
    ffmpeg splits audio into 2-minute chunks
          │
          ├──► chunk 1 ──► OpenAI speech-to-text ──► textual content
          ├──► chunk 2 ──► OpenAI speech-to-text ──► textual content
          ├──► chunk 3 ──► OpenAI speech-to-text ──► textual content
          └──► ...
          │
          ▼
    segments stitched along with timestamps
    saved in PostgreSQL
          │
          ▼
    frontend polls each 3s ──► reveals progress bar
    till full ──► shows full transcript

The app transcribes in two minute chunks. Because of this, the timestamp of the spotlight clip isn’t very exact. Nonetheless, I care extra in regards to the content material than the precise timestamp.

Finish Product & Publishing App

In the long run, I had a working app to retailer all my favourite podcast quotes. Replit makes it simple to publish the app for different customers. It dealt with the login authentication so customers can create their very own PodClip account. Replit additionally added a Suggestions button.

Right here’s a hyperlink to the printed app: PodClip app. Please don’t be shy about utilizing the Suggestions button! I’m very curious to know what might be improved.

Right here’s a hyperlink to the GitHub repo: PodClip repo

I didn’t maintain monitor of precisely what number of hours I spent on this venture since I might immediate the agent after which step away whereas it labored. I estimate I spent about 3 to five hours complete over the course of a weekend. Essentially the most time consuming elements have been prompting the agent and testing out the options for myself.

Future Work

General, I contemplate this app a hit. I do know I’m going to make use of it, and it’s significantly better than my earlier system of storing podcast quotes within the Notes app. However, there’s nonetheless room for enchancment.

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

The largest remaining process is pulling in present episode information and playback for dwell mode within the Now Enjoying function. Whereas the code for dwell mode already exists within the app, it nonetheless requires testing. When (or if) that can occur relies on when the Spotify permits entry to the playback API.

What I Discovered About Vibe Coding

My largest surprises about vibe coding:

1. The agent dealt with a lot of the utility structure routinely
2. Brief and easy prompts have been greater than sufficient
3. Platform limitations (Spotify API) have been the largest blocker

The method of jogged my memory of trying on the reply key earlier than wholeheartedly making an attempt to work the issue set. In different phrases, vibe coding is nice for prototyping however doesn’t essentially construct coding ability. And that’s OK. The purpose of the venture to quickly prototype a MVP, which is strictly what this achieved.

For builders, vibe coding could really feel like skipping steps within the studying course of. However for experimentation and fast prototyping, it dramatically lowers the barrier to turning an concept right into a working product.

To anybody else who desires to begin vibe coding my recommendation is locate an issue and dive in. Select an issue you genuinely care to maintain you motivated as you discover ways to use the IDE and tips on how to greatest immediate the agent. Initially, the vibe coding studying curve appeared steep with loads of opinions on the varied platforms and greatest practices. I incorrectly thought I wanted to know extra earlier than starting. I didn’t. I want I didn’t let all that chatter intimidate me. Like most issues, vibe coding is best to be taught by doing.

PodClip gained’t flip me right into a solopreneur unicorn. Nonetheless, maybe someday a PodClip-like function shall be included with Spotify.

Conclusion

Thanks for studying my article. Join with me on LinkedIn, Twitter, or Instagram.

All suggestions is welcome. I’m all the time desperate to be taught new or higher methods of doing issues.

Be at liberty to go away a remark or attain out to me at [email protected].

References