EngliPlay – AI-Powered English Learning App | 18 Game Modes | React PWA

EngliPlay is a fully self-hosted Progressive Web App (PWA) that turns English learning into an addictive game. Powered by the OpenRouter AI workflow – which chains through 5 free large-language models with automatic fallback – it generates infinite, level-appropriate content so no two sessions are ever the same.Buyers deploy on their own domain in minutes: add two free API credentials (OpenRouter + Firebase), run npm install && npm run dev, and the app is live. Zero monthly subscription costs for the app itself.
18 AI-Driven Game Modes
Sentence Builder – drag & drop scrambled words into correct order
Grammar Puzzle – multiple-choice error correction
Speech Challenge – read aloud, scored by Web Speech API in real time
Dictation Master – listen to TTS audio, type what you hear
Story Weaver – fill blanks in an AI-generated short story
AI Chat Roleplay – open-ended conversation with an AI English tutor
Synonym Sprint – find synonyms before the timer runs out
Spelling Bee – identify the correctly spelled word
Odd One Out – spot the word that doesn’t belong
Phrasal Verb Quest – fill-in verb + particle combinations
Verb Voyager – choose correct verb tense per sentence
Preposition Park – select in / on / at / by / with
Article Alley – a / an / the selection
Word Match – pair words with definitions or antonyms
Quick Think (True/False) – grammar statements, race against the clock
Context Detective – infer meaning from surrounding context clues
Riddle Realm – solve English riddles with vocabulary clues
Idiom Master – learn and identify common English phrases
AI Workflow & Architecture
Calls OpenRouter API (5 free LLMs tried sequentially with auto-fallback)
Structured JSON prompts per game mode – strict CEFR-level calibration in every prompt
Deduplication hashing prevents repeating questions across sessions
AI Chat session maintains local message history for coherent multi-turn dialogue
Word of the Day endpoint generates daily vocabulary with pronunciation + example
Gamification Engine
XP & CEFR levelling: A1 → A2 → B1 → B2 → C1 (8 tiers, 30 levels)
Daily streak tracking with visual streak counter
5 unlockable achievement badges (First Steps, On Fire, Rising Star, Grammar Guru, Chatterbox)
Global leaderboard (Firestore-backed, live rankings)
50-session history log with XP chart (Recharts)
Confetti animation on level-up
Features at a Glance
PWA — installable on desktop, Android, iOS; app shell works offline
Google Sign-In via Firebase Authentication; guest mode uses localStorage
Firestore cloud sync — progress follows the user across all devices
Dark mode + light mode, persisted per user
Sound effects (correct, wrong, timer, level-up)
Fully responsive – mobile-first design
Microphone access only on explicit tap; audio processed locally by the browser
Structured Practice section with 14 curated lessons, each locked to appropriate levels
Topic selector on Dashboard – filter AI content by subject (Travel, Business, Food, etc.)
Error Boundary component wraps the entire app for graceful failure recovery
Tech Stack
React 19 + TypeScript 5 + Vite 6
Tailwind CSS 3 (JIT)
Firebase 12 (Auth + Firestore)
OpenRouter AI API (free LLM models)
Recharts (XP history chart)
Lucide React (icons)
Vitest (37 automated test assertions across 6 suites)
canvas-confetti (level-up celebration)
Quick Setup (3 Steps)
Get a free OpenRouter API key at openrouter.ai/keys
Create a free Firebase project and copy its web config
Paste both into .env.local, run npm install && npm run dev
Full OS-specific installation instructions (Windows, macOS, Linux) are included in the documentation.