DEV Community

Cover image for Tense Playground: Master English Grammar with AI & Interactive Games
Dharmendra Kumar
Dharmendra Kumar

Posted on

Tense Playground: Master English Grammar with AI & Interactive Games

#ai #nextjs #webdev #javascript

I'm excited to share Tense Playground, a free, open-source platform I built to help learners master all 12 English tenses through interactive games, quizzes, and AI assistance.

The Problem

Learning English tenses is challenging, especially for ESL learners. Traditional methods are boring, and there's no personalized feedback. I wanted to create something fun, interactive, and powered by AI.

The Solution

Tense Playground combines:

  • 🎮 Interactive Games for engaging learning
  • :robot_face: AI Assistant for instant help
  • 📊 Smart Analysis for tense detection
  • 🏆 Gamification to keep you motivated ## ✨ Key Features ### :robot_face: AI-Powered Learning
  • Tensey Chat - AI grammar assistant for questions about tenses
  • Sentence Analyzer - Detects tense with breakdown (subject, verb, object, auxiliaries)
  • Smart Translation - Multi-language support with grammar insights
  • Alternative Suggestions - Get variations of sentences in different tenses ### 📚 Learning Tools
  • Playground - Explore all 12 tenses with examples
  • Quiz System - 3 difficulty levels (Easy, Medium, Hard)
  • Sentence Builder - Drag-and-drop word arrangement
  • Word Rainfall - Catch falling words to build sentences
  • Translation Tool - Practice with 7 languages
  • Tips & Tricks - Memory aids and shortcuts ### 🏆 Gamification System 
Daily Challenges:
✓ Answer 3 quiz questions
✓ Build 5 sentences
✓ Score 100+ in Word Rainfall
Weekly Challenges:
✓ Maintain 7-day streak
✓ Master all 12 tenses
✓ Get 100% accuracy
Badges & XP Rewards:
:star2: First Steps | :zap: Quick Learner | :sports_medal: Grammar Guru
:fire: Streak Master | :white_check_mark: Perfect Score | :alarm_clock: Time Traveler
Enter fullscreen mode Exit fullscreen mode

🔥 Streak System

Track your consistency with:

  • Current streak counter
  • Longest streak tracker
  • Total days practiced
  • Automatic reset on missed days ## 🛠️ Tech Stack I built this with modern web technologies: 
Frontend:
- Next.js 16 (App Router)
- React 19
- TypeScript
- Tailwind CSS
- shadcn/ui Components
Backend & AI:
- Next.js API Routes
- Google Gemini AI (gemini-2.5-flash)
- OpenAI integration ready
State Management:
- React Context + Hooks
- localStorage for persistence
Deployment:
- Vercel (Live at https://tense-playground.vercel.app)
Enter fullscreen mode Exit fullscreen mode

🌐 Multi-language Support

Sentence translations in:

  • English (en)
  • Hindi (hi)
  • Telugu (te)
  • Tamil (ta)
  • Kannada (kn)
  • Malayalam (ml)
  • Marathi (mr) ## 📱 Features ✅ Fully Responsive (Desktop, Tablet, Mobile) ✅ Dark/Light Theme Support ✅ PWA Ready ✅ Open Source (MIT License) ✅ Zero Paywalls ## 🚀 How to Get Started ### Run Locally 
# Clone the repo
git clone https://github.com/dharam-gfx/tense-playground.git
cd tense-playground
# Install dependencies
npm install
# or
pnpm install
# Set up environment
echo "GEMINI_API_KEY=your_api_key" > .env.local
# Run dev server
npm run dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000 and start learning!

Try Live

Visit: https://tense-playground.vercel.app

💡 What I Learned Building This

  1. Structuring Complex State - Managing multiple game states, streaks, and challenges
  2. AI Integration - Prompt engineering for grammar analysis and translation
  3. Gamification Design - Making learning fun with badges, XP, and streaks
  4. Performance Optimization - Lazy loading, code splitting with Next.js
  5. Accessibility - Ensuring the app works for all learners
  6. UI/UX Best Practices - Creating intuitive interfaces with shadcn/ui ## 🎯 Roadmap
  7. [ ] User authentication & cloud save
  8. [ ] Spaced repetition algorithm
  9. [ ] Mobile app (React Native)
  10. [ ] Voice recognition for pronunciation
  11. [ ] Community features (leaderboards, discussions)
  12. [ ] Advanced AI writing assistant
  13. [ ] Video tutorials for each tense ## 🤝 Contributing I'd love your contributions! Areas needing help:
  14. Bug fixes and optimizations
  15. New tense examples and explanations
  16. UI/UX improvements
  17. Language translations
  18. Test coverage Check the GitHub repo for contribution guidelines. ## 🙏 Support If you find this useful:
  19. ⭐ Star the repo on GitHub
  20. 💬 Share feedback in comments
  21. 🐛 Report bugs on GitHub Issues
  22. 📢 Spread the word Your support helps me improve and maintain this project! ## Final Thoughts Learning English tenses shouldn't be boring. With Tense Playground, you get an AI-powered buddy, fun games, and real progress tracking. Whether you're preparing for IELTS, TOEFL, or just improving daily, this is for you. Happy learning! 🚀

Top comments (0)