Gato Encoder

Welcome to the React Gato Encoder! This app is a fun and interactive way to encode text into Gato Code, a visual representation of letters based on a 9-quadrant system. Whether you’re a scout or just curious about unique encoding systems, this app is for you!

What is Gato Code?

Gato Code is a playful encoding system inspired by the T9 text input method used in old mobile phones. Each letter is represented by an image of a quadrant, with a * indicating the position of the letter (start, middle, or end). It’s a creative way to visualize text!

How It Works

The app takes your input text and converts it into Gato Code in real-time. Each letter is displayed as an image corresponding to its Gato Code representation. Spaces are handled gracefully, and you can clear the input field anytime with a single click.

Features

Real-Time Encoding: See your text transform into Gato Code as you type.
Interactive UI: A clean and responsive interface for easy use.
Clear Input: A handy “Limpiar” button to reset the input field.
Description Toggle: Learn more about Gato Code with a collapsible description section.

How to Use the App

Enter Text: Type any text into the input field labeled “Texto.”
View the Code: Watch as your text is instantly converted into Gato Code below the input field.
Clear the Input: Click the “Limpiar” button to reset the input field and start fresh.
Learn More: Click the “Descripción” button to expand a section explaining the Gato Code system.

Example in Action

Here’s a sneak peek of what the app looks like in action:

Getting Started Locally

Want to run the app on your own machine? Follow these steps:

Prerequisites

Make sure you have the following installed:

Node.js (v14 or higher)
npm (comes with Node.js)

Installation

Clone the repository:

git clone https://github.com/your-username/react-gatocode.git
cd react-gatocode

Install the dependencies:
Terminal window
```
npm install
```
Start the development server:
Terminal window
```
npm run dev
```
Open your browser and navigate to:
```
http://localhost:5173
```

App Architecture

The app is built with React and uses Vite for fast development. Here’s a quick breakdown of the main components:

App: The main container for the app.
GatoKey: Converts text into Gato Code images.
Input Field: Captures user input.
Buttons: For clearing input and toggling the description.

Contributing

We love contributions! If you have ideas or improvements, feel free to fork the repository and submit a pull request.

License

This project is licensed under the MIT License.

Enjoy encoding with the React Gato Encoder! 🎉