Polyglot 🌍

Polyglot is a lightweight AI-powered translation web app built with React, TypeScript, Express, and OpenAI.

✨ Features

• Welcome screen with Polyglot branding, tagline, and “Get Started” entry point
• Route-based flow between / (welcome) and /app (translator)
• Translate text into English, Spanish, French, or Japanese
• Chat-style translation history with per-message rendering
• Inline loading animation while translations are in progress
• Press Enter to submit and Shift + Enter for multiline input
• Animated language greeting elements (“Hello,” “¡Hola!,” “Bonjour,” and “こんにちは”)
• Auto-scroll to the newest message
• Client-side validation for empty input
• User-friendly error handling for failed translation requests
• Home button to return to the welcome screen

🧠 How It Works

The frontend manages translation state through a custom hook and sends the user text and target language to the backend. The backend sanitizes input, applies rate limiting, forwards the request to OpenAI, and returns a normalized translation response for UI rendering.

🛠️ Tech Stack

Frontend

• React
• TypeScript
• Vite
• React Router
• Motion
• CSS
• Vitest + Testing Library + MSW

Backend

• Node.js
• Express
• TypeScript
• OpenAI API
• CORS
• Express Rate Limit

🔌 API Endpoints

• GET /health
• POST /translate

POST /translate example request

{
  "userPrompt": "Hello, how are you today?",
  "targetLanguage": "Japanese"
}

POST /translate example response

{
  "message": {
    "input": "Hello, how are you today?",
    "output": "こんにちは、お元気ですか？"
  }
}

📦 Getting Started

Prerequisites

• Node.js 18+
• npm

Clone the repository

git clone <your-repository-url>
cd polyglot

Install frontend dependencies

cd frontend
npm install

Install backend dependencies

cd ../backend
npm install

🔐 Environment Variables

Create .env files in both backend and frontend directories.

Backend .env example

OPENAI_API_KEY=your_openai_api_key
PORT=5000
ALLOWED_ORIGINS=http://localhost:5173,https://polyglot-static.onrender.com

Frontend .env example

VITE_API_BASE_URL=http://localhost:5000

▶️ Running Locally

Start backend

cd backend
npm run dev

Start frontend

cd frontend
npm run dev

✅ Testing

Frontend tests

cd frontend
npm test

Frontend coverage

cd frontend
npm run test:coverage

📁 Project Structure

polyglot/
├── frontend/
│   ├── src/
│   │   ├── pages/
│   │   │   ├── App.tsx                # Translator page container
│   │   │   ├── WelcomeScreen.tsx      # Landing page with branding and app entry
│   │   │   ├── components/
│   │   │   │   ├── TranslationForm.tsx
│   │   │   │   └── TranslationMessages.tsx
│   │   │   └── hooks/
│   │   │       └── useTranslationChat.ts # Translation chat state, submit flow, and UI handlers
│   │   ├── config/
│   │   │   ├── deploy.config.ts       # Frontend deploy/runtime settings
│   │   │   └── endpoints.config.ts    # API endpoint definitions used by the client
│   │   ├── test/                       # UI and routing-focused component tests
│   │   ├── utils/
│   │   │   └── requests.ts            # HTTP request helpers for backend communication
│   │   └── index.css                  # Global styles and Polyglot UI theme
│   ├── public/                        # Static assets served as-is
│   └── dist/                          # Production build output
├── backend/
│   ├── src/
│   │   ├── app.ts                     # Express app setup, middleware, and route registration
│   │   ├── controllers/
│   │   │   └── translate.controllers.ts # Translation endpoint logic and OpenAI integration
│   │   ├── routes/
│   │   │   └── translate.routes.ts    # Route registration for translate API
│   │   └── middleware/
│   │       ├── sanitize.middleware.ts # Request input sanitization and validation hardening
│   │       └── rateLimiter.middleware.ts # API rate limiting to protect backend resources
│   └── dist/                          # Compiled backend output
└── README.md

🛡️ Backend Protections

• Request sanitization middleware
• Rate limiting
• CORS configuration
• Error handling for missing input, unknown endpoints, and server failures

🔮 Future Improvements

• Add support for more languages
• Add copy-to-clipboard functionality
• Save translation history
• Add user authentication
• Improve accessibility
• Add backend integration tests