Skip to content

ChannelerH/pig-latin-translator

Repository files navigation

online trial

https://piglatintranslator.pro/

Pig Latin Translator

A modern, embeddable Pig Latin translation tool built with React and TypeScript. This application provides a sleek interface for translating between English and Pig Latin, with support for embedding the translator in other websites.

Pig Latin Translator

Features

  • 🔄 Bi-directional translation between English and Pig Latin
  • 💅 Modern, responsive UI with beautiful gradients
  • 🎯 Embeddable widget for third-party websites
  • ⚡ Built with Vite for lightning-fast development
  • 🎨 Styled with Tailwind CSS
  • 📱 Mobile-friendly design

Getting Started

Prerequisites

  • Node.js (v16 or higher)
  • npm or yarn

Installation

  1. Clone the repository:
git clone https://github.com/ChannelerH/pig-latin-translator.git
cd pig-latin-translator
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev

The application will be available at http://localhost:5173

Building for Production

To create a production build:

npm run build

The built files will be available in the dist directory.

Embedding the Translator

You can embed the Pig Latin Translator in your website using an iframe. Visit the /embed-instructions page in the application for detailed instructions and code snippets.

Basic embedding example:

<iframe 
  src="https://piglatintranslator.pro/embed"
  width="100%"
  height="400"
  frameborder="0"
  style="border-radius: 12px; overflow: hidden;"
></iframe>

Project Structure

src/
├── components/           # Reusable React components
│   └── EmbeddableTranslator.tsx
├── pages/               # Page components
│   ├── Embed.tsx
│   └── EmbedInstructions.tsx
├── utils/               # Utility functions
│   └── translator.ts    # Translation logic
├── App.tsx             # Main application component
└── main.tsx            # Application entry point

Technology Stack

  • React 18
  • TypeScript
  • Vite
  • Tailwind CSS
  • React Router DOM
  • Lucide React (for icons)

Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Releases

No releases published

Packages

 
 
 

Contributors