📱 Gymmetry Frontend - Aplicación React Native

Una aplicación móvil moderna construida con React Native y Expo, diseñada para gestión de usuarios y fitness con arquitectura robusta y tecnologías de vanguardia.

🚀 Guía Rápida

# 1) Instalar dependencias
npm install

# 2) Iniciar en entorno local (carga environment/.env.local)
npm run start:local

# 3) Elegir plataforma en el prompt (a, i, w) o usar:
npm run android   # Android
npm run ios       # iOS
npm run web       # Web

Verificación de calidad

npm run lint           # Lint
npm run format         # Formateo
npm run type-check     # TypeScript (sin emitir)
npm run test           # Tests (jest-expo)
npm run test:coverage  # Tests con cobertura (genera carpeta coverage/)
npm run validate       # Lint + format-check + type-check + test:ci

Notas:

• Los reportes HTML de cobertura se guardan en coverage/ (gitignored). Abre coverage/index.html para verlos.
• No edites manualmente .env raíz; usa los scripts start:* que ejecutan env-loader.js.

⚙️ Configuración del Entorno

Variables de Entorno

El proyecto utiliza archivos de configuración específicos por entorno ubicados en la carpeta environment/:

• .env.local - Desarrollo local
• .env.development - Entorno de desarrollo
• .env.production - Entorno de producción

Variables Requeridas:

# Configuración de API Principal
EXPO_PUBLIC_API_BASE_URL=http://192.168.0.16:7160/api
EXPO_PUBLIC_API_MAIN_FUNCTIONS_KEY=your-main-api-key

# Configuración de API de Catálogos (Azure Functions)
EXPO_PUBLIC_CATALOGS_API_BASE_URL=https://your-catalogs-api.azurewebsites.net/api
EXPO_PUBLIC_API_FUNCTIONS_KEY=your-azure-functions-key

# Configuración General
EXPO_PUBLIC_ENV=local
EXPO_PUBLIC_DEBUG=true
EXPO_PUBLIC_ENVIRONMENT=local

Scripts de entorno

Los scripts preparan el archivo .env correcto antes de iniciar:

{
  "start:local": "npx cross-env NODE_ENV=local EXPO_PUBLIC_ENV=local node env-loader.js && expo start",
  "start:dev": "npx cross-env NODE_ENV=development EXPO_PUBLIC_ENV=development node env-loader.js && expo start",
  "start:prod": "npx cross-env NODE_ENV=production EXPO_PUBLIC_ENV=production node env-loader.js && expo start"
}

env-loader.js copia el .env.<entorno> desde environment/ a la raíz y completa variables sin prefijo para compatibilidad con Node.

🔧 Tecnologías y Librerías

Core Framework

• React Native - Framework móvil multiplataforma
• Expo SDK ~53.0.20 - Plataforma y herramientas de desarrollo
• TypeScript 5.8.3 - Tipado estático con strict mode optimizado

Desarrollo y Calidad de Código

• ESLint + Prettier - Reglas estrictas activas (sin any, imports no usados, hooks deps)
• TypeScript strict - Tipado fuerte con chequeo en CI (npm run type-check)
• Jest (jest-expo) - Soporte de tests y cobertura
• Metro Bundler - Empaquetado optimizado con Expo

Navegación y Routing

• Expo Router - Navegación basada en archivos
• React Navigation - Stack y Tab navigation

Gestión de Estado y Datos

• React Context API - Estado global con AuthContext
• Custom Hooks - Lógica reutilizable (useStep1Form-useStep5Form)
• Form Management - Validación y manejo de formularios multi-paso

HTTP y APIs

• Axios - Cliente HTTP con interceptores y timeout
• Azure Functions - API de catálogos serverless
• REST API - API principal con manejo de errores robusto
• cURL Generation - Debug automático de peticiones HTTP

Interfaz de Usuario

• React Native Elements - Componentes base
• Expo Vector Icons - Iconografía completa
• Custom Components - Sistema de componentes modular
• Responsive Design - Adaptable a diferentes pantallas

Manejo de Imágenes y Media

