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

EngliPlay – AI-Powered Gamified English Learning App

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.

Live Demo

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)

1. Get a free OpenRouter API key at openrouter.ai/keys
2. Create a free Firebase project and copy its web config
3. Paste both into .env.local, run npm install && npm run dev

Full OS-specific installation instructions (Windows, macOS, Linux) are included in the documentation.