LinguaChat - AI-Powered Language Learning

Master any language through natural conversations with AI

Overview

LinguaChat is an AI-powered language learning application that helps users practice real conversations in their target language. Get instant feedback, track your vocabulary, and build confidence through natural dialogue with AI.

Key Features

• 5 Languages: Spanish, French, German, Italian, Japanese
• Real-Time Conversations: Stream AI responses for natural dialogue
• Instant Corrections: Get grammar and vocabulary feedback as you chat
• Vocabulary Tracking: Build your word collection automatically
• 7 Practice Scenarios: From casual chat to job interviews
• 3 Difficulty Levels: Beginner, Intermediate, Advanced
• Dark Mode: Beautiful UI that's easy on your eyes
• Mobile Optimized: Practice anywhere, anytime

Tech Stack

• Framework: Next.js 16 with App Router & React Server Components
• Language: TypeScript with strict mode
• Styling: Tailwind CSS v4 with CSS variables
• UI Components: shadcn/ui + AI Elements
• AI: OpenAI GPT-4 + Vercel AI SDK
• State Management: Zustand with localStorage persistence
• Animations: Framer Motion
• Analytics: Vercel Analytics

Getting Started

Prerequisites

• Node.js 18+ or Bun
• pnpm (recommended) or npm
• OpenAI API key (get one here)

Installation

1. Clone the repository

git clone https://github.com/D-Raj-Grg/AI-Language-Learning-App.git
cd AI-Language-Learning-App

2. Install dependencies

pnpm install

3. Set up environment variables

Create a .env.local file in the root directory:

# Required: OpenAI API Key
OPENAI_API_KEY=sk-your-api-key-here

# Optional: App URL (for production)
NEXT_PUBLIC_APP_URL=http://localhost:3000

4. Run the development server

pnpm dev

Open http://localhost:3000 in your browser.

Building for Production

# Build the application
pnpm build

# Start production server
pnpm start

Project Structure

├── app/                    # Next.js App Router pages
│   ├── api/               # API routes
│   │   └── chat/          # OpenAI streaming endpoint
│   ├── chat/              # Chat interface
│   ├── scenarios/         # Scenario selection
│   ├── vocabulary/        # Vocabulary dashboard
│   ├── layout.tsx         # Root layout with providers
│   └── page.tsx           # Landing page
├── components/            # React components
│   ├── ui/               # shadcn/ui components
│   ├── ai-elements/      # AI-specific components
│   ├── chat/             # Chat UI components
│   ├── corrections/      # Corrections panel
│   ├── vocabulary/       # Vocabulary components
│   └── scenarios/        # Scenario cards
├── lib/                  # Utilities & configuration
│   ├── store.ts          # Zustand global state
│   ├── openai.ts         # OpenAI client setup
│   ├── prompts.ts        # System prompt builders
│   ├── scenarios.ts      # Scenario definitions
│   └── utils.ts          # Helper functions
└── public/               # Static assets
    ├── logo.svg          # Brand logo
    └── favicon.svg       # Browser icon

Development Commands

# Development
pnpm dev              # Start dev server
pnpm build            # Production build
pnpm start            # Start production server

# Code Quality
pnpm lint             # Run ESLint
pnpm type-check       # TypeScript type checking

# Analysis
ANALYZE=true pnpm build  # Bundle size analysis

Environment Variables

Variable	Required	Description
OPENAI_API_KEY	Yes	Your OpenAI API key for GPT-4 access
NEXT_PUBLIC_APP_URL	No	App URL for CORS and metadata (defaults to localhost)

Features in Detail

Conversation Practice

• Select from 7 real-world scenarios
• AI adapts to your skill level
• Streaming responses for natural flow
• Conversation history within session

Corrections System

• Real-time grammar feedback
• Category-based corrections (grammar, vocabulary, spelling, style)
• Detailed explanations
• Toggleable corrections panel

Vocabulary Tracking

• Automatic word extraction
• Translation and context
• Search and filter functionality
• Persistent storage across sessions

Performance

• Server-side rendering for fast loads
• Optimized bundle size
• Edge runtime for API routes
• Lighthouse score: >90

Security

• Input sanitization
• Rate limiting (10 req/min)
• CORS protection
• Security headers (HSTS, CSP, X-Frame-Options)
• API key protection

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Documentation

• Product Requirements Document - Detailed feature specifications
• Planning Document - Development roadmap and sprints
• Task Tracking - Granular task list with progress
• User Guide - How to use the application
• Claude Instructions - Development guidelines for AI assistance

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• OpenAI for GPT-4 API
• Vercel for hosting and AI SDK
• shadcn for beautiful UI components
• AI Elements for AI-specific components

Support

If you encounter any issues or have questions:

• Open an issue
• Check the User Guide
• Review TASKS.md for known issues

---

Made with ❤️ using Next.js and OpenAI