• Expo Image Picker - Selección desde galería/cámara
• Expo Image Manipulator - Redimensionamiento automático (2MP)
• Lottie Animations - Animaciones de carga suaves

Validaciones y Utilidades

• Real-time Validation - Validación en tiempo real
• Phone Number Validation - Validación internacional de teléfonos
• Date Formatting - Utilidades de formato de fecha DD/MM/YYYY
• Error Handling - Sistema centralizado de manejo de errores

🏗️ Arquitectura del Proyecto

Estructura de Carpetas Optimizada

gymmetry-front/
├── app/                          # Rutas y pantallas principales (Expo Router)
│   ├── (tabs)/                   # Navegación por tabs
│   │   ├── index.tsx             # Pantalla principal
│   │   └── _layout.tsx           # Layout de tabs
│   ├── login.tsx                 # Pantalla de login
│   ├── register.tsx              # Registro multi-paso
│   └── _layout.tsx               # Layout raíz
├── components/                   # Componentes reutilizables
│   ├── auth/                     # Sistema de autenticación completo
│   │   ├── Step1.tsx - Step5.tsx # Pasos del registro (refactorizados)
│   │   ├── hooks/                # Custom hooks optimizados
│   │   │   ├── useStep1Form.ts - useStep5Form.ts
│   │   │   ├── useRegisterForm.ts
│   │   │   └── useValidation.ts
│   │   ├── data/                 # Datos estáticos (países, fitness)
│   │   ├── utils/                # Utilidades de validación y formato
│   │   ├── AuthContext.tsx       # Contexto global de autenticación
│   │   └── CustomAlert.tsx       # Sistema de alertas personalizado
│   ├── common/                   # Componentes comunes
│   │   └── EntityList.tsx        # 🔥 Patrón unificado para listas
│   ├── bill/                     # Gestión de facturación
│   ├── branches/                 # Gestión de sucursales
│   ├── catalogs/                 # Componentes de catálogos
│   ├── comment/                  # Sistema de comentarios
│   ├── exercise/                 # Gestión de ejercicios
│   ├── gym/                      # Gestión de gimnasios
│   ├── history/                  # Historial y tracking
│   ├── machine/                  # Gestión de máquinas
│   ├── occupancy/                # Control de ocupación
│   ├── plan/                     # Gestión de planes
│   ├── planType/                 # Tipos de planes
│   └── home/                     # Componentes del dashboard
├── services/                     # Capa de servicios
│   ├── apiService.ts             # Servicio principal con interceptores
│   ├── catalogService.ts         # Azure Functions integration
│   └── userSessionService.ts     # Gestión de sesiones
├── environment/                  # Configuración multi-entorno
│   ├── .env.local                # Variables de desarrollo local
│   ├── .env.development          # Variables de desarrollo
│   ├── .env.production           # Variables de producción
│   └── index.ts                  # Configuración centralizada
├── dto/                          # Data Transfer Objects tipados
│   ├── auth/                     # Requests/Responses de auth
│   ├── user/                     # DTOs de usuario
│   └── common/                   # DTOs compartidos
├── types/                        # Definiciones TypeScript
├── utils/                        # Utilidades globales
│   ├── errorUtils.ts             # Manejo centralizado de errores
│   ├── formatUtils.ts            # Formateo de fechas y datos
│   └── objectUtils.ts            # Manipulación de objetos
├── constants/                    # Constantes y configuraciones
└── assets/                       # Recursos estáticos
    ├── animations/               # Lottie animations
    ├── images/                   # Imágenes e iconos
    └── fonts/                    # Fuentes personalizadas

Patrones de Arquitectura Implementados

🔥 Patrón EntityList Unificado:

• Consistencia Total - 57+ componentes usando el mismo patrón
• UI Rica y Contextual - Tarjetas con información específica por dominio
• Estados Visuales - Colores semánticos y indicadores de estado
• Secciones Especializadas - Récords, consejos, restricciones, etc.
• Responsive Design - Adaptable a todos los dispositivos
• Manejo Robusto - Loading, error y empty states incluidos

Arquitectura en Capas Mejorada:

