Conversor de Monedas Vue

Aplicación web académica para convertir monedas con una interfaz clara, responsive y orientada a buenas prácticas profesionales de desarrollo frontend con Vue 3.

El proyecto está construido con Vue 3, Vite, Pinia y Vue Router. La arquitectura separa componentes visuales, estado global, lógica reusable y servicios de conversión para facilitar mantenimiento, escalabilidad y una futura integración con una API real de tipos de cambio.

---

Tabla de contenidos

1. Características clave
2. Arquitectura y stack
3. Comenzar
4. Variables de entorno
5. Scripts disponibles
6. Estructura del proyecto
7. Calidad y buenas prácticas
8. Despliegue en Netlify
9. Mejoras futuras
10. Licencia

---

Características clave

• Conversor de monedas: formulario para ingresar monto, seleccionar moneda de origen y destino, e interpretar el resultado.
• Estado global con Pinia: administración centralizada de monto, monedas, tasas, resultado, historial, carga y errores.
• Lógica desacoplada: cálculos y tasas ubicados en src/services/exchangeService.js, listos para reemplazarse por una API real.
• Composable dedicado: useCurrencyConverter encapsula la lógica del flujo principal y evita sobrecargar las vistas.
• Historial de conversiones: registro de conversiones recientes durante la sesión.
• Rutas informativas: páginas de proyecto, ayuda, privacidad y términos.
• Diseño responsive: experiencia adaptada para móvil, tablet y escritorio.
• Preparado para Netlify: incluye _redirects para soportar rutas internas con Vue Router history mode.

Arquitectura y stack

Capa	Tecnologías	Descripción
Framework frontend	Vue 3, Composition API	Componentes declarativos y lógica reactiva.
Build tool	Vite	Desarrollo rápido y build optimizada para producción.
Estado global	Pinia	Store centralizado para datos del conversor.
Rutas	Vue Router	Navegación entre inicio, proyecto, ayuda, privacidad y términos.
Estilos	CSS moderno	Variables CSS, responsive design y sistema visual personalizado.
Calidad	ESLint, Prettier	Reglas de formato y validación estática del código.
Hosting objetivo	Netlify	Despliegue estático con build npm run build y salida dist.

Comenzar

Requisitos previos

• Node.js 20 LTS o superior recomendado.
• npm 10 o superior.
• Git instalado si vas a clonar el repositorio.

Instalación

# 1. Clona el repositorio
git clone https://github.com/EzerZuniga/conversor-monedas-vue.git
cd conversor-monedas-vue

# 2. Instala dependencias
npm install

# 3. Levanta el servidor de desarrollo
npm run dev

La aplicación queda disponible por defecto en:

http://localhost:5173

Variables de entorno

Actualmente el proyecto no requiere variables de entorno obligatorias para ejecutarse o desplegarse.

La aplicación usa tasas de cambio locales de respaldo dentro de src/services/exchangeService.js. Si en una siguiente versión se conecta una API externa, se recomienda usar variables con prefijo VITE_, por ejemplo:

Variable	Uso
VITE_EXCHANGE_API_URL	URL base del proveedor de tipos de cambio.
VITE_EXCHANGE_API_KEY	Clave pública o token del proveedor, si aplica.

Scripts disponibles

Script	Descripción
npm run dev	Inicia Vite en modo desarrollo.
npm run build	Genera la build optimizada de producción en dist/.
npm run preview	Sirve localmente la build generada.
npm run lint	Ejecuta ESLint y aplica correcciones automáticas.
npm run format	Formatea archivos dentro de src/ con Prettier.

Estructura del proyecto

conversor-monedas-vue/
├── public/
│   ├── _redirects                 # Soporte SPA para Netlify
│   ├── icons/                     # Favicons e iconos PWA
│   ├── images/                    # Logo e imagen principal
│   ├── manifest.webmanifest       # Configuración básica PWA
│   └── robots.txt
├── src/
│   ├── assets/
│   │   └── css/main.css           # Sistema visual y responsive design
│   ├── components/                # Header, footer, formulario, historial y UI base
│   ├── composables/               # Lógica reusable del convertidor
│   ├── router/                    # Definición de rutas públicas
│   ├── services/                  # Tasas, monedas soportadas y cálculos
│   ├── stores/                    # Estado global con Pinia
│   ├── views/                     # Vistas principales e informativas
│   ├── App.vue                    # Layout principal
│   └── main.js                    # Bootstrap de Vue
├── index.html
├── package.json
└── vite.config.js

Calidad y buenas prácticas

Antes de enviar cambios o desplegar una nueva versión, ejecuta:

npm run lint
npm run build

Buenas prácticas aplicadas:

• Separación entre componentes, vistas, estado, composables y servicios.
• Uso de nombres descriptivos para componentes, acciones y datos del dominio.
• Validación básica del monto antes de ejecutar la conversión.
• Manejo de estado de carga y mensajes de error.
• Rutas con carga diferida para reducir el JavaScript inicial.
• Metadatos básicos, manifest, favicons y configuración SPA para Netlify.
• Enlaces secundarios para ayuda, privacidad y términos.

Mejoras futuras

• Conectar una API real de tipos de cambio.
• Persistir historial y monedas favoritas en localStorage.
• Agregar conversión múltiple hacia varias monedas.
• Mostrar tasas populares en una sección tipo dashboard.
• Añadir pruebas unitarias para cálculos y validaciones.
• Mejorar accesibilidad con pruebas de teclado y lectores de pantalla.

Licencia

Distribuido bajo licencia MIT. Revisa el archivo LICENSE para más detalles.

Créditos

Desarrollado como proyecto académico de Desarrollo Frontend con Vue 3, aplicando una estructura modular, mantenible y preparada para evolución profesional.