tiju_translate

Tiju Translate

A React application with Google Translate integration that provides a clean, responsive translation interface.

Features

• Google Translate Widget Integration: Seamless integration with Google Translate API
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Clean UI: Hidden Google Translate banner with custom styling
• Fixed Position Dropdown: Translate widget positioned in the top-right corner
• React Router: Navigation between home and translate pages

Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn

Installation

• Clone the repository or navigate to the project directory
• Install dependencies:

  npm install
  

Running the Application

• Start the development server:

  npm start
  

• Open http://localhost:3000 to view it in the browser.

• Navigate to /translate to see the Google Translate widget in action.

Project Structure

src/
├── components/
│   ├── Home.tsx          # Home page component
│   ├── Translate.tsx     # Translate page with Google Translate widget
│   └── translate.css     # Styling for the translate component
├── types/
│   └── global.d.ts       # TypeScript declarations for Google Translate API
├── App.tsx               # Main app component with routing
└── index.tsx             # App entry point

How It Works

• Home Page (/): Welcome page with navigation to the translate page
• Translate Page (/translate): Contains the Google Translate widget
  • Loads Google Translate script dynamically
  • Initializes the translate widget
  • Handles cleanup when component unmounts
  • Responsive design for different screen sizes

Styling Features

• Hidden Banner: Google Translate's top banner is completely hidden
• Fixed Position: Translate dropdown is positioned in the top-right corner
• Responsive: Different layouts for desktop, tablet, and mobile
• Clean Interface: Removes Google branding and unnecessary elements

Available Scripts

• npm start - Runs the app in development mode
• npm test - Launches the test runner
• npm run build - Builds the app for production
• npm run eject - Ejects from Create React App (one-way operation)

Technologies Used

• React 18
• TypeScript
• React Router DOM
• Google Translate API
• CSS3 with responsive design

Browser Support

This application works in all modern browsers that support:

• ES6+ JavaScript
• CSS Grid and Flexbox
• Google Translate API

Notes

• The Google Translate widget requires an internet connection to function
• The translate functionality is provided by Google's free translation service
• No API keys are required for basic translation functionality