I Constructed a Podcast Clipping App in One Weekend Utilizing Vibe Coding

been in every single place recently. Some folks declare it can allow a single particular person 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: may I construct an actual product utilizing vibe coding in a single weekend?

The consequence was PodClip, an internet app that lets me seize and arrange clips from podcast episodes on Spotify.

In about 5 hours of labor, Replit generated many 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 at all times listening to podcasts and continually studying one thing new and helpful. I typically come throughout a phrase or an evidence that resonates with me. It may very well be a brand new idiom, a superbly defined idea, or the reply to a query that’s been bugging me. This occurs so ceaselessly, however I typically can’t bear in mind the precise phrases or which episode I heard it. I wish to revisit these clips, however looking out by listening historical past is time-consuming. I want a pain-free technique to retailer and arrange 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. 

Purpose

I envisioned an app that may combine with Spotify, my most well-liked podcast streaming platform. Ideally, I needed a wrapper so I may 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 arrange my clips on a dashboard. The dashboard would wish a search function so I may simply discover outdated 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 strive 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 monthly.

I’m not affiliated with Replit.

Constructing

To arrange, I listened to a Y combinator podcast about one of the best ideas and methods for vibe coding. To familiarize myself with the Replit IDE and toolset, I watched the official constructing your first app and ideas and methods movies. The guidelines and methods video confirmed me precisely the right way to combine my Spotify account utilizing the Replit Connectors function.

Subsequent, it was time to study 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 may 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 model. On the backend, it related to my Spotify account and arrange the database schema. Replit even created and executed checks.

All episode metadata proven in PodClip—resembling present identify, episode title, timestamps, and art work—is pulled straight from Spotify’s official API, consistent with their developer tips.

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

Now Taking part in 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 start out the clip after which click on a button to mark the top. Is there a means create a plug in or add-on that may open throughout 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 potential, and needed to ensure 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 Playing” widget in PodClip itself. The person must take heed to Spotify on one other browser tab. Utilizing Spotify’s API, PodClip would pull-in data concerning the present episode and the timestamp. The person may 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 person would click on the bookmarklet to report the beginning and cease timestamps. Then, it will ship this data to PodClip, however the person would nonetheless must enter episode data. Though very fast to implement, this method was removed from the seamless person expertise I envisioned.
3. Cell-friendly quick-capture web page. This method works identical to the widget besides it extra optimized for a telephone.

I made a decision the Widget possibility 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 problem with the Spotify connection. PodClip was unable to name the playback API as a result of Replit’s Spotify connector is in improvement mode. Consequently, Replit can’t entry the playback API that means it may possibly’t load in data concerning the episode the person is listening to.

The agent really helpful a workaround. It created guide mode. The person 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 technique to seize the clip with no need the playback API.

Whereas adequate, guide mode isn’t as person pleasant as I hoped. It requires the person to sync the PodClip timer with Spotify episode, which is a trouble. 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 tug in present episode data. This stay mode function is untested, however I like that it’s there. The app defaults to stay 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 guide mode.

Transcript

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

At this level in my vibe coding journey, I realized one of the 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 reserve it to Your Clips

The agent warned me that producing episode transcripts can be very useful resource intensive. AI transcription fees per minute of audio. The agent really helpful the next method:

1. New “Episode Transcript” web page — after deciding on 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 total 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 phase, 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 by its API. Whereas Spotify streams most of the identical podcasts accessible elsewhere, it delivers audio by its personal protected infrastructure and doesn’t permit third-party apps to obtain or course of that audio straight.

Due to this, PodClip doesn’t obtain or transcribe audio from Spotify. As a substitute, it depends on publicly accessible podcast RSS feeds (resembling 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 straight downloaded by podcast gamers.

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

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. site 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. Consequently, the timestamp of the spotlight clip isn’t very exact. Nonetheless, I care extra concerning 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 straightforward 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 may very well be improved.

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

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

Future Work

General, I contemplate this app successful. I do know I’m going to make use of it, and it’s a lot 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 most important remaining process is pulling in present episode data and playback for stay mode within the Now Taking part in function. Whereas the code for stay mode already exists within the app, it nonetheless requires testing. When (or if) that can occur is dependent upon when the Spotify permits entry to the playback API.

What I Discovered About Vibe Coding

My greatest surprises about vibe coding:

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

The method of jogged my memory of wanting on the reply key earlier than wholeheartedly attempting 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 objective of the venture to quickly prototype a MVP, which is strictly what this completed.

For builders, vibe coding might 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 needs to start out vibe coding my recommendation is use an issue and dive in. Select an issue you genuinely care to maintain you motivated as you learn to use the IDE and the right way to greatest immediate the agent. Initially, the vibe coding studying curve appeared steep with loads of opinions on the assorted 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 study by doing.

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

Conclusion

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

All suggestions is welcome. I’m at all times wanting to study new or higher methods of doing issues.

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

References