• Presentación - Componentes React Native con TypeScript strict
• Lógica de Negocio - Custom Hooks especializados por funcionalidad
• Servicios - Capa de API con manejo robusto de errores
• Datos - DTOs tipados y validación de esquemas
• Utilities - Funciones puras reutilizables

Patrón de Composición:

• Componentes modulares y reutilizables
• Separación clara de responsabilidades
• Inyección de dependencias via props/context

Error Boundaries y Manejo de Estados:

• Sistema centralizado de manejo de errores
• Estados de carga, éxito y error bien definidos
• Fallbacks y recuperación automática

🎯 Patrón EntityList - Arquitectura Unificada

🧩 EntityList Pattern

El proyecto implementa un patrón arquitectónico unificado para la gestión de listas, aplicado consistentemente en 57+ componentes. Este patrón garantiza coherencia visual, mantenibilidad y escalabilidad.

Características del Patrón

🎨 UI Rica y Contextual:

• Tarjetas con información específica por dominio
• Headers con título y estado visual
• Secciones especializadas (récords, consejos, restricciones)
• Metadatos relevantes por tipo de entidad

⚡ Estados Bien Definidos:

• Loading states con animaciones Lottie
• Empty states informativos
• Error handling robusto
• Success states con datos ricos

🎯 Configuración Flexible:

<EntityList
  title='Ejercicios del Día'
  loadFunction={loadDailyExercises}
  renderItem={renderDailyExerciseItem}
  keyExtractor={keyExtractor}
  emptyTitle='No hay ejercicios'
  emptyMessage='No se encontraron ejercicios para hoy'
  loadingMessage='Cargando ejercicios del día...'
/>

Componentes Implementados

👥 Gestión de Usuarios (9 componentes):

• UserList, EmployeeUserList, FitUserList, UserTypeList
• OtpList, PermissionList, LogUninstallList, EmployeeTypeList
• EmployeeRegisterDailyList

🏋️ Gimnasios y Facilities (12 componentes):

• GymList, BranchList, GymTypeList, GymImageList, GymPlanSelectedList
• MachineList, EquipmentList, MachineCategoryList, ScheduleList
• CurrentOccupancyList, BranchMediaList, GymPlanSelectedTypeList

📋 Planes y Rutinas (8 componentes):

• PlanList, PlanTypeList, RoutineTemplateList, RoutineDayList
• RoutineAssignedList, ExerciseList, DailyExerciseList, DailyExerciseHistoryList

💬 Social y Contenido (6 componentes):

• FeedList, PostList, CommentList, LikeList
• NotificationList, NotificationOptionList

💰 Administración (10 componentes):

• BillList, PaymentMethodList, AccessMethodTypeList, ModuleList
• SubModuleList, DietList, PhysicalAssessmentList, UninstallOptionList
• SignalRList, JourneyEmployeeList

📊 Historial y Analytics (2 componentes):

• DailyHistoryList, LogUninstallList

Beneficios Arquitectónicos

✅ Mantenibilidad: Un solo patrón para mantener
✅ Consistencia: UX uniforme en toda la app
✅ Escalabilidad: Fácil agregar nuevos componentes
✅ Testabilidad: Patrón predecible para testing
✅ Performance: Optimizado con lazy loading
✅ Accesibilidad: Soporte uniforme para a11y

---

API Principal

• URL Base: Configurable por entorno
• Autenticación: Bearer Token (cuando esté implementado)
• Timeout: 10 segundos
• Headers: Content-Type, Accept, User-Agent personalizados

API de Catálogos (Azure Functions)

• Endpoint: Azure Functions App
• Autenticación: x-functions-key header
• Funcionalidades:
  • Consulta de géneros
  • Consulta de países y regiones
  • Consulta de ciudades
  • Consulta de EPS
  • Consulta de tipos de documento

Debugging de APIs

El proyecto incluye generación automática de comandos cURL (compatible con Windows) para todas las peticiones HTTP, facilitando el debugging manual.

📱 Funcionalidades Principales

Sistema de Autenticación Completo

