Introducing waystar.fyi, a powerful English learning tool, built by claude vibe coding

Building Waystar: What I Learned (and Where I Got Stuck)

Waystar.fyi started as a simple idea: paste a YouTube URL, get the 7 most useful English phrases from that video, with timestamps so you can watch each one in context. Simple enough. But like most side projects, the gaps between "simple idea" and "working product" were where all the interesting things happened.

---

The Transcript Problem Ate Half My Time

This was the one I didn't see coming. Fetching YouTube transcripts sounds trivial — there's even an npm package for it. But the moment I deployed to Vercel, it broke completely.

YouTube blocks transcript requests originating from datacenter IP ranges. My local machine worked fine. Vercel's servers? Blocked. I went through four different approaches over a couple of days:

1. The youtube-transcript npm package — worked locally, dead on Vercel
2. Custom fetcher with browser-like headers — still blocked
3. YouTube's internal InnerTube API with an Android app User-Agent — partially worked, but I had a bug where I was parsing XML timestamps as milliseconds instead of seconds, which took an embarrassingly long time to find
4. InnerTube + page-scraping fallback — got closer, but still flaky

I eventually switched to Supadata, a dedicated transcript service, which just works. In hindsight, I should have reached for a purpose-built API earlier instead of trying to reverse-engineer YouTube's internals. But I learned a lot about how YouTube serves captions under the hood.

⭐️Human comment: As you might have guessed, this is generated by Claude Code when I finished this vibe coding project in a combined of less than 8 hours. local dev environment almost never really worked when deploy to product. What I have hoped is Claude Code should have been smart enough to anticipate the transcript issues that suggest to use Supadata or any 3rd party transcript in the beginning. 

---

Claude Would Sometimes Invent Timestamps

Once the transcript was flowing correctly, a subtler bug appeared: Claude occasionally returned start_seconds values beyond the actual video length. A 10-minute video might get a phrase timestamped at 847 seconds. The video would either error or start at the wrong point.

The fix was simple — clamp every timestamp to the video's duration — but finding it required instrumenting the API response and correlating it with what Claude was returning. It's a good reminder that LLM output needs validation even when the structure looks right.

⭐️Human comment: through the vibe coding, there are lots of errors / bugs introduced, not those "cosmetic" ones but rather with logical wrong behaviors, that I have to test and later fix 

My ultimate question is: Claude code, why cannot you code the first version without those obvious bugs? E.g., timestamp goes beyond the video duration? the preview redirect url not working but you still pushed and deployed?

---

The YouTube IFrame API Broke the Modal on Every Reopen

I built a video modal that plays a short clip starting from each phrase's timestamp. I added the YouTube IFrame API thinking it would give me better playback control. Instead, every time a user clicked a second phrase, the modal showed a blank iframe.

The cause: the IFrame API's YT.Player constructor was replacing the src attribute on the existing iframe element, wiping out the timestamp URL I'd set. The fix was deleting the IFrame API entirely — the YouTube embed's native start and end URL parameters handled everything I needed without any JavaScript.

---

Small UX Details That Took Longer Than Expected

• Video clip timing: Starting the clip exactly at the phrase's timestamp meant the first word was often cut off. Adding a 2-second lead-in before the timestamp made every clip feel much more natural.
• Thumbnails: YouTube's maxresdefault.jpg thumbnail doesn't exist for all videos — it just returns a gray placeholder. Switching to hqdefault.jpg fixed every card.
• Mobile layout: The history sidebar worked fine on desktop but needed a full rethink on mobile — it became a slide-over drawer. The video modal's close button was also clipping off-screen on small viewports.

---

What I'd Do Differently

Test on the actual deployment target early. Most of my debugging time came from things that worked locally but failed on Vercel — transcript fetching especially. Catching that on day one instead of day three would have saved a lot of frustration.

Also: when integrating with external APIs you don't control (YouTube, IFrame), validate your assumptions by reading what's actually being returned before building logic on top of it.

---

Waystar is live at waystar.fyi. Paste any YouTube video and see what comes back.

---