CALICO — Calisthenics Coaches

App multiplataforma (iOS, Android y Web) de CALICO (by Luis Tena / luistenafit) para que el entrenador gestione a sus clientes, rutinas, entrenamientos y progreso desde un único lugar, y para que cada cliente acceda a su plan personalizado.

Construida con Expo (React Native + React Native Web) y Firebase (autenticación + Firestore).

Producción

• App en vivo: https://app.udeca.app (dominio propio con HTTPS; instalable en el móvil desde "Añadir a pantalla de inicio").
• Web pública: https://www.udeca.app — presentación, planes y descargas. Vive en web/ y se despliega aparte; ver docs/WEB.md.
• Acceso a la comunidad: https://acceso.udeca.app — la puerta al grupo privado de Telegram (acceso/).
• Cobros: qué se cobra, cuándo y por qué en iOS no se puede enseñar un precio dentro de la app; ver docs/COBROS.md.
• Diseño: colores, tipografía, componentes y cómo se comprueba una pantalla antes de darla por buena; ver docs/DISENO.md.
• Planificación por ciclos: cómo se monta una temporada en macro, meso y microciclos; ver docs/CICLOS.md.
• Despliegue automático: cada push a la rama de desarrollo compila la web y la publica en GitHub Pages vía .github/workflows/deploy.yml. No hay despliegues manuales.
• Offline: un service worker (public/sw.js) cachea la aplicación para carga instantánea y uso sin conexión (los datos de Firebase siempre van a red).

Estado del proyecto

Implementado hasta ahora:

Fase 1 (MVP)

• Login y registro con dos roles: entrenador y cliente.
• Vinculación cliente–entrenador mediante un código de invitación (sin necesidad de backend propio ni Cloud Functions).
• Gestión de clientes: listado, búsqueda, ficha de cliente.
• Biblioteca de ejercicios: creación, edición, filtro por grupo muscular, vídeo explicativo (enlace).
• Creación de rutinas: días de entrenamiento, ejercicios, series y repeticiones, asignación a cada cliente.
• Registro de entrenamientos: el cliente marca series completadas, reps y peso por sesión.
• Seguimiento de peso: registro semanal y gráfica de evolución.
• Dashboards: resumen para entrenador (clientes activos, últimos entrenamientos, alertas de inactividad) y para cliente (próximo entrenamiento, peso actual, resumen semanal).

Fase 2

• Nutrición: el entrenador crea un plan (calorías y macros) por cliente; el cliente registra comidas y ve su consumo del día frente al objetivo con barras de progreso.
• Sección Social: ranking de constancia de los miembros del mismo coaching (racha, entrenos de la semana y totales), con métricas públicas no sensibles almacenadas aparte del perfil.
• Medidas corporales: registro de pecho, cintura, cadera, brazo y muslo, con gráfica de evolución de cintura.
• Gráficos de progreso: componente de gráfica de líneas reutilizable (components/LineChart.tsx) usado tanto para el peso como para las medidas corporales.

Fase 3

• Notificaciones push: aviso al cliente cuando el entrenador le asigna o actualiza una rutina o un plan nutricional, y aviso a quien no está mirando el chat cuando recibe un mensaje nuevo. Se envían directamente desde el cliente a la API de Expo Push (sin servidor propio ni Cloud Functions). Requiere haber creado un proyecto EAS (npx eas init) para que se genere el projectId en app.json — sin él, la app sigue funcionando con normalidad pero no se registran tokens push.
• Reportes PDF: botón "Generar informe PDF" en la ficha de cada cliente (rutina, plan nutricional, medidas, historial de peso y entrenamientos), generado con expo-print y compartido con expo-sharing. En web abre el diálogo de impresión del navegador.
• Automatizaciones: recordatorio de un toque para que el entrenador avise a un cliente inactivo (envía un mensaje de chat + notificación push), y aviso automático al cliente en su panel si lleva más de una semana sin registrar su peso.
• Mejoras de diseño: feedback háptico en los botones (iOS/Android).

Fase 4 — Identidad CALICO y experiencia élite

