WordleLearn: Gamified English Vocabulary Learning
A native Android vocabulary learning app that blends Wordle-style gameplay with structured English learning, daily challenges, themed practice modes, and an offline-first experience backed by a custom TypeScript service.
A full-stack mobile product built with a documentation-first AI workflow, native Kotlin + Jetpack Compose on the client, and a Hono.js + PostgreSQL backend powering progress, streaks, and themed vocabulary.
WordleLearn is a learning-focused take on the classic Wordle format, designed as a complete Android product with onboarding, placement test, daily challenges, themed practice modes, a personal vocabulary bank, streak tracking, and XP-based progression. Every guess becomes a learning moment, and every completed game contributes to long-term vocabulary growth.
Core Value
The product solves a real learning gap: most word games entertain but rarely teach. WordleLearn turns the gameplay loop into a structured learning journey by adding placement-aware difficulty, themed vocabulary categories, post-game word learning cards, a vocabulary bank, and streak-driven habit formation, all while staying playable offline.
What Makes It Stand Out
What makes this project stand out is the AI-assisted production workflow behind it. As a frontend web developer stepping into native Android and a TypeScript backend stack for the first time, I leaned on AI as a thinking partner to design the entire product foundation. All visual mockups and asset references were generated using ChatGPT Image 2.0, while every specification document, from PRD to UX Spec and API contract, was iteratively discussed and refined with AI before a single line of code was written.
Wordle-Style Vocabulary Gameplay
A core word-guessing experience designed specifically for English learning, with post-game word learning cards that turn every round into a vocabulary expansion moment.
Daily Challenge & Quick Play Modes
Two distinct play modes on the home screen — a daily challenge for habit-driven players and a quick play loop for casual sessions, both contributing to streaks and XP.
Themed Practice with Interest-Based Word Selection
A dedicated Play tab where users pick from 8 interest categories and difficulty levels, with the backend serving themed words tagged and filtered to match the chosen context.
Adaptive Onboarding & Placement Test
A guided onboarding flow with a placement test and interest selection that personalizes content difficulty and themed recommendations from the very first session.
Streak System with Celebration Screen
First-game-of-day streak detection on the backend, paired with a celebratory overlay on the result screen that visualizes weekly progress and tomorrow's bonus XP.
Personal Vocabulary Bank & Word Learning Card
Each completed game surfaces a Word Learning Card with definition, example, and a PRO-locked audio and word-family section, all savable to a personal vocabulary bank.
Offline-First Hybrid Game Flow
Gameplay works offline with local state, while completed sessions are synced to the backend as the authoritative source of XP and progress through a background sync worker.
Documentation-First AI Workflow
A production-style specification suite — PRD, User Stories, UX Spec, Design System, API Spec, ERD, and more — discussed and shaped with AI before implementation began.
Onboarding & Placement
A guided onboarding flow with interest selection and a placement test that personalizes difficulty and themed content from the first session.
Home Screen
A home experience with Quick Play, Daily Challenge, and online/offline-aware entry points into the core gameplay loop.
Active Game
The Wordle-inspired gameplay screen designed around English learning, with themed words and difficulty awareness.
Game Result & Word Learning Card
A post-game result screen with a Word Learning Card that turns every round into a vocabulary moment, savable into a personal vocabulary bank.
Streak Celebration
A celebratory overlay shown on the first game of the day, visualizing the weekly streak and tomorrow's bonus XP.
Themed Play
A dedicated Play tab where users pick from 8 interest categories and difficulty levels for context-aware vocabulary practice.
Vocabulary, Progress & Profile
Shared top bar and visual identity across the Vocabulary bank, Progress tracking, and Profile screens for a consistent experience.
Hybrid Online/Offline Game Data Flow
Designed a clear contract where the backend acts as the source of truth for XP and progress, the device runs the live gameplay loop, and a background sync worker reconciles offline sessions idempotently.
Themed Word Selection Pipeline
Built a backend flow that maps user-selected interests to internal word tags and applies difficulty filters, returning a stable themed seed so each user gets contextually relevant gameplay.
Placement-Aware Onboarding
Engineered an onboarding sequence with a placement test, interest selection, and per-step DataStore flags that drive routing guards, so users always resume at the right point.
Streak Logic Across Client and Server
Implemented first-game-of-day detection, week mask construction, and tomorrow's bonus XP on the backend, paired with a polished celebration overlay on the client triggered only for the right session.
Shared Visual Language Across Screens
Built a shared top bar and visual identity used across Vocabulary, Progress, and Profile tabs, with a unified celebration style reused on the streak detail screen.
Documentation-First Specification Suite
Prepared a complete production-style spec set — PRD, User Stories with acceptance criteria, UX Spec, Compose-ready Design System, API Spec, ERD, environment config, database migration plan, and background job design — before implementation, used as the single source of truth for AI-assisted execution.
Building Native Android as a Web Developer
Coming from a frontend web background, the entire Kotlin and Jetpack Compose ecosystem — including state, navigation, lifecycle, and persistence — had to be learned and applied at production quality.
Designing an Offline-First Sync Contract
Making gameplay feel instant offline while keeping the backend authoritative for XP and progress required carefully designed idempotent session endpoints and a reliable retry strategy.
Keeping Mobile and Backend in Sync
Coordinating data models, API contracts, and feature behavior across an Android client and a TypeScript backend demanded strict adherence to the upfront API and ERD specifications.
Translating AI Mockups into a Real UI
Visual references generated with ChatGPT Image 2.0 had to be translated into a coherent Compose UI with consistent spacing, typography, motion, and interaction states across every screen.
Staying Disciplined with Documentation-First Workflow
Resisting the urge to jump straight into code and instead committing to upfront PRD, UX Spec, API contracts, and design system work was a discipline that paid off heavily during implementation.
AI as a Thinking Partner
Learned to use AI not as a code generator but as a collaborator for pressure-testing product decisions, refining specs, and shaping architecture before writing code.
Native Android Development with Kotlin and Compose
Gained hands-on experience designing screens, state, navigation, and persistence in a fully Compose-based native Android app.
Full-Stack Mobile Architecture
Practiced designing a product end to end — mobile client, backend service, database, and sync layer — with a clear separation of responsibilities.
Offline-First Product Design
Explored how to model gameplay so users get instant feedback offline while a backend remains the source of truth for progress and rewards.
Documentation-First AI Workflow
Built confidence that the quality of AI-assisted output is largely determined by the quality of the upfront specifications, mockups, and references provided.
AI-Generated Asset Pipeline with ChatGPT Image 2.0
Practiced generating mockups and visual references with ChatGPT Image 2.0 and translating them into a consistent, branded mobile interface.
Project Info
Highlights
- AI-Assisted Documentation-First Workflow
- Native Android with Kotlin and Jetpack Compose
- Custom TypeScript Backend with Hono.js and PostgreSQL
- Offline-First Gameplay with Backend-Authoritative XP
- Themed Vocabulary Practice with 8 Interest Categories
- Streak Celebration and Daily Challenge System
- Mockups and Visuals Generated with ChatGPT Image 2.0
