Word Fight Online

A real-time multiplayer word-battle arena combining fast-paced linguistic PvP with players for instant vocabulary learning, IPA phonetics, and flashcards.

Comment

💡 Inspiration

Learning a new language or building a rich vocabulary is often associated with tedious flashcard drills and isolated memorization. Meanwhile, word games like Scrabble or traditional word-chain games lack the urgency of esports and rarely help players retain new words after a match ends.

We asked ourselves: What if competitive gaming mechanics (1v1 duels, health bars, timer pressure, and ELO ranking) met cutting-edge Generative AI?

That vision gave birth to WordFight Online — a real-time, browser-native battle arena where your vocabulary is your weapon, and every match turns into an interactive learning opportunity.

🎮 What it does

WordFight Online is an instant multiplayer word-chain platform featuring three distinct modes:

  • English Word Chain: Players link words using the final letter under intense timer constraints.
  • Vietnamese Word Chain: Players link meaningful compound words, testing deep mother-tongue vocabulary.
  • King of Vietnamese (Vua Tiếng Việt): Fast-paced anagram and unscrambling puzzles.

🧠 Core Features & The AI Engine:

  • Instant Real-Time PvP: Jump into 1v1 quick matches or custom 10-player rooms with zero download required.
  • Gemini AI Linguistic Assistant: During and after matches, Google Gemini AI validates complex inputs, pulls accurate IPA phonetics, explains definitions, and generates contextual bilingual sentences on the fly.
  • Automated Smart Notebook & Flashcards: Every word played or missed can be saved directly into a player's personalized review deck.
  • Competitive ELO & Leaderboards: A ranked ladder system that rewards skill, quick reflexes, and vocabulary depth.

🛠️ How we built it

We prioritized low latency, clean UI, and rapid state synchronization:

  • Frontend & UI: Built with Next.js and TypeScript, styled via Tailwind CSS. We utilized a pure DOM-based UI architecture to achieve sub-second load times without heavy 3D/WebGL game engine overhead.
  • Real-Time Layer & Database: Supabase handles real-time multiplayer WebSockets, player presence, state synchronization, and PostgreSQL data persistence.
  • AI Integration: Google Gemini AI API processes vocabulary lookups, contextual validation, and flashcard generation via structured JSON outputs.
  • Infrastructure & Deployment: Deployed on Vercel at the edge for global asset delivery, alongside Docker and AWS for resilient backend services and data workflows.

🚧 Challenges we ran into

  • Sub-second State Synchronization: Word games require millisecond-level precision to determine whose input arrived first. Fine-tuning WebSocket listeners and handling race conditions across different network connections was a significant hurdle.
  • Linguistic Validation at Scale: Language rules are vast and subjective (slang, archaic terms, compound structures). Balancing a fast local dictionary check with dynamic Gemini AI fallback queries required aggressive caching and prompt optimization to keep latency below 300ms.
  • Spike Traffic in Production: Sustaining uptime during viral community surges demanded strict query optimization on PostgreSQL and edge caching.

🏆 Accomplishments that we're proud of

  • Live in Production: Successfully launched and battle-tested wordfight.online in production for months, serving tens of thousands of real players organically.
  • Bridging Gaming & Education: Creating a seamless loop where losing a duel doesn't feel frustrating, because players immediately discover the word's meaning and add it to their study notebook.
  • Zero-Install Accessibility: Achieving a mobile-first, responsive experience that opens instantly in any browser.

📚 What we learned

  • How to orchestrate real-time room states and presence channels cleanly using Supabase.
  • Effective prompt engineering and streaming strategies with Gemini AI to minimize perceived latency in gaming environments.
  • Insights into community engagement: how gamifying competitive instincts directly drives long-term educational retention.

🚀 What's next for WordFight Online

  • Co-op Boss Raids: Players team up to defeat vocabulary "bosses" generated dynamically by AI.
  • Classroom & Tournament Mode: Specialized portal for language teachers to host private tournaments with custom vocabulary lists.
  • Mobile Native Apps: Bringing WordFight to iOS and Android with offline practice modes.

Built With

Share this project:

Updates