App Traductora | B14S es un proyecto desarrollado para un reto de programación tipo Dev Challenge.
Se trata de una interfaz web para traducir texto entre distintos idiomas usando APIs externas y tecnologías modernas como TypeScript y React.
Esta aplicación traductora permite al usuario:
- Escribir texto en un idioma origen
- Seleccionar idioma de destino
- Recibir la traducción automáticamente
- Copiar el resultado con un solo clic
El objetivo es practicar habilidades modernas de frontend como:
- Consumo de API
- Manejo de estado
- Interacción del usuario
- Reutilización de componentes
- React
- TypeScript
- HTML5
- CSS3
- Tailwind CSS
- Fetch API o Axios
- íconos SVG
- Responsive Design
- TextArea de entrada para texto original
- Select de idioma de origen y destino
- Botón de intercambio de idiomas
- Panel de salida con traducción
- Copiar al portapapeles
- Responsive UI adaptada a móviles y desktop
.
├── index.html
├── src/
│ ├── App.tsx
│ ├── main.tsx
│ ├── components/
│ │ ├── LanguageSelector.tsx
│ │ ├── TranslatorPanel.tsx
│ │ └── ButtonCopy.tsx
│ ├── hooks/
│ │ └── useTranslate.ts
│ ├── services/
│ │ └── translateAPI.ts
│ └── styles/
│ └── app.css
├── public/
│ └── favicon.svg
├── tsconfig.json
├── vite.config.ts
## 🛠️ En desarrollo
- [ ] Detección automática de idioma
- [ ] Historial de traducciones
- [ ] Soporte para voz (TTS)
- [ ] Integración con Google Translate API
- [ ] Tema oscuro activable
---
## 🧑💻 Autor
**Bryan14Saenz**
> “Programa no para resolver problemas, sino para crear soluciones.”
📧 Correo: [14bryansaenz@gmail.com](mailto:14bryansaenz@gmail.com)
🌐 GitHub: [github.com/Bryan14Saenz](https://github.com/Bryan14Saenz)
🔗 LinkedIn: [linkedin.com/in/14bryansaenz](https://www.linkedin.com/in/14bryansaenz)
---
## 🌍 Demo en línea
🟢 Disponible en [translateappb14s.netlify.app](https://translateappb14s.netlify.app)