DatEnglishcodex

Turn YouTube and real news into personalized bilingual English lessons.

Comment

Inspiration

I created DatEnglishcodex because I wanted to learn English from the content I already use every day, especially YouTube videos and international news websites.

Many vocabulary apps teach isolated words, but real English is learned through context. I wanted to make it possible to discover a new word, understand its meaning in the current sentence, listen to its pronunciation, save the surrounding context, and review it later without leaving the page.

What it does

DatEnglishcodex is a Chrome extension and mobile-friendly learning app for studying English through real online content.

Users can:

  • Double-click an English word to see its Vietnamese meaning, pronunciation, word form, usage, and examples.
  • Select a sentence or paragraph and translate it into bilingual English-Vietnamese text.
  • View bilingual subtitles while watching supported YouTube videos.
  • Pause videos and look up individual subtitle words.
  • Save vocabulary together with the original sentence and paragraph.
  • Listen to words, sentences, and paragraphs.
  • Review saved vocabulary using spaced repetition.
  • Synchronize vocabulary and learning progress between desktop and mobile.
  • Read selected news articles and watch selected learning videos from a daily homepage.

How we built it

We built DatEnglishcodex as a Manifest V3 Chrome extension combined with a mobile-friendly Progressive Web App.

The browser extension observes web pages, detects selected text, creates translation popups, and integrates with dynamic websites such as YouTube and news websites.

The main technologies include:

  • JavaScript, HTML, and CSS
  • Chrome Extension APIs
  • Supabase for authentication and cloud synchronization
  • Netlify Functions for server-side requests
  • Google Translate for sentence and subtitle translation
  • Dictionary API for definitions, phonetics, examples, and pronunciation audio
  • YouTube transcript data for bilingual subtitle support
  • OpenAI Codex for AI-assisted development and debugging

Challenges we ran into

The biggest challenge was working with websites that constantly change their structure and load content dynamically. YouTube subtitles also appear at different times, so we had to synchronize the English and Vietnamese lines while keeping the translation delay as short as possible.

Another challenge was creating a consistent experience on both desktop and mobile. We had to handle responsive popups, scrolling, touch interactions, video pausing, mobile subtitle display, saved vocabulary, and cross-device synchronization.

We also learned that saving only a word is not enough for effective learning. The app needed to save the sentence and paragraph where the word was found so that users could remember its meaning and usage more naturally.

Accomplishments that we're proud of

We are proud that DatEnglishcodex turns ordinary web browsing into an interactive English lesson.

A learner can discover a word in a real article or video, understand its meaning in context, listen to it, save it with supporting examples, and review it later through spaced repetition.

We are also proud of creating one connected learning system that works across Chrome, mobile browsers, news websites, and YouTube while keeping the interface simple and focused.

What we learned

We learned that language learning is more effective when vocabulary is connected to authentic situations instead of isolated lists.

We also learned how to combine a Chrome extension, a Progressive Web App, cloud authentication, a synchronized database, translation services, dictionary data, subtitles, audio playback, and spaced repetition into one product.

Building this project taught us the importance of responsive design, accessibility, timing, reliable synchronization, and graceful handling of websites that do not provide captions or structured text.

What's next for DatEnglishcodex

Our next goals are to add AI-generated subtitles for videos that do not have captions, improve contextual meaning detection, support native Android and iOS applications, provide smarter daily learning recommendations, and add more reliable study reminders.

We also plan to introduce optional premium features while keeping the core learning experience accessible to everyone.

Built With

Share this project:

Updates