Workout App Frontend 🏋️‍♀️

Aplicación frontend moderna para la gestión de entrenamientos, atletas y rutinas de ejercicio. Construida con Vue 3, TypeScript y Tailwind CSS, diseñada para conectarse con la Workout App API.

📋 Tabla de Contenidos

• Descripción
• Stack Tecnológico
• Características
• Requisitos
• Instalación
• Configuración
• Ejecución
• Estructura del Proyecto
• Funcionalidades Implementadas
• Componentes Principales
• API Integration
• Desarrollo
• Contribución

🎯 Descripción

Aplicación frontend para la gestión completa de entrenamientos y atletas. Ofrece una interfaz moderna y responsiva para entrenadores y atletas, permitiendo el registro, autenticación y gestión de sesiones de entrenamiento a través de una API REST robusta.

🛠️ Stack Tecnológico

• Framework: Vue 3 (Composition API)
• Lenguaje: TypeScript
• Build Tool: Vite
• Estilos: Tailwind CSS + DaisyUI
• Routing: Vue Router 4
• State Management: Pinia
• HTTP Client: Axios
• Validación: Joi
• Icons: Lucide Vue Next
• Linting: ESLint + Prettier

✨ Características

• 🔐 Sistema de autenticación completo (Login/Register/Logout) con persistencia de sesión
• 🧑‍💻 Gestión de estado global con Pinia (stores tipados, lógica desacoplada)
• 🧩 Navegación protegida y guards reactivos según el estado de autenticación
• 🗂️ Estructura modular: rutas separadas por dominio (auth/dashboard), layouts reutilizables y sidebar dinámico
• 🧑‍🎤 Componentes UI avanzados: Drawer, Sidebar, Navbar, Container, Iconos SVG personalizados
• 🏋️‍♂️ Dashboard de atletas (estructura inicial y vistas de ejemplo)
• 🧹 Eliminación de código legacy: migración de useLogin a store Pinia
• 🎨 UI moderna y responsiva con Tailwind CSS y DaisyUI
• 🌙 Tema claro/oscuro con persistencia
• 📱 Diseño mobile-first
• 🔒 Rutas protegidas con guards de autenticación
• 🚀 TypeScript para type safety
• 📦 Componentes reutilizables y modulares
• ⚡ Hot Module Replacement con Vite
• 🧪 Configuración de testing lista para usar

📋 Requisitos

• Node.js 18+
• Yarn o npm
• Workout App API ejecutándose en el backend

🚀 Instalación

# Clonar el repositorio
git clone https://github.com/tu-usuario/workout-app-front.git
cd workout-app-front

# Instalar dependencias
yarn install
# o
npm install

⚙️ Configuración

1. Configurar variables de entorno:

# Copiar el archivo de ejemplo
cp .env.example .env

# Editar las variables de entorno
VITE_API_URL=http://localhost:3000

2. Asegurar que la API esté ejecutándose:
   • Seguir las instrucciones de la Workout App API
   • La API debe estar ejecutándose en http://localhost:3000

🏃‍♂️ Ejecución

Desarrollo

# Iniciar servidor de desarrollo
yarn dev
# o
npm run dev

La aplicación estará disponible en http://localhost:5173

Producción

# Verificar tipos
yarn type-check

# Construir para producción
yarn build

# Previsualizar build
yarn preview

📁 Estructura del Proyecto

src/
├── components/          # Componentes reutilizables
│   ├── auth/           # Componentes de autenticación
│   ├── common/         # Componentes comunes (buttons, inputs, etc.)
│   └── icons/          # Iconos SVG personalizados
├── composables/        # Lógica reutilizable de Vue
│   ├── useAuth.ts      # Manejo de autenticación
│   ├── useForm.ts      # Manejo de formularios
│   ├── useLocalStorage.ts  # Persistencia local
│   └── useTheme.ts     # Gestión de temas
├── config/             # Configuración de la aplicación
├── layouts/            # Layouts de páginas
│   ├── auth/           # Layout para autenticación
│   └── dashboard/      # Layout para dashboard
├── router/             # Configuración de rutas
├── schemas/            # Schemas de validación Joi
├── services/           # Servicios HTTP y API
├── types/              # Definiciones de tipos TypeScript
├── utils/              # Utilidades y helpers
└── views/              # Páginas/vistas principales
    ├── auth/           # Vistas de autenticación
    └── dashboard/      # Vistas del dashboard

🎯 Funcionalidades Implementadas

✅ Autenticación

• Login de usuarios
• Registro de nuevos usuarios
• Logout
• Persistencia de sesión
• Rutas protegidas
• Manejo de tokens JWT

✅ Funcionalidades recientes y mejoras UI/UX

• Tabla de atletas con paginación, búsqueda y filtrado por nombre/email
• Barra de búsqueda accesible y genérica, con integración DaisyUI/context7
• Selector de campo para filtrar atletas (nombre/email)
• Tabs reutilizables para vistas de detalle de atleta (perfil, stats, etc.)
• Botón de acción "Editar" en cada fila de atleta
• Componentes de tabla (DefaultTable, TableRow, TableHeader) refactorizados y tipados
• Paginación minimalista con SVG y sin bordes, accesible
• Store de atletas con búsqueda reactiva y filtrado
• Estilos context7/DaisyUI en todos los componentes nuevos/refactorizados
• Carga y error visualmente consistentes en la UI

✅ Otras funcionalidades

• Store de autenticación con Pinia (login, logout, persistencia, guards)
• Refactor de rutas: separación por dominio (auth/dashboard)
• Drawer y sidebar navegable en dashboard
• Componentes base: Drawer, Sidebar, Container, Iconos SVG
• Eliminación de useLogin y migración a Pinia
• Manejo de errores mejorado en login y forgot password
• Vistas iniciales de atletas y perfil en dashboard

✅ UI/UX

• Sistema de temas (claro/oscuro)
• Componentes base reutilizables
• Navegación responsiva
• Formularios validados
• Estados de carga
• Manejo de errores

🚧 En Desarrollo

• Dashboard de atletas (más detalles y edición)
• Gestión de ejercicios
• Sesiones de entrenamiento
• Estadísticas y gráficos
• Perfil de usuario

🧩 Componentes Principales

Componentes Base

• DefaultButton: Botón reutilizable con variantes
• DefaultInput: Input con validación integrada
• DefaultNavbar: Barra de navegación principal
• DefaultAlert: Sistema de alertas
• DefaultSpinner: Indicador de carga
• ThemeController: Controlador de tema claro/oscuro

Layouts

• DefaultLayout: Layout base para autenticación
• DefaultDashboardLayout: Layout para el dashboard con navegación

Vistas

• LoginView: Página de inicio de sesión
• RegisterView: Página de registro
• DefaultDashboardView: Dashboard principal

🔗 API Integration

La aplicación se conecta con la Workout App API a través de:

Endpoints Utilizados

• POST /auth/login - Autenticación de usuarios
• POST /auth/signup - Registro de usuarios

Configuración HTTP

// src/services/api.service.ts
const apiService = {
  baseURL: VITE_API_URL,
  headers: {
    'Content-Type': 'application/json'
  }
}

🛠️ Desarrollo

Scripts Disponibles

# Desarrollo con hot reload
yarn dev

# Verificación de tipos
yarn type-check

# Build de producción
yarn build

# Linting
yarn lint
yarn lint:check

# Formateo de código
yarn format
yarn format:check

# Lint + Format
yarn lint-and-format

IDE Recomendado

VSCode con las siguientes extensiones:

• Volar (deshabilitar Vetur)
• TypeScript Vue Plugin
• Tailwind CSS IntelliSense

Configuración de TypeScript

El proyecto utiliza TypeScript con configuración estricta. Los tipos para archivos .vue son manejados por vue-tsc.

🤝 Contribución

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

Convenciones de Código

• Usar TypeScript estricto
• Seguir la guía de estilos de Vue 3 Composition API
• Usar Tailwind CSS para estilos
• Componentes en PascalCase
• Archivos de composables con prefijo use

📝 Licencia

Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.

🔗 Enlaces Relacionados

• Workout App API (Backend)
• Vue 3 Documentation
• Vite Documentation
• Tailwind CSS
• DaisyUI Components

---

⚡ Desarrollado con Vue 3 + TypeScript + Vite

yarn build

Lint with ESLint

yarn lint