PolyLingua UI¶

A modern, single-page translation interface built with Next.js 14, React, and shadcn/ui components.

Features¶

🌐 Clean and intuitive translation interface
🎨 Beautiful UI using shadcn/ui components and Tailwind CSS
📱 Fully responsive design
🌍 Support for 15 languages (Spanish, French, German, Italian, Portuguese, Russian, Japanese, Korean, Chinese, Arabic, Hindi, Dutch, Polish, Turkish, Swedish)
⚡ Real-time character count
🔄 Loading states and smooth animations

Tech Stack¶

Framework: Next.js 14 (App Router)
UI Components: shadcn/ui (Radix UI + Tailwind CSS)
Styling: Tailwind CSS
Icons: Lucide React
Language: TypeScript

Getting Started¶

Prerequisites¶

Node.js 18.x or higher
npm, yarn, or pnpm

Installation¶

Navigate to the ui directory:

cd ui

Install dependencies:

npm install
# or
yarn install
# or
pnpm install

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open YOUR_HOST_IP:3000 in your browser to see the application.

Project Structure¶

ui/
├── app/
│   ├── globals.css          # Global styles and Tailwind configuration
│   ├── layout.tsx            # Root layout component
│   └── page.tsx              # Main page (home)
├── components/
│   ├── ui/                   # shadcn/ui components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── label.tsx
│   │   ├── select.tsx
│   │   └── textarea.tsx
│   └── polylingua-form.tsx   # Main translation form component
├── lib/
│   └── utils.ts              # Utility functions
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── next.config.js

Usage¶

Enter Text: Type or paste the text you want to translate in the source text area
Select Language: Choose your target language from the dropdown menu
Translate: Click the “Translate” button to see the translation

Backend Integration¶

Currently, the app uses a mock translation function. To connect to a real translation backend:

Update the handleTranslate function in components/polylingua-form.tsx:

const handleTranslate = async () => {
  if (!sourceText.trim()) return;

  setIsLoading(true);

  try {
    const response = await fetch("/api/translate", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        text: sourceText,
        targetLanguage: targetLanguage,
      }),
    });

    const data = await response.json();
    setTranslatedText(data.translatedText);
  } catch (error) {
    console.error("Translation error:", error);
    setTranslatedText("Error: Translation failed. Please try again.");
  } finally {
    setIsLoading(false);
  }
};

Create an API route at app/api/translate/route.ts to handle the backend connection.

Build for Production¶

npm run build
npm start

Customization¶

Adding More Languages¶

Edit the languages array in components/polylingua-form.tsx:

const languages = [
  { code: "es", name: "Spanish" },
  { code: "fr", name: "French" },
  // Add more languages here
];

Styling¶

Global styles: app/globals.css
Tailwind configuration: tailwind.config.ts
Component-specific styles: Use Tailwind utility classes

License¶

MIT