This project is a React-based web application that provides an adaptive language learning platform powered by artificial intelligence. The application enables users to practice conversations in various languages through scenario-based learning, with real-time feedback, progress tracking, and personalized hints.
- Multilingual Support: Practice in multiple languages including English, Spanish, French, German, and more
- Voice Interaction: Text-to-speech and speech-to-text capabilities for pronunciation practice
- Scenario-based Learning: Engage in realistic conversations based on predefined scenarios
- Adaptive Learning: System adjusts to user's proficiency level
- Real-time Feedback: Get immediate feedback on grammar, vocabulary, and fluency
- Goal Tracking: Monitor progress through clearly defined conversation goals
- Learning Analytics: View detailed progress reports and historical performance
- Framework: Next.js with React 19
- Styling: Tailwind CSS with Radix UI components
- State Management: Zustand and React Query
- Authentication: Custom authentication with session management
- Internationalization: next-intl for multilingual support
- Data Validation: Zod for type-safe schema validation
- API Communication: Axios for API requests
- UI Components: Custom components built on assistant-ui library
This project implements the adaptive language learning approach described in our research paper. The complete research, methodology, and findings are available in the following repository:
Language Learning Research Paper Repository
The paper explores the effectiveness of AI-powered conversation practice for language acquisition, the impact of immediate feedback on learning outcomes, and techniques for adaptive difficulty scaling based on learner proficiency.
The backend implementation for this project is available in a separate repository:
Language Learning Server Repository
This server provides the API endpoints, natural language processing capabilities, and data management needed to power the language learning experience.
- Node.js 20 or higher
- A running instance of the language learning API
-
Clone the repository
git clone https://github.com/yourusername/language-learning-client.git cd language-learning-client -
Install dependencies
yarn
-
Create a
.env.localfile in the root directory with the following variables:NEXT_PUBLIC_ASSISTANT_URL=http://your-api-url -
Start the development server
yarn dev
-
Open http://localhost:3000 in your browser
| Description | Screen |
|---|---|
| Situation Picker: Select language learning scenarios based on difficulty level and context |  |
| Initial Chat: Beginning of a conversation with instructions and context |  |
| Chat Interface: Interactive conversation with real-time feedback and assistance |  |
| Evaluation Report: Detailed assessment of the conversation with language proficiency metrics |  |
| Learning History: Visualization of progress and performance over time |  |
| Dark Mode: asdasd | ![] |
- app/: Next.js app directory containing routes and layouts
- components/: Reusable UI components
- hooks/: Custom React hooks for data fetching and state management
- lib/: Utility functions and configuration
- public/: Static assets
- MyAssistant: Main conversation interface
- SituationSettings: Interface for selecting learning scenarios
- ProgressTracker: Real-time tracking of conversation goals
- LearningHistory: Historical performance visualization
- AudioRecorder: Voice input component
- ReportDialog: Comprehensive session analysis
The application communicates with a language learning API that handles:
- Natural language processing for conversation
- Speech synthesis and recognition
- Progress tracking and learning analytics
- User management and session history
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.