• Rebranding CALICO: negro + oro (#A2968B), tipografías Cinzel/Inter, logotipos reales, degradados oro, halos y tarjetas con filo dorado.
• Perfil de alumno enriquecido: foto de perfil (base64 en Firestore), bio, nivel, peso objetivo, logros/insignias y recordatorio diario de entrenamiento configurable.
• Cursos en vídeo: cursos → secciones → lecciones, privados y solo visibles para alumnos del entrenador cuando están publicados; reproductor sin descarga. El alumno marca cada lección como vista (o la marca y salta a la siguiente de un toque) y ve su avance; el entrenador ve en el panel cuánto lleva el grupo, quién no ha empezado y quién se quedó a medias. Solo el alumno puede marcar: si pudiera hacerlo su entrenador, el dato dejaría de significar que lo ha visto.
• Tu tarjeta: pantalla propia para el entrenador, el atleta y el alumno. Un foco de luz sobre negro, UNA cifra cada vez —número de fundador, alumnos, entrenos, racha, puesto en el grupo— y una placa con el nombre. Se inclina en 3D al arrastrarla y se comparte como imagen. Solo aparece lo que es verdad y significa algo: nada de "0 entrenamientos" ni de "Nº 2 de 2".
• Intensidad por rutina en Sensaciones: en el modo a elección, el entrenador pone el porcentaje de cada rutina (50 %, 70 %, 90 %...) y el alumno lo ve ANTES de elegir, con una palabra al lado (suave, medio, fuerte, máximo). Es el dato sobre el que se decide "cómo me siento hoy". Encadenando varias rutinas manda la más dura: promediarlas mentiría a la baja.
• Fotos de progreso: frente/perfil/espalda, visibles solo para el alumno y su entrenador.
• Entreno inmersivo: barra de progreso de sesión, ejercicio actual destacado, cronómetro de descanso entre series (+30s/saltar), detección de récords personales y pantalla resumen post-entreno (duración, series, reps, volumen, PRs, racha).
• El récord, en el momento: al marcar la serie que bate una marca sale una banda dorada con la marca nueva y la anterior, con vibración de celebración. Una vez por ejercicio y sesión, y usando la misma función que el resumen final para que nunca celebre algo que luego no aparezca.
• Anillos de progreso: la semana del alumno y el pulso del grupo del entrenador se cierran como un anillo, no como una barra. Se anima al entrar y vibra al cerrarse.
• Hitos de racha: 7, 30, 100 o 365 días se celebran distinto que un día cualquiera, porque no son lo mismo.
• La goma resta, no suma: en calistenia la asistencia hace el ejercicio MÁS fácil, así que sus kilos cuentan en negativo en récords, tablas, gráficas y volumen. Diez segundos de planche con goma no baten tres sin ella; quitarse goma sí es progresar, y se celebra.
• : cada día de rutina puede fijarse a un día de la semana; el alumno ve "Hoy toca"/descanso y el día preseleccionado.

1. Requisitos

• Node.js 20+
• Una cuenta de Firebase

2. Configurar Firebase

1. Ve a la consola de Firebase y crea un proyecto nuevo (gratis, plan Spark es suficiente para empezar).

2. Dentro del proyecto, ve a Compilación → Authentication → Comenzar y activa el proveedor Correo electrónico/contraseña.

3. Ve a Compilación → Firestore Database → Crear base de datos (modo producción, elige la región más cercana a tus clientes).

4. Ve a Configuración del proyecto (icono de engranaje) → pestaña General → sección "Tus apps" → pulsa el icono </> para registrar una app web (sirve para las tres plataformas, ya que React Native Web reutiliza la misma configuración).

5. Copia los valores de firebaseConfig que te muestra Firebase.

6. En la raíz de este proyecto, copia .env.example como .env:

   cp .env.example .env
   

7. Rellena .env con los valores copiados en el paso 5 (todas las variables empiezan por EXPO_PUBLIC_, así Expo las incluye en el bundle de la app).

8. Sube las reglas de seguridad de Firestore (firestore.rules) a tu proyecto. Puedes hacerlo de dos formas:

   • Consola (más sencillo): abre Firestore Database → pestaña Reglas, pega el contenido de firestore.rules y publica.
   • CLI: npx firebase-tools login y luego npx firebase-tools deploy --only firestore:rules.

Sin este paso, cualquier usuario autenticado podría leer o escribir datos de otros usuarios.

3. Instalar dependencias

npm install

4. Arrancar la app

npm run web       # navegador (ordenador / tablet)
npm run ios       # simulador iOS (requiere macOS)
npm run android   # emulador / dispositivo Android

Si .env no existe o le faltan variables, la app mostrará una pantalla avisando de que falta configurar Firebase en lugar de fallar.

5. Activar notificaciones push (opcional)

Las notificaciones push (rutina asignada, mensajes de chat, recordatorios) usan el servicio gratuito de Expo Push Notifications y no requieren servidor propio, pero sí necesitan un proyecto EAS:

npx eas login       # crea una cuenta gratuita en expo.dev si no tienes una
npx eas init

Esto añade automáticamente un extra.eas.projectId a app.json. A partir de ahí, cada usuario que abra la app en un dispositivo físico (no simulador) y conceda permiso de notificaciones quedará registrado. Sin este paso, la app funciona igual pero no se enviarán notificaciones.

6. Cómo funciona la vinculación entrenador–cliente

No hay panel de administración para crear usuarios: cada persona se registra ella misma.

1. El entrenador se registra eligiendo "Soy entrenador". Al crear la cuenta se genera automáticamente un código de invitación de 6 caracteres, visible en la pestaña Perfil.
2. El entrenador comparte ese código con sus clientes (WhatsApp, email...).
3. Cada cliente se registra eligiendo "Soy cliente" e introduce ese código. Queda vinculado automáticamente a su entrenador y aparece en la lista de clientes de este.

6 bis. Números de fundador

El número lo reparte el servidor al procesar el alta de 1 €, y solo si la campaña está abierta (config/fundadores.abierta === true). Las cuentas anteriores a la campaña no lo reciben nunca: ese código solo corre durante un pago. Y las reglas de Firestore prohíben escribirlo desde la app a propósito — un distintivo que cualquiera pudiera ponerse no valdría nada.

Para darlo a mano (la cuenta del fundador, un caso especial): Actions → Número de fundador → Run workflow, con el correo, el número y en qué número quieres dejar el contador para la siguiente alta. No hace falta descargar nada ni manejar la clave privada: GitHub ya la tiene como secreto.

El script se niega a pisar un número ya repartido y a repetir uno que otra cuenta tenga: dos "fundador nº 1" no es un fallo cosmético, es la campaña entera perdiendo el sentido.

7. Estructura del proyecto

app/                      Pantallas (expo-router, navegación por archivos)
  (auth)/                 Login y registro
  (trainer)/              Área del entrenador (tabs: inicio, clientes, ejercicios, perfil)
  (client)/                Área del cliente (tabs: inicio, entreno, nutrición, progreso, social, perfil)
components/                Componentes de UI reutilizables
lib/
  firebase.ts              Inicialización de Firebase (auth + Firestore)
  auth-context.tsx         Contexto de autenticación y perfil de usuario
  types.ts                 Tipos de datos (Firestore)
  theme.ts                 Colores, tipografía y espaciados
  fechas.ts                Fechas escritas en español (mayúscula solo la inicial)
  notifications.ts          Registro y envío de notificaciones push (Expo)
  report.ts                 Generación del HTML del informe PDF de cliente
  firestore/                Funciones de acceso a datos por colección
firestore.rules            Reglas de seguridad de Firestore

8. Modelo de datos (Firestore)

Colección	Descripción
users	Perfiles de entrenador y cliente (role, trainerId, etc.)
trainerCodes	Mapa público código → trainerId para el registro de clientes
exercises	Biblioteca de ejercicios de cada entrenador
routines	Rutinas asignadas a cada cliente (días, ejercicios, series)
workoutLogs	Entrenamientos registrados por cada cliente
weightLogs	Registros de peso de cada cliente
bodyMeasurements	Medidas corporales de cada cliente (pecho, cintura, cadera...)
nutritionPlans	Planes nutricionales asignados a cada cliente
mealLogs	Comidas registradas por cada cliente
socialStats	Métricas públicas por miembro para el ranking social (no sensibles)
courses	Cursos en vídeo (secciones y lecciones); publicados = visibles para alumnos
progressPhotos	Fotos de progreso (frente/perfil/espalda), privadas alumno+entrenador
announcements	Anuncios del entrenador para su grupo
habits	Hábitos diarios asignados por el entrenador a cada alumno
habitLogs	Registro diario de hábitos cumplidos (creado por el alumno)
challenges	Retos del grupo (uno activo por entrenador; ranking en Social)
courseProgress	Lecciones vistas por cada alumno (doc id = su uid; solo él escribe)

9. Añadir el logo real (icono, splash y favicon)

Por ahora la app usa los iconos de ejemplo que genera Expo por defecto. Para poner el logo real de CALICO, sustituye estos archivos en assets/ por el tuyo (mismo nombre, mismas dimensiones — puedes exportarlos con cualquier editor de imagen o herramienta online tipo Canva/Figma):

Archivo	Tamaño	Uso
assets/icon.png	1024×1024	Icono de la app (iOS, Android, web)
assets/splash-icon.png	1024×1024	Pantalla de carga (fondo negro)
assets/android-icon-foreground.png	512×512	Icono adaptable de Android (primer plano, fondo transparente)
assets/android-icon-background.png	512×512	Icono adaptable de Android (fondo, ya en negro)
assets/android-icon-monochrome.png	432×432	Versión monocromo (Android 13+)
assets/favicon.png	48×48	Icono de pestaña en el navegador web

Recomendación: usa tu logo del tridente en plata/blanco sobre fondo negro para que combine con el resto de la app. Después de reemplazar los archivos, reinicia el servidor (npm start) para que se regeneren los iconos.

10. Publicar (build)

• Web: npx expo export --platform web genera una build estática en dist/, lista para desplegar en cualquier hosting estático (Firebase Hosting, Vercel, Netlify...).
• iOS / Android: usa EAS Build (npx eas build) para generar los binarios de las tiendas.