Learn German

An AI-powered web application for learning German through advanced translation and comprehensive grammar analysis. Master German with intelligent tools that provide detailed grammatical breakdowns, vocabulary explanations, and accurate translations.

🌟 Features

1. Translate to German

AI-Powered Translation: Uses DeepL API for accurate, context-aware translations
Text-to-Speech: Listen to German translations with correct pronunciation
Quick Analysis: Direct link to analyze translated text for grammar breakdown
Multi-language Support: Translate from any language to German

2. Analyze German Text

Sentence Segmentation: Automatically breaks down passages into individual sentences
Detailed Grammar Analysis:
- Case analysis (Nominative, Accusative, Dative, Genitive)
- Tense identification
- Word order explanations
- Sentence structure breakdown
Vocabulary Breakdown: German words with English translations
English Translation: Understand the meaning of German sentences
Text-to-Speech: Listen to German sentences with proper pronunciation
Smart Caching: LRU cache system prevents duplicate API calls for the same sentence

3. User Feedback System

Structured Feedback Form: Comprehensive evaluation system for research purposes
- Overall user experience rating (1-5 stars)
- Ease of use rating
- Feature usefulness ratings
- Recommendation options
- Open-ended feedback
Anonymous Submission: Option to submit feedback without personal information
Public Feedback View: View anonymous feedback from other users
Database Storage: All feedback stored securely in Vercel Postgres

4. Modern UI/UX

Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
Beautiful Gradients: Blue-themed design with animated background elements
Intuitive Navigation: Easy-to-use menu bar accessible from all pages
Accessibility: Keyboard navigation and screen reader support

🚀 Getting Started

Prerequisites

Node.js 18+ and npm/yarn
API keys for:
- DeepL API (for translation)
- Groq API (for grammar analysis - free tier available)
- Vercel Postgres (for feedback storage - free tier available)

Installation

Clone the repository

git clone <your-repo-url>
cd LearnGerman

Install dependencies
```
npm install
```

Set up environment variables

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

# DeepL API (Required for translation)
DEEPL_API_KEY=your_deepl_api_key
DEEPL_API_URL=https://api-free.deepl.com/v2/translate

# Groq API (Required for grammar analysis - Free tier available)
GROQ_API_KEY=your_groq_api_key

# Vercel Postgres (Required for feedback storage)
# These are automatically set when deploying to Vercel
POSTGRES_URL=your_postgres_url
POSTGRES_PRISMA_URL=your_postgres_prisma_url
POSTGRES_URL_NON_POOLING=your_postgres_non_pooling_url
POSTGRES_USER=your_postgres_user
POSTGRES_HOST=your_postgres_host
POSTGRES_PASSWORD=your_postgres_password
POSTGRES_DATABASE=your_postgres_database

Set up the database

If deploying to Vercel:
- Create a Postgres database in your Vercel project
- Run the SQL migration from sql/init.sql in your Vercel Postgres dashboard
See VERCEL_POSTGRES_SETUP.md for detailed instructions.
Run the development server
```
npm run dev
```
Open your browser

Navigate to http://localhost:3000

📖 Usage Guidelines

Using the Translation Feature

Navigate to Translate Page
- Click "Translate" from the menu or home page
- Or use the direct link: /translate
Enter Your Text
- Type or paste the text you want to translate into German
- The text can be in any language
Translate
- Click the "Translate" button
- Wait for the AI to process your text
- View the German translation below
Listen to Pronunciation
- Click the speaker icon next to the translation
- Listen to the correct German pronunciation
Analyze Translation (Optional)
- Click "Analyse Text" button
- Opens analysis page with the translated text pre-filled
- Get detailed grammar breakdown

Using the Grammar Analysis Feature

Navigate to Analysis Page
- Click "Analyse" from the menu or home page
- Or use the direct link: /analyze
Enter German Text
- Type or paste German text (single sentence or multiple sentences)
- The app will automatically segment it into sentences
Analyze
- Click "Analyse German text" button
- View the segmented sentences
Get Detailed Analysis
- Click on any sentence to see:
  - English translation
  - Detailed grammatical analysis
  - Vocabulary breakdown with translations
- Click the speaker icon to hear pronunciation
Model Selection
- Choose between Groq (free) or OpenAI (premium, currently disabled for demo)
- Groq is recommended for free usage

Submitting Feedback

Navigate to Feedback Page
- Click "Submit Feedback" from the menu
- Or use the direct link: /submit-feedback
Choose Submission Type
- Select "Submit anonymously" if you don't want to share personal information
- Or provide your name and email (optional if anonymous)
Complete Evaluation
- Rate your experience (1-5 stars) for:
  - Overall User Experience
  - Ease of Use
  - Translation Feature Usefulness
  - Grammar Analysis Feature Usefulness
- Select whether you would recommend the app
- Provide additional feedback in the text area
Submit
- Click "Submit Feedback"
- Your feedback helps improve the app!

Viewing Public Feedback

Navigate to Feedback View
- Click "View Feedback" from the menu
- Or use the direct link: /feedback
Browse Feedback
- View anonymous feedback from other users
- See when feedback was submitted
- Get insights from the community

🛠️ Technology Stack

Framework: Next.js 16 (App Router)
Language: TypeScript
Styling: Tailwind CSS 4
Translation API: DeepL
Grammar Analysis: Groq (LLM) - Free tier
Database: Vercel Postgres
Deployment: Vercel (recommended)

📁 Project Structure

LearnGerman/
├── app/                    # Next.js app directory
│   ├── api/               # API routes
│   │   ├── analyze/      # Grammar analysis endpoint
│   │   ├── translate/    # Translation endpoint
│   │   └── feedback/     # Feedback endpoints
│   ├── analyze/          # Grammar analysis page
│   ├── translate/        # Translation page
│   ├── feedback/         # View feedback page
│   ├── submit-feedback/  # Submit feedback page
│   ├── contact/          # Contact page
│   └── page.tsx          # Home page
├── components/           # React components
│   ├── ui/              # UI components (Button, Card, Modal, etc.)
│   ├── NavMenu.tsx      # Navigation menu
│   ├── Footer.tsx       # Footer component
│   └── SentenceSegment.tsx
├── lib/                  # Utility functions
│   ├── deepl.ts         # DeepL API integration
│   ├── groq.ts          # Groq API integration
│   ├── db.ts            # Database utilities
│   └── text-segmentation.ts
├── sql/                  # Database migrations
│   └── init.sql         # Initial schema
├── styles/               # Global styles
│   └── globals.css
└── public/               # Static assets
    └── GermanFlag.png

🔧 Development

Available Scripts

npm run dev - Start development server
npm run build - Build for production
npm run start - Start production server
npm run lint - Run ESLint

Building for Production

npm run build
npm start

🚢 Deployment

Deploying to Vercel

Push your code to GitHub/GitLab/Bitbucket
Import project to Vercel
- Go to vercel.com
- Click "New Project"
- Import your repository
Set environment variables
- Add all required API keys in Vercel dashboard
- Environment variables section
Set up Vercel Postgres
- Go to Storage tab
- Create Postgres database
- Run SQL migration from sql/init.sql
Deploy
- Vercel will automatically deploy on push
- Your app will be live!

See VERCEL_POSTGRES_SETUP.md for detailed database setup instructions.

📊 API Endpoints

POST `/api/translate`

Translates text to German using DeepL API.

Request:

{
  "text": "Hello, how are you?",
  "targetLang": "de"
}

Response:

{
  "translation": "Hallo, wie geht es dir?"
}

POST `/api/analyze`

Analyzes German sentence for grammar, vocabulary, and translation.

Request:

{
  "sentence": "Ich lerne Deutsch.",
  "model": "groq"
}

Response:

{
  "translation": "I am learning German.",
  "grammar": "Detailed grammatical analysis...",
  "vocabulary": [
    {"german": "Ich", "english": "I"},
    {"german": "lerne", "english": "learn"},
    {"german": "Deutsch", "english": "German"}
  ]
}

POST `/api/feedback`

Submits user feedback.

Request:

{
  "name": "John Doe",
  "email": "john@example.com",
  "message": "Great app!",
  "isAnonymous": false,
  "userExperienceRating": 5,
  "easeOfUseRating": 5,
  "translationUsefulness": 5,
  "analysisUsefulness": 5,
  "wouldRecommend": "Yes"
}

GET `/api/feedback/get`

Retrieves anonymous feedback entries.

🤝 Contributing

We welcome contributions! This app is designed for research and educational purposes. If you'd like to contribute:

Fork the repository
Create a feature branch
Make your changes
Submit a pull request

📝 Feedback & Support

Your feedback is invaluable! We're continuously working to improve this application.

Ways to Provide Feedback:

Structured Feedback Form
- Navigate to "Submit Feedback" from the menu
- Complete the evaluation form
- Help us understand your experience
Contact Page
- Visit the Contact page for developer information
- Find links to the developer's website
View Community Feedback
- Check out what other users are saying
- Navigate to "View Feedback" from the menu

Why Your Feedback Matters:

Research Purposes: This app is part of ongoing research in language learning technology
Improvement: Your feedback directly influences future updates
Feature Development: Help us prioritize new features
User Experience: Share what works and what doesn't

We appreciate every piece of feedback! 🎉

👤 Developer

Himel Ghosh

Website: https://himelghosh.vercel.app/
Contact: Available through the Contact page in the app

📄 License

🙏 Acknowledgments

DeepL for translation API
Groq for free LLM access
Vercel for hosting and database services
Next.js team for the amazing framework
All users who provide valuable feedback

📚 Resources

Made with ❤️ for German language learners

Last updated: 2026

Name		Name	Last commit message	Last commit date
app		app
components		components
lib		lib
public		public
sql		sql
styles		styles
types		types
.gitignore		.gitignore
DATABASE_SETUP.md		DATABASE_SETUP.md
README.md		README.md
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation

Learn German

🌟 Features

1. Translate to German

2. Analyze German Text

3. User Feedback System

4. Modern UI/UX

🚀 Getting Started

Prerequisites

Installation

📖 Usage Guidelines

Using the Translation Feature

Using the Grammar Analysis Feature

Submitting Feedback

Viewing Public Feedback

🛠️ Technology Stack

📁 Project Structure

🔧 Development

Available Scripts

Building for Production

🚢 Deployment

Deploying to Vercel

📊 API Endpoints

POST /api/translate

POST /api/analyze

POST /api/feedback

GET /api/feedback/get

🤝 Contributing

📝 Feedback & Support

Ways to Provide Feedback:

Why Your Feedback Matters:

👤 Developer

📄 License

🙏 Acknowledgments

📚 Resources

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

POST `/api/translate`

POST `/api/analyze`

POST `/api/feedback`

GET `/api/feedback/get`