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

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

The end result 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 software—from the front-end interface to the database and authentication. In actual fact, 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 Drawback

I’m at all times listening to podcasts and continuously studying one thing new and helpful. I usually come throughout a phrase or an evidence that resonates with me. It could possibly be a brand new idiom, a wonderfully 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 need to revisit these clips, however looking by means of listening historical past is time-consuming. I would like a pain-free solution to retailer and arrange podcast clips so I can revisit my favourite moments. That’s the inspiration behind PodClip, an app to save lots of all of your favourite podcast clips. 

Objective

I envisioned an app that will combine with Spotify, my most popular podcast streaming platform. Ideally, I needed a wrapper so I may use this additional characteristic whereas listening to the Spotify app. I needed a begin/cease button to simply seize the clip whereas listening. Then, the app would want to retailer and arrange my clips on a dashboard. The dashboard would want a search characteristic so I may simply discover previous clips. To allow the search characteristic, the app would want to transcribe the clips.

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

1. Connect with Spotify account, my most popular streaming platform
2. Add a Begin/Cease button to seize clips
3. Retailer clip timestamps and transcripts
4. Set up 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 trustworthy, 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 per 30 days.

I’m not affiliated with Replit.

Constructing

To organize, I listened to a Y combinator podcast about the perfect ideas and tips 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 ideas and tips video confirmed me precisely tips on how to combine my Spotify account utilizing the Replit Connectors characteristic.

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 glossy internet app styled identical to Spotify.

Add Clip Characteristic

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

The preliminary immediate took care of the massive duties. It formatted the frontend to match Spotify’s type. On the backend, it related to my Spotify account and arrange the database schema. Replit even created and executed exams.

All episode metadata proven in PodClip—resembling present title, episode title, timestamps, and art work—is pulled straight from Spotify’s official API, in keeping 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 need to add clips to PodClip whereas i’m listening to a podcast on spotify. I need 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 will 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 robotically tinkering with the code. I switched to Plan mode as a result of I didn’t know if my request was doable, and needed to ensure it was viable earlier than the agent hung out and computing credit.

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

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

I made a decision the Widget choice could 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. Consequently, Replit can’t entry the playback API that means it could actually’t load in information concerning the episode the consumer is listening to.

The agent beneficial a workaround. It created guide 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 solution to seize the clip with no need the playback API.

Whereas ample, guide 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 reside mode characteristic is untested, however I like that it’s there. The app defaults to reside 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 solution 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 discovered the perfect outcomes occur after I break down my imaginative and prescient into steps. Right here’s the immediate I used:

I need to add a characteristic 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 could be very useful resource intensive. AI transcription expenses per minute of audio. The agent beneficial the next strategy:

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 complete transcript shows with timestamps within the margin. A search bar on the high helps 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 robotically units the beginning/finish time based mostly on what you highlighted.

One essential limitation I bumped into is that Spotify doesn’t present entry to uncooked podcast audio by means of its API. Whereas Spotify streams most of the similar podcasts accessible elsewhere, it delivers audio by means of its personal protected infrastructure and doesn’t enable 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 information are deliberately distributed for open entry. Within the RSS mannequin, podcast creators host their audio on exterior platforms, and the information are supposed to be straight downloaded by podcast gamers.

This strategy permits PodClip to assist 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. 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

Ultimately, 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 could possibly 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 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 had been prompting the agent and testing out the options for myself.

Future Work

General, I take into account 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 most important remaining process is pulling in present episode information and playback for reside mode within the Now Enjoying characteristic. Whereas the code for reside 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 largest surprises about vibe coding:

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

The method of jogged my memory of trying 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 speedy prototyping, it dramatically lowers the barrier to turning an concept right into a working product.

To anybody else who needs to begin vibe coding my recommendation is use 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 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 be taught by doing.

PodClip gained’t flip me right into a solopreneur unicorn. Nonetheless, maybe someday a PodClip-like characteristic can 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 desperate to be taught new or higher methods of doing issues.

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

References