WordLoom

Continuous language learning woven into daily browsing

Comment

WordLoom

Inspiration

Language learning often feels disconnected from real life—users leave the content they enjoy to study vocabulary in isolation. We wanted to make learning feel continuous and natural by embedding it directly into everyday browsing. The goal was lightweight immersion: turning normal reading into a low-friction language practice experience.

What it does

WordLoom is a Chrome extension that partially translates words and short phrases on live webpages into a chosen target language. Instead of full translation, it blends foreign terms into familiar content to preserve readability while encouraging learning.

Hovering over translated words unlocks richer interactions and feeds a vocabulary tracking system that records exposure and progress.

A companion dashboard extends the experience. With Google sign-in and a Node-backed API, users can view vocabulary, adjust settings, and explore a semantic graph of learned words—transforming the tool into a full learning system.

How we built it

The system has two main surfaces: a Chrome extension and a standalone dashboard.

  • Frontend: React + Vite extension that injects translated text while preserving structure and alignment.
  • Backend: Node.js server handling translation, auth, vocabulary tracking, and API coordination.
  • Database: MongoDB for vocabulary history, settings, and metadata.
  • AI pipeline: LLM-based translation and embeddings for semantic mapping.
  • Dashboard: Next.js app with Google OAuth and a 3D graph (react-force-graph-3d).
  • Discover: Searches the web with FireCrawl for relevant articles with vocabularies user needs practice on

Challenges

Balancing immersion and readability was difficult—too much translation disrupts reading, too little weakens learning.

Injecting content into real-world webpages while preserving structure was complex.

Maintaining alignment between original and translated text was critical for interactions and tracking.

We also faced challenges with auth across extension/web contexts and real-world reliability issues (OAuth, DB connectivity, live updates).

Accomplishments

We built a full-stack learning system connecting live reading, vocabulary tracking, and visualization.

The extension enables seamless in-context learning, while the dashboard provides meaningful progress insights.

A centralized backend architecture keeps the system scalable and maintainable.

What we learned

AI product quality depends heavily on UX, not just model output.

Browser extensions introduce unique constraints compared to traditional apps.

We learned to manage cross-surface authentication and the value of a backend-controlled data layer.

Real-time features exposed the importance of reliability and infrastructure.

What’s next

Improve reliability of the vocabulary pipeline and dashboard accuracy.

Enhance the semantic graph and vocabulary experience.

Long term, evolve into a seamless, everyday language learning companion.

Built With

Share this project:

Updates