Saltar al contenido

Fit Evolution: un dashboard web para exprimir los datos de tu báscula de bioimpedancia

6 min de lectura

La mayoría de básculas de bioimpedancia actuales (RENPHO, Withings, Xiaomi, Fitbit) miden mucho más que el peso bruto: registran porcentaje graso, masa muscular esquelética, grasa visceral, agua corporal o tasa metabólica basal.

El problema habitual reside en sus aplicaciones móviles propietarias: suelen estar cargadas de opciones superfluas, intentan vender suscripciones premium y presentan gráficas simplistas que no permiten analizar la recomposición corporal con rigor.

Para resolver esto creé Fit Evolution, un dashboard web personal, optimizado como PWA móvil y con arquitectura zero-database, cuyo código he liberado en abierto en GitHub para que cualquiera pueda usarlo con sus propios datos.

Actualizado el 23 de septiembre de 2026: la app estrena diseño, con tres vistas (Resumen, Tendencias e Historial), el inicio de sesión se valida ahora en el servidor y el importador acepta el nuevo formato de CSV de RENPHO. El post refleja la versión actual.

Fit Evolution: vista Resumen con el peso en tendencia de 7 días, la meta con fecha estimada de llegada y las métricas clave

Por qué el peso diario engaña

El peso en báscula fluctúa a diario entre 1 y 3 kilos debido a la retención de líquidos, el contenido digestivo, el consumo de sodio o los depósitos de glucógeno muscular. Obsesionarse con la variación de un martes a un miércoles solo genera frustración.

Lo que determina si un plan de entrenamiento o nutrición funciona es:

  1. La tendencia suavizada: una media móvil de 7 días que filtra el ruido diario.
  2. El ritmo relativo: cuánto cambias por semana en porcentaje de tu peso corporal. Bajar 1 kg a la semana no significa lo mismo con 70 kg que con 110 kg.
  3. La recomposición corporal: qué parte del peso perdido es grasa y qué parte es masa magra.
  4. El índice FFMI (Fat-Free Mass Index): un indicador más representativo que el clásico IMC para evaluar la masa libre de grasa en función de la estatura.

Fit Evolution está diseñado en torno a estas premisas.

Qué incluye la aplicación

La interfaz se organiza en tres vistas. En el ordenador se cambia entre ellas con pestañas y en el móvil con una barra inferior, junto a un botón flotante para añadir un pesaje.

Resumen: ¿voy bien?

  • Peso en tendencia de 7 días como cifra principal, con el cambio desde el inicio, el de los últimos 7 días y el ritmo en kg/semana.
  • Etiqueta de ritmo calculada según el porcentaje de peso corporal por semana: saludable, rápido, lento, estable o alejándote de la meta.
  • Un resumen en lenguaje natural, del tipo “En 9 días has bajado 1,5 kg. A este ritmo llegarás a 75,0 kg hacia el 16 de septiembre”, con un consejo cuando el ritmo es demasiado rápido.
  • Tarjeta de meta con el progreso, los kilos que faltan y la fecha estimada de llegada, calculada con el ritmo real de las últimas semanas.
  • Métricas clave (grasa corporal, masa magra y grasa visceral) con minigráficas de evolución.
  • Gráfica principal sobre un eje de tiempo real: línea de tendencia, pesajes diarios como puntos, línea de meta y selectores para peso, grasa, músculo o masa grasa frente a masa magra en 7, 30, 90 días o todo el histórico.
  • Qué has perdido: cuánto del peso perdido es grasa y cuánto masa magra, con una valoración de la calidad de la pérdida.
  • Hitos: inicio, números redondos superados, mínimo histórico, mejor semana, próximo hito y meta.

Tendencias

  • Cambio medio semanal en gráfica de barras y en tabla.
  • Todas las métricas que registra la báscula (masa grasa, masa magra, músculo esquelético, grasa visceral y subcutánea, agua, proteína, masa ósea, BMR, edad metabólica e IMC), más el FFMI normalizado por estatura.

Historial

  • Búsqueda por fecha, selección de columnas visibles, paginación y borrado con opción de deshacer.

Además

  • Imagen de progreso para compartir en formato 1080 × 1350, con la hoja nativa de compartir en el móvil.
  • PWA instalable en iOS y Android, con tema claro y oscuro.
  • Accesibilidad: diálogos nativos, navegación por teclado, foco visible, zonas táctiles de 40 px o más y soporte para movimiento reducido.
  • Los pesajes manuales no se inventan datos: si solo introduces el peso, las métricas de bioimpedancia de ese día quedan vacías.

Fit Evolution en tema oscuro en el ordenador y en el móvil, con la barra de navegación inferior y el botón para añadir un pesaje

Arquitectura técnica: privacidad sin base de datos

Uno de los objetivos del proyecto era evitar costes de servidores, suscripciones y riesgos de privacidad con datos sensibles de salud.

  • Frontend: Astro 6 con TypeScript y Tailwind CSS v4 con tokens de diseño semánticos para los temas claro y oscuro. La salida es un sitio estático.
  • Gráficas: Chart.js 4, empaquetado con la app en lugar de cargarse desde un CDN.
  • Almacenamiento local: los pesajes se guardan siempre en el localStorage del navegador. Sin configurar la sincronización, los datos no salen de tu dispositivo.
  • Sincronización opcional con GitHub Gist: para tener los mismos datos en el ordenador y en el móvil, la app guarda un archivo JSON en un Gist privado de tu propia cuenta. El servidor solo conoce un token de GitHub limitado a Gists y el hash de tu contraseña, nunca tus datos.
  • Inicio de sesión en el servidor: dos Vercel Edge Functions gestionan el acceso. /api/session comprueba la contraseña con PBKDF2-SHA256 y crea una cookie de sesión firmada (HttpOnly, Secure, SameSite=Strict), y /api/fit-sync exige esa cookie y valida cada registro antes de escribir en el Gist.
  • Cabeceras de seguridad: CSP, X-Frame-Options, nosniff y Referrer-Policy. Los scripts y las fuentes se sirven desde el propio dominio.
  • Importación de datos: importador de CSV de RENPHO (con cabeceras en español o en inglés, incluido su formato nuevo), formulario de registro manual y exportación en CSV o JSON para copias de seguridad.

Cómo ponerlo en marcha en tu propio entorno

1. Probarlo en local

Necesitas Node.js 22.12 o superior.

Terminal
git clone https://github.com/pacoforet/fit.pacoforet.com.git
cd fit.pacoforet.com
npm install
npm run dev

Abre http://localhost:4321 y pulsa “Ver la demo con datos de ejemplo”.

npm run dev solo sirve el frontend: la demo funciona, pero el inicio de sesión y la sincronización no. Para probar también la API en local hay que usar vercel dev con un archivo .env.

2. Desplegar tu propio dashboard

Son unos 10 minutos y cabe en los planes gratuitos de Vercel y GitHub:

  1. Haz un fork del repositorio e impórtalo en Vercel.
  2. Crea un Gist secreto con un archivo fit-data.json que contenga {} y copia su ID.
  3. Crea un token fine-grained de GitHub con permiso Gists: Read and write y nada más.
  4. Ejecuta npm run auth:hash en tu copia local: te pide usuario y contraseña (mínimo 10 caracteres) y genera el valor de FIT_PASSWORD_HASH.
  5. Añade en Vercel las variables FIT_PASSWORD_HASH, FIT_GITHUB_TOKEN y FIT_GIST_ID, y vuelve a desplegar.

Sin las variables del Gist el dashboard sigue funcionando, pero guarda los datos solo en ese navegador. El README del repositorio (se abre en una pestaña nueva) tiene la guía completa, la referencia de variables y una sección de problemas frecuentes.

3. Cargar tus datos

  1. Inicia sesión con el usuario y la contraseña del paso 4.
  2. Exporta tu histórico en CSV desde la app de RENPHO y súbelo desde ⋯ → Importar CSV de RENPHO.
  3. En ⋯ → Metas y perfil, indica tu nombre, tu estatura y tus metas de peso y grasa corporal.
  4. A partir de ahí puedes añadir pesajes a mano con el botón Añadir pesaje.

El código está disponible bajo licencia MIT en github.com/pacoforet/fit.pacoforet.com (se abre en una pestaña nueva).

Posts relacionados