LangTube

About LangTube 💐

The Challenge We're Responding To 🌸

YouTube is already one of the most popular ways to learn a language: in one survey, 79.4% of students said they use it to improve their language skills (Faizi et al., ICERI 2018). But watching alone is passive. Subtitles show what was said, not why, and there's no easy way to look up phrases, save new words, or practice speaking.

For one of our teammates, learning Tagalog meant hitting region and VPN blocks, or finding content that couldn't hold their interest. Language apps ask you to change what you watch. We wanted to flip that: learn a language through the content you already love.

How LangTube Addresses the Challenge 🌼

LangTube is a Chrome extension that turns any YouTube video into an interactive language lesson for English speakers learning Spanish, French, or Tagalog. It's built around one loop: watch → understand → listen → speak.

• 👀 Watch color-matched bilingual captions, synced to the video
• 💡 Understand click any phrase for its meaning, grammar, and formality, then save it to your vocabulary
• 🎧 Listen hear natural pronunciation of any phrase
• 🗣️ Speak repeat lines and see which words were understood, then chat live with Luna, our AI conversation partner, at your level (A1–B1). Afterward, you get a score out of 100 for understanding, relevance, vocabulary, and grammar, plus words to review.

Technologies Used 🌸

• Extension: TypeScript, Vite, CRXJS, Chrome Manifest V3
• Gemini API: phrase-aligned translations, phrase explanations, and Luna conversation grading
• ElevenLabs: text-to-speech for pronunciation, Scribe speech-to-text for speaking practice, and Agents for Luna's live voice
• TigerData: vocabulary, conversations, and scores, with learning events in a time-series hypertable
• Backend and dashboard: Node.js, Express, React, Google OAuth
• Design: Figma, Figma Make, Figma MCP
• Hosting: Vercel and Render

What We Learned 🌼

This was everyone's first time building a browser extension and using ElevenLabs and TigerData.

• Extensions are three apps in one: page scripts, content scripts, and background workers each have their own job.
• Translation is an alignment problem: asking Gemini for structured, phrase-matched output made the color-matched captions possible.
• Real time means speed: translating just ahead of the playhead and caching audio kept everything in sync.
• Learning is time-series data: TigerData hypertables made heatmaps and score trends simple queries.
• Design first saves time: we prototyped by hand in Figma, polished in Figma Make and Claude, and implemented with the Figma MCP.

Problems We Ran Into and How We Solved Them 🌸

YouTube captions came back empty. YouTube requires a hidden token on caption requests that only its player adds ➔ we listen in on the player's own caption requests instead of fetching captions ourselves.

Translations couldn't keep up with the video. Translating everything upfront was too slow, and line by line made captions lag ➔ Gemini translates in batches just ahead of the playhead, re-plans when you skip, and retries incomplete results.

One login, two apps. The extension and dashboard get different kinds of Google tokens ➔ our backend verifies both and creates one shared session, so your words and scores follow you.

Grading speech we couldn't hear. Luna's grader only sees a transcript, so it can't judge accent ➔ we grade only what text can show fairly and never penalize asking Luna for help.

What We're Proud Of 🌼

• A full MVP in one hackathon! Every feature works, and it was our first extension.
• Luna feels like a real conversation partner, with live voice chat, gentle corrections, and a fair score afterward.
• We were able to get 3 ElevenLabs tools working together in one learning loop.
• TigerData successfully turns every word and phrase into heatmaps, trends, and words to revisit.

✨ Our favorite moments: seeing our captions appear on YouTube for the first time, and hearing Luna answer back during our first real conversation! :)

What's Next for LangTube 🌸

• Implementing more languages, including learners who don't start from English
• Expanding beyond Youtube to other video platforms, such as Netflix
• The ability to have conversations with Luna about what you just watched
• A smarter vocabulary review timed from your TigerData history
• Publish to the Chrome Web Store so anyone can install LangTube in one click

Built With

• crxjs
• css
• elevenlabs
• express.js
• figma
• geminiapi
• google
• javascript
• node.js
• python
• tigerdata
• typescript
• vite