ESOL Sentence Builder
A gamified, mobile-first web app that helps English language learners master grammar through interactive sentence construction
The Problem
Traditional English grammar instruction relies heavily on textbook exercises and teacher-led correction, creating a disconnect between learning and real-time practice. ESOL students need immediate, accessible ways to practice sentence construction, but existing digital tools are often desktop-only, expensive, or lack pedagogically sound grammar validation.
Specific Pain Points
- Limited practice opportunities: Students only practice during class time, with no accessible homework alternatives
- Delayed feedback loops: Written exercises require teacher review before students receive feedback, often 24-48 hours later
- Mobile accessibility gap: Most grammar tools don't work well on smartphones, yet 70%+ of ESOL students primarily access content via mobile devices
- One-size-fits-all content: Existing apps don't follow a progressive, pedagogically structured curriculum aligned with grammar teaching sequences
- Lack of contextual validation: Simple "correct/incorrect" feedback doesn't teach why a sentence is wrong or how different tenses relate to time expressions
The Solution
I built a progressive, mobile-first sentence builder that gamifies grammar practice through an interactive tile-based system. The app validates sentences using context-aware grammar rules and provides immediate, educational feedback. Students progress through 47 carefully sequenced levels spanning 9 grammar categories, from basic present tense to complex conditionals.
Key Features
Progressive Level System
47 levels organized into 9 grammar categories with adaptive difficulty, unlocking based on student mastery and achievement points
Context-Aware Grammar Validation
Intelligent engine that validates not just grammar correctness, but contextual appropriateness—e.g., distinguishing between past simple and present perfect based on time expressions
Touch-Optimized Word Tiles
Interactive tiles that cycle through verb conjugations (eat/eats/eating/ate) with haptic feedback, designed specifically for mobile learners
Real-Time Progress Tracking
Supabase-powered backend tracks student progress, achievements, streaks, and completion rates with persistent data across devices
Screenshots & Walkthrough
Main game interface showing word tile system with sentence construction area
Level selection and progress tracking view
Additional Screenshots
Coming soonMore detailed views coming as features are finalized
Technical Implementation
Architecture Decisions
I chose Next.js 15 with server-side rendering to optimize initial load times for mobile learners on slower connections. Supabase provides a serverless backend with real-time capabilities for progress syncing without complex infrastructure. The grammar validation engine runs client-side to provide instant feedback without API latency, using a custom rules-based system rather than ML to ensure predictable, pedagogically accurate validation.
Backend
- Supabase PostgreSQL database for user authentication, progress tracking, and achievement storage
- Row-level security policies ensuring students can only access their own progress data
- Real-time subscriptions for live progress updates across devices
- Server actions for secure database mutations with TypeScript type safety
- Migration-based schema management for version-controlled database changes
Frontend
- React Server Components for optimized initial page loads with reduced client-side JavaScript
- Custom grammar validation engine with 229+ verb database and context-aware tense rules
- Framer Motion animations for smooth word tile interactions and feedback states
- Responsive breakpoints with mobile-first design (375px to 1440px+)
- Radix UI primitives for accessible component foundations
Interesting Challenges
Challenge: Time Expression Context Validation
Teaching the difference between past simple and present perfect is notoriously difficult for ESOL learners. The challenge was building a validation system that doesn't just check verb tense correctness, but also validates contextual appropriateness—e.g., "I have eaten lunch yesterday" is grammatically formed correctly but contextually wrong because "yesterday" signals finished time (requiring past simple).
Solution: I created a time expression system that categorizes time markers as "finished" (yesterday, last week) or "unfinished" (today, this week, recently). The grammar engine cross-references selected time expressions with verb tenses before validation, providing educational feedback like "Use past simple with 'yesterday' (finished time)" rather than just marking it wrong.
Challenge: Mobile Touch Target Optimization
Early testing revealed students struggled to tap small word tiles on mobile devices, especially when cycling through verb forms. Apple's Human Interface Guidelines recommend 44x44px minimum touch targets, but standard button sizing created layout issues with longer words.
Solution: Implemented dynamic tile sizing with a minimum 48px height, flexible width based on word length, and generous padding. Added visual press states with Framer Motion spring animations and optional haptic feedback (vibration) on supported devices, creating tactile confirmation of tile selection without requiring visual attention.
Development Process
What I Built First
I started with the core grammar validation engine and word tile system on a single level to validate the educational approach. I tested this MVP with 5 students in my ESOL class to ensure the sentence-building mechanic was intuitive and the feedback was helpful before investing in the full level progression system.
User Testing & Iteration
- Round 1: Students confused by simultaneous word selection + verb form toggling → Separated actions: tap to select word, tap again to cycle forms
- Round 2: Mobile users accidentally triggered browser navigation by swiping word tiles → Added touch-action: none CSS and prevented default swipe behaviors
- Round 3: Advanced students requested faster progression → Implemented achievement-based unlocking allowing students to skip ahead based on performance
Additional Features I'd Like to Add
I'd add comprehensive E2E testing using Playwright to automate testing across all 47 levels, plus implement adaptive difficulty that adjusts based on student performance. I'd also add progress analytics showing which grammar concepts students struggle with most.
Results & Impact
Note: The app is currently in student testing phase. Quantitative usage data and learning outcome metrics will be collected during the pilot program with ESOL classes in Spring 2025.
Lessons Learned
Mobile-First Means Mobile-ONLY Testing First
I initially tested primarily on desktop with Chrome DevTools mobile emulation, which missed critical touch interaction issues. Real device testing revealed problems with touch target sizes, haptic feedback timing, and keyboard behavior that emulation didn't catch. Now I test every feature on actual mobile devices before considering it complete.
Grammar Validation Needs Pedagogical Depth, Not Just Correctness
My first grammar engine only checked if sentences were grammatically correct. Student feedback showed this wasn't helpful for learning—students needed to understand why their sentence was wrong and when to use different structures. Rebuilding the engine with context-aware rules and educational feedback messages transformed it from a grading tool into a teaching tool.
Progressive Unlocking Drives Engagement More Than Open Access
Initially, all levels were available immediately to avoid frustrating students. However, adding achievement-based unlocking with visible progress paths dramatically increased session length and return rates during early testing. Students treated it like a game to "beat" rather than a homework assignment to complete.