Project Overview

This application lets users translate text between multiple languages in the browser. There is no custom backend—the frontend talks directly to the MyMemory Translation API. The app demonstrates Next.js App Router, server vs. client components, form state, API calls, and responsive design. It is suitable for beginners learning React/Next.js and for anyone who wants a ready-to-deploy translator UI.

Features

• Multi-language translation – Dozens of languages (e.g. English, German, Japanese, Bengali).
• Source & target selection – Dropdowns with search to pick “From” and “To” languages.
• Swap languages – One click to reverse From/To.
• Streaming-style output – Translation appears character-by-character for a polished feel.
• Copy & clear – Copy input or output to clipboard; clear both fields.
• Character limit – Input capped (e.g. 200 characters) to stay within API limits.
• Start screen – Landing view with greetings in several languages and a CTA to open the translator.
• Ripple button – Click feedback on primary actions.
• Responsive layout – Works on mobile and desktop; card layout with backdrop blur.
• SEO-friendly – Metadata (title, description, Open Graph, Twitter) in the root layout.
• Open source – MIT license; free to use and extend.

Technology Stack

Project Structure

language-translator/
├── app/
│   ├── layout.tsx          # Root layout: fonts, metadata, body background, critical CSS
│   ├── page.tsx            # Home route: server-rendered card shell + ClientToggle
│   └── globals.css         # Tailwind base, ripple, CTA shine, stream cursor
├── components/
│   ├── ClientToggle.tsx    # Client: toggles between TranslatorStart and TranslatorApp
│   ├── pages/
│   │   ├── TranslatorStart.tsx   # Start screen: greetings, CTA, “How it works”
│   │   ├── TranslatorApp.tsx    # Main translator UI: languages, input, output, actions
│   │   └── HomePage.tsx          # Legacy client wrapper (optional; page uses ClientToggle)
│   └── ui/
│       ├── RippleButton.tsx # Button with ripple effect
│       ├── card.tsx         # Card / CardContent (shadcn)
│       ├── input.tsx        # Input (shadcn)
│       ├── button.tsx       # Button (shadcn)
│       ├── skeleton.tsx      # Skeleton (shadcn)
│       └── badge.tsx        # Badge (shadcn)
├── data/
│   └── languages.ts        # Map of language codes → display names (MyMemory-compatible)
├── hooks/
│   └── useClickOutside.ts  # Close dropdown when clicking outside
├── lib/
│   ├── api.ts              # translate(), toApiLangCode() – MyMemory API
│   └── utils.ts            # cn() – classnames merge (clsx + tailwind-merge)
├── types/
│   └── index.ts            # LanguageCode, MyMemory response, component props
├── public/
│   ├── favicon.ico
│   └── hero1.webp          # Hero background image
├── .env.example            # Optional env vars (title, API URL override)
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
├── eslint.config.mjs
├── package.json
└── README.md

Installation & Setup

1. Clone the repository

   git clone https://github.com/arnobt78/Language-Translator--ReactVite.git
   cd language-translator
   

2. Install dependencies

   npm install
   

3. Optional: environment variables

   Copy .env.example to .env.local if you want to override the app title or API base URL (see Environment Variables). You do not need any env vars to run the app; it works out of the box.

4. Start the development server

   npm run dev
   

5. Open in the browser

   Visit http://localhost:3000 (Next.js default port).

Environment Variables (.env)

You do not need a .env file to run this project. The app works without any environment variables. All of the following are optional.

To customize behavior:

1. Copy the example file:

   cp .env.example .env.local
   

2. Edit .env.local (never commit real secrets; .env.local is usually gitignored).

How to get / set them:

• App title: Set NEXT_PUBLIC_APP_TITLE=My Translator (or any string) in .env.local.
• API URL: Leave unset to use the public MyMemory endpoint. If you host your own proxy, set NEXT_PUBLIC_MYMEMORY_API_URL to that base URL (e.g. https://your-proxy.com).

No API key is required for the default MyMemory usage; check MyMemory docs for rate limits.

How to Run & Use

• Development: npm run dev → http://localhost:3000
• Production build: npm run build then npm run start
• Lint: npm run lint

User flow:

1. Open the app → you see the start screen (greetings, “Language Translator” title, “Let’s Get Started!”).
2. Click “Let’s Get Started!” → the translator view opens (language selectors, input, output).
3. Choose From and To languages (use search if needed), type or paste text, click Translate (or press Enter).
4. Use Copy / Clear as needed; use Swap to reverse languages; use the X button to go back to the start screen.

Routes & Pages

The app uses the Next.js App Router with a single main route:

There are no other routes. All UI is on this single page; “Start” vs “Translator” is client-side state only.

API Integration & Backend

There is no custom backend. The frontend calls the MyMemory Translation API from the client.

• Endpoint: GET https://api.mymemory.translated.net/get?q={text}&langpair={from}|{to}
• Used in: lib/api.ts – translate(text, langPair) and toApiLangCode(code) (e.g. de-DE → de).

Flow:

1. User clicks Translate (or presses Enter).
2. TranslatorApp calls translate(inputText, \${from}|${to}`)` with API-friendly language codes.
3. lib/api.ts builds the URL, fetches, parses JSON, and returns responseData.translatedText (or handles same-language / errors).
4. The UI shows the result (with optional streaming effect).

Important: Same-language pairs are blocked in the UI; invalid or error responses are surfaced as user-friendly messages. No API key is required for normal use.

Components & Walkthrough