• Registro Multi-paso Optimizado (5 pasos con validación):

  1. Credenciales - Email/contraseña con validación en tiempo real
  2. Info Personal - Nombres, teléfono, fecha nacimiento, género
  3. Ubicación - País, región, ciudad, datos médicos (EPS, documento)
  4. Salud & Fitness - Objetivos, restricciones, información adicional
  5. Perfil - Foto de perfil con redimensionamiento automático

• Login Seguro - Autenticación con manejo de tokens

• Validaciones Robustas - Verificación client-side y server-side

Gestión Inteligente de Catálogos

• Carga Dinámica desde Azure Functions
• Cache Inteligente con lazy loading
• Dependencias Jerárquicas (países → regiones → ciudades)
• Ordenamiento Automático alfabético
• Filtrado en Tiempo Real para búsquedas rápidas

Manejo Avanzado de Imágenes

• Selección Múltiple - Galería, cámara, archivos
• Redimensionamiento Automático a 2MP para optimización
• Compresión Inteligente manteniendo calidad visual
• Preview en Tiempo Real antes de subir

Sistema de Validaciones

• Email Validation - Regex y verificación de formato
• Password Strength - Validación de complejidad en tiempo real
• Phone Validation - Soporte internacional con códigos de país
• Form Validation - Validación por pasos con feedback inmediato
• Error Handling - Sistema centralizado con mensajes contextuales

UX/UI Optimizada

• EntityList Pattern - 🔥 Patrón unificado para 57+ componentes de listas
• Diseño Consistente - UI coherente en toda la aplicación
• Loading States - Animaciones Lottie suaves
• Error Boundaries - Manejo elegante de errores
• Responsive Design - Adaptable a todos los tamaños de pantalla
• Accessibility - Soporte para lectores de pantalla
• Dark/Light Mode - Theming dinámico (preparado)
• Cards Contextuales - Información rica específica por dominio
• Estados Visuales - Indicadores semánticos de estado

🛠️ Calidad de Código y Desarrollo

Estado Actual del Proyecto

• TypeScript estricto, sin errores conocidos
• Linter y formateo configurados y ejecutables
• Tests básicos listos; cobertura opcional

Configuración TypeScript Optimizada

{
  "strict": true,
  "noImplicitReturns": true,
  "noFallthroughCasesInSwitch": true,
  "exactOptionalPropertyTypes": false, // Optimizado para productividad
  "noUnusedLocals": false, // Flexibilidad en desarrollo
  "noUncheckedIndexedAccess": false // Balance strict/productivo
}

Scripts útiles

npm run format:check   # Verificar formato sin cambiar archivos
npm run lint:check     # Lint con max-warnings=0
npm run clean          # Limpiar caché de Metro
npm run test:ci        # Tests en CI con cobertura

Buenas Prácticas Implementadas

• EntityList Pattern - 🔥 Patrón unificado para 57+ componentes de listas
• Componentes Modulares - Separación clara de responsabilidades
• Custom Hooks - Lógica reutilizable y testeable
• Error Boundaries - Manejo robusto de errores
• Type Safety - TypeScript strict mode optimizado
• Code Organization - Estructura escalable y mantenible
• Performance - Lazy loading y optimizaciones de memoria
• Consistent UI/UX - Diseño coherente entre todos los componentes
• Domain-Specific Theming - Información contextual por tipo de entidad

Debugging y Monitoreo

# Debug de APIs (auto-generado)
curl -X POST "http://api/endpoint" \
  -H "Content-Type: application/json" \
  -d '{"data": "example"}'

# Logs estructurados
console.log('[API] Request:', requestData);
console.log('[FORM] Validation:', errors);

🚢 Configuración y Deployment

Variables de Entorno Requeridas

# API Principal
EXPO_PUBLIC_API_BASE_URL=http://192.168.0.16:7160/api
EXPO_PUBLIC_API_MAIN_FUNCTIONS_KEY=your-main-api-key

# API de Catálogos (Azure Functions)
EXPO_PUBLIC_CATALOGS_API_BASE_URL=https://your-catalogs-api.azurewebsites.net/api
EXPO_PUBLIC_API_FUNCTIONS_KEY=your-azure-functions-key

# Configuración General
EXPO_PUBLIC_ENV=development
EXPO_PUBLIC_DEBUG=true
EXPO_PUBLIC_ENVIRONMENT=development

Dependencias

Usa npm install y sigue recomendaciones de expo doctor/expo install cuando sea necesario.

Builds y Deployment

# Build para producción
npm run build
npx expo export

# Builds nativos
npx expo prebuild
npx expo run:android --variant release
npx expo run:ios --configuration Release

# EAS Build (recomendado)
npx eas build --platform all

Checklist de Deployment

• Variables de entorno configuradas por ambiente
• API keys rotadas y seguras
• HTTPS habilitado en producción
• Imágenes optimizadas (automático 2MP)
• TypeScript sin errores (npm run type-check)
• Build exitoso sin warnings
• Testing en múltiples dispositivos

Seguridad y Performance

• HTTPS Only en producción
• API Timeout 10 segundos configurado
• Image Optimization automática a 2MP
• Lazy Loading de catálogos
• Error Recovery automático
• Input Validation client & server side

---

🎯 Estado del Proyecto y Últimas Mejoras

✅ Recientes Mejoras Implementadas (Agosto 2025)

🔥 Refactorización Masiva de Arquitectura

• 57+ Componentes List refactorizados al patrón EntityList unificado
• Arquitectura Consistente implementada en toda la aplicación
• Patrón EntityList como estándar para gestión de listas
• UI/UX Unificada con diseño coherente entre todos los componentes

Componentes Refactorizados con EntityList

Gestión de Usuarios y Autenticación:

• UserList, EmployeeUserList, FitUserList, UserTypeList
• OtpList, PermissionList, LogUninstallList

Gestión de Gimnasios y Facilities:

• GymList, BranchList, GymTypeList, GymImageList
• MachineList, EquipmentList, MachineCategoryList
• CurrentOccupancyList, ScheduleList

Sistema de Planes y Rutinas:

• PlanList, PlanTypeList, GymPlanSelectedList, GymPlanSelectedTypeList
• RoutineTemplateList, RoutineDayList, RoutineAssignedList
• ExerciseList, DailyExerciseList, DailyExerciseHistoryList

Social y Contenido:

• FeedList, PostList, CommentList, LikeList
• NotificationList, NotificationOptionList

Administración y Catálogos:

• BillList, PaymentMethodList, AccessMethodTypeList
• ModuleList, SubModuleList, EmployeeTypeList
• DietList, PhysicalAssessmentList

Historial y Tracking:

• DailyHistoryList, JourneyEmployeeList
• EmployeeRegisterDailyList, UninstallOptionList

Limpieza Completa de Código

• 85 → 0 Errores TypeScript eliminados completamente
• Configuración TypeScript optimizada para balance productividad/calidad
• Validaciones Null-Safe implementadas en formatters y utilidades
• AuthContext corregido con valores por defecto apropiados

Componentes Refactorizados

• Step1-Step5.tsx completamente optimizados
• Custom Hooks (useStep1Form-useStep5Form) mejorados
• Error Handling centralizado y robusto
• Form Validation en tiempo real perfeccionada

Herramientas de Desarrollo

• Scripts automatizados para verificación de calidad
• Prettier configurado y funcionando
• Type checking sin errores
• Build de producción funcionando correctamente

🚀 Estado Actual (resumen)

• TS estricto y linter configurados
• EntityList aplicado ampliamente
• Tests básicos y cobertura disponibles

📊 Métricas de Calidad (indicativas)

• Cobertura: generable con npm run test:coverage (revisar coverage/)
• Tipado: verificación con npm run type-check
• Formato/Lint: npm run format:check y npm run lint:check

🔄 Próximos Pasos Sugeridos

1. Testing: Implementar tests unitarios y de integración para EntityList
2. Performance: Análisis de bundle size y optimización
3. Accessibility: Mejorar soporte para lectores de pantalla en EntityList
4. Dark Mode: Completar implementación de temas
5. Offline Support: Cache y sincronización offline
6. EntityList Enhancements: Añadir funcionalidades como filtros y ordenamiento
7. Component Library: Documentar y exportar EntityList como librería reutilizable

⚡ Desarrollado con React Native + Expo para máximo rendimiento y experiencia de usuario