An intelligent AI-powered English learning platform that helps users master English through interactive translation exercises with real-time feedback and comprehensive analytics.
PracticeEnglishPlusDemo.mp4
- Smart Paragraph Generation: Generate paragraphs in multiple Indian languages (Hindi, Marathi, Bengali, Kannada, Tamil)
- Difficulty Levels: Choose from Easy, Medium, or Hard difficulty levels
- Real-time Translation: Translate native language paragraphs to English
- AI-Powered Evaluation: Get instant feedback on grammar, vocabulary, fluency, and similarity
- Hindi (हिंदी) - Devanagari script
- Marathi (मराठी) - Devanagari script
- Bengali (বাংলা) - Bengali script
- Kannada (ಕನ್ನಡ) - Kannada script
- Tamil (தமிழ்) - Tamil script
Step 1: Generate Paragraph
- Select your native language from the dropdown
- Choose difficulty level (Easy/Medium/Hard)
- Click "Generate" button
- System generates a paragraph in your selected language
- Original English translation is stored for comparison
Step 2: Translate
- Read the generated paragraph in your native language
- Type your English translation in the text area
- No time limit - take your time to craft the best translation
Step 3: Validate
- Click "Validate" button to submit your translation
- AI analyzes your translation against the original
- Evaluation includes:
- Similarity Score: How close your translation matches the original meaning
- Grammar Score: Correctness of grammar usage
- Vocabulary Score: Richness and appropriateness of word choice
- Fluency Score: Natural flow and readability
- Overall Score: Combined performance metric
Step 4: Review Results
- View detailed grammar issues with suggestions
- Explore different view modes (Quick View, Progress, Detailed)
- Compare your translation with the answer key
- Track improvement areas and strengths
- Comprehensive Scoring: Track similarity, grammar, vocabulary, fluency, and overall scores
- Multiple View Modes:
- Quick View: Horizontal scrolling cards with all insights at a glance
- Progress Tracker: Visual skill garden showing improvement areas
- Detailed Analysis: In-depth breakdown of performance metrics
- Grammar Issue Detection: Identify and fix grammar mistakes with AI suggestions
- Theme Support: Light and Dark mode with professional color schemes
- Smooth Animations: Framer Motion powered transitions and interactions
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Glass Morphism: Modern backdrop blur effects and gradients
- Professional Typography: Inter font family with optimized weights
- Celebration Effects: Animated celebrations for high scores (>80%)
- Toast Notifications: User-friendly feedback messages
- Resizable Containers: Adjust paragraph view sizes
- Answer Key: View original English translations
- Feedback System: Submit suggestions, bug reports, and general feedback
- Frontend Framework: React 18
- Build Tool: Vite
- Routing: React Router DOM
- UI Components: Material-UI (MUI)
- Animations: Framer Motion
- Styling: CSS3 with custom themes
- HTTP Client: Axios
- Icons: Material Icons, Lucide React
- Form Handling: FormSubmit.co
- Clone the repository
git clone <repository-url>
cd english-master-ai- Install dependencies
npm install- Set up environment variables
Create a
src/config.jsfile:
const config = {
PARAGRAPH_API_URL: 'your-api-url/generate',
EVALUATION_API_URL: 'your-api-url/evaluate'
};
export default config;- Run development server
npm run dev- Build for production
npm run build- Select Language & Difficulty: Choose your native language and difficulty level from the settings
- Generate Paragraph: Click "Generate" to get a paragraph in your native language
- Translate: Type your English translation in the provided text area
- Validate: Click "Validate" to get AI-powered feedback and scores
- Review: Explore different view modes to understand your performance
- Improve: Use grammar suggestions and insights to enhance your skills
The app supports two themes with professional color palettes:
Light Theme:
- Background: Subtle grid pattern with blue/purple gradients
- Components: White with glass morphism effects
- Text: Dark slate colors for optimal readability
Dark Theme:
- Background: Dark grid pattern with indigo/purple gradients
- Components: Dark slate with enhanced glass effects
- Text: Light colors with proper contrast
- Desktop: > 1200px
- Tablet: 768px - 1200px
- Mobile: < 768px
- Small Mobile: < 480px
Configure your backend API endpoints in src/config.js:
PARAGRAPH_API_URL: Endpoint for paragraph generationEVALUATION_API_URL: Endpoint for translation evaluation
Theme preference is automatically saved to localStorage and persists across sessions.
User preferences for language and difficulty are stored in localStorage.
-
Home (/): Main practice interface with all learning tools
-
About (/about): Information about the platform and features
-
Feedback (/feedback): Submit feedback, suggestions, or bug reports
- Header: Navigation with theme toggle and animated logo
- Toolbox: Language and difficulty selection with Autocomplete
- Scoreboard: Real-time metrics display with progress bars
- MainContainer: Resizable paragraph display with typing animation
- UserTranslation: Text input area for translations
- AnimatedTabs: Tabbed interface for insights and answer key
- InnovativeLearningHub: Multiple view modes for learning analytics
- HorizontalLearningView: Scrollable cards with grammar issues
- SkillProgressTracker: Visual skill garden representation
- LearningInsights: Detailed performance breakdown
- Professional: Inspired by modern apps like GitHub, Linear, and Notion
- Eye-friendly: Carefully selected colors to reduce eye strain
- Consistent: Uniform spacing and typography throughout
- Accessible: High contrast ratios and readable font sizes
- Performant: Optimized animations and lazy loading
All rights reserved © 2024 PracticeEnglishPlus
This is a private project. For feedback or suggestions, please use the in-app feedback form.
For inquiries: practiceenglishplus@gmail.com
Built with ❤️ for English learners worldwide