M · A — Marco AvariaCaso 01 · Project: Better
Partes del caso

Project: Better

01 / Contexto

Ficha del proyecto

Project: Better · Aplicación de entrenamiento

Cada serie,
un paso más.

Del plan a la última repetición. Una app que conecta la planificación por ciclos, el registro del entrenamiento y la revisión del progreso.

Empezar: Producto

Desarrollo móvil y backend · React Native + NestJS

La identidad visual del portafolio acompaña al caso. La interfaz de la app conserva su paleta naranja y grafito.

Tipo

Proyecto personal

Ámbito

Frontend móvil + API + datos

Estado

En desarrollo

Tecnologías

Expo · NestJS · Prisma · PostgreSQL

02 / El producto

Un entrenamiento no empieza
cuando levantas la primera pesa.

Empieza con un plan. Continúa al registrar lo que hiciste. Y cobra sentido cuando puedes volver a consultarlo.

Project: Better organiza esa continuidad: bloques y semanas de entrenamiento, ejercicios con sus series y un historial para revisar las sesiones y los récords personales.

02

Registrar

Añadir ejercicios y series. Introducir peso, repeticiones y RIR con un teclado integrado en la pantalla.

Ver el flujo · parte 04

03 / Un recorrido real

Antes del plan,
un vistazo al mapa.

Estas capturas vienen de una grabación real de uso de la app, revisada fotograma a fotograma. Muestran las áreas principales antes de entrar en el detalle de planificar un bloque y preparar un día.

Estrategia también organiza los mesociclos en planificados y completados —se ve en detalle en Planificar un bloque (parte 05)— y el menú de Historial aparece completo en La memoria (parte 06).

La decisión
Presentar primero el mapa general del producto y después profundizar en sus recorridos.
El detalle
El recorrido conecta Inicio, Estrategia y Entrenar sin confundir una vista disponible con una acción demostrada.
Qué falta medir
Si esta organización permite encontrar cada función con facilidad durante el uso real.

Capturas reales de la app, no maquetas ni ilustraciones, tomadas de una grabación de uso revisada fotograma a fotograma. Fecha de grabación y versión de la app todavía sin confirmar.

  • 01/06 Pantalla de acceso oscura de Project: Better con campos de correo y contraseña, botón Iniciar conexión y alternativa para continuar con Google.

    El acceso reúne correo, contraseña y una alternativa con Google. La captura no demuestra cómo se validan ni protegen las credenciales.

  • 02/06 Pantalla Inicio en tema oscuro con la tarjeta Total SBD (kilos reales) de 247,5 kg y los valores de sentadilla, press banca y peso muerto.

    Inicio resume el total SBD y las marcas por levantamiento.

  • 03/06 Pantalla Estrategia, pestaña El arsenal, con buscador de ejercicios, botón Crear ejercicio y una lista de ejercicios agrupados por nombre.

    El catálogo de ejercicios, con buscador y opción para crear uno nuevo.

  • 04/06 Modal Ficha técnica de Sentadilla frontal con los campos zona del cuerpo, músculo principal, secundario y tercer músculo involucrado, y patrón de movimiento.

    Ficha técnica de un ejercicio (parte superior): datos anatómicos y de planificación.

  • 05/06 Parte inferior de la misma ficha técnica, con tipo de ejercicio Compuesto, carga lumbar Alta y prioridad sugerida 4.

    Ficha técnica (parte inferior): tipo de ejercicio, carga lumbar y prioridad sugerida.

  • 06/06 Pantalla Entrenar, Zona de Despliegue, con la tarjeta Misión asignada y los botones Ejecutar planificación e Iniciar rutina en blanco.

    Entrenar ofrece ejecutar el bloque planificado o iniciar una rutina en blanco. La grabación muestra estas opciones: no llega a ejecutar un entrenamiento.

Paso 01 de 06

  • 01/08 Pantalla Planificar Día con el estado Rutina en blanco, el botón Añadir ejercicio y el aviso Microciclo creado correctamente todavía visible.

    La rutina parte vacía: el siguiente paso nace dentro del planificador mediante «Añadir ejercicio».

  • 02/08 Pantalla Planificar Día atenuada detrás de un selector contextual de ejercicios, con Abducción en máquina como opción central y botones de cancelar y confirmar.

    «Añadir ejercicio» abre un selector contextual dentro de la planificación; no corresponde al catálogo general.

  • 03/08 Selector contextual sobre Planificar Día con Aperturas de pecho en máquina como opción central, entre Aperturas de pecho y Curl bíceps banco inclinado, y botones de cancelar y confirmar.

    El selector muestra la opción escogida antes de cerrar y añadirla al contenido de la rutina.

  • 04/08 Pantalla Planificar Día con la tarjeta Aperturas de pecho en máquina recién añadida, con dos filas de serie todavía sin valores.

    El selector se cierra y la app crea la tarjeta de «Aperturas de pecho en máquina» con sus filas todavía vacías.

  • 05/08 Selector Selecciona el Tipo de Serie abierto sobre la tarjeta del ejercicio, con tres filas AP, SL y SE sin valores numéricos.

    Cada fila recibe un tipo —aproximación, efectiva ligera, efectiva— antes de ingresar los valores.

  • 06/08 Tarjeta de Aperturas de pecho en máquina con tres series completas: AP 20 kg por 12 repeticiones RIR 4, SL 30 kg por 10 RIR 2, SE 40 kg por 8 RIR 1.

    Carga, repeticiones y RIR completos para las tres series del primer ejercicio.

  • 07/08 Pantalla Planificar Día con dos ejercicios completos: Aperturas de pecho en máquina y Curl bíceps en polea, cada uno con sus series de carga, repeticiones y RIR.

    La rutina queda completa —dos ejercicios, cinco series— antes de guardar el día.

  • 08/08 Pantalla Detalle del Bloque con el mensaje Día planificado guardado superpuesto y la tarjeta Semana 1, Introducción, 17 sept a 23 sept.

    La app confirma «Día planificado guardado» y vuelve al detalle del Mesociclo #2. El video no vuelve a abrir el día: no demuestra que la rutina exacta se haya recuperado completa.

Paso 01 de 08

04 / La interacción

Menos saltos.
Más continuidad.

Preparar un día de entrenamiento parte con una rutina en blanco: «Añadir ejercicio» abre un selector contextual, la opción escogida se confirma dentro de ese menú y recién entonces aparece como una tarjeta editable. No es un salto al catálogo general.

Un teclado numérico propio, controles para añadir y reordenar series y el guardado del día convierten este flujo en una buena muestra del trabajo de frontend móvil. Todavía no hay evidencia en video del mismo registro durante una sesión en curso.

La decisión
Construir la rutina sin sacar a la persona del contexto del día que está planificando.
El detalle
El estado vacío, el selector y la tarjeta creada forman tres estados consecutivos antes de editar las series.
Qué falta medir
Claridad del selector, accesibilidad y velocidad percibida al añadir ejercicios en el dispositivo real.

Decisión y detalle: revisión de código, no del video.

05 / La estructura

Del bloque
a cada serie.

El modelo conecta cinco niveles. La API incluye reglas para ordenar semanas, ajustar fechas y mantener relaciones entre los elementos del plan. Estas tres capturas muestran el tramo Mesociclo → Microciclo → Semana, ya con evidencia real.

  • 01/03 Pantalla Estrategia, pestaña Mis bloques, con Mesociclo #2 en estado Planificado y Mesociclo #1 en estado Completado.

    Confirma la creación del bloque: Mesociclo #2 queda planificado junto al Mesociclo #1 ya completado.

  • 02/03 Modal Configurar Microciclo con la fase Introducción seleccionada, duración de 7 días y los botones Cancelar y Crear.

    Dentro del bloque, configura la fase y la duración antes de crear el primer microciclo.

  • 03/03 Pantalla Detalle del Bloque con el mensaje Microciclo creado correctamente y la tarjeta Semana 1, Introducción, 17 sept a 23 sept.

    El microciclo queda creado: Semana 1 de Introducción, del 17 al 23 de septiembre.

Paso 01 de 03

Ver el modelo de dominio completo
  1. Mesociclo Bloque de entrenamiento
  2. Microciclo Semana o intervalo del bloque
  3. Día Planificado o completado
  4. Ejercicio Bloque dentro del día
  5. Serie Carga, repeticiones y RIR

06 / La memoria

Lo que registras
puede contarte algo.

La grabación permite consultar evolución por ejercicio y abrir el detalle de sesiones anteriores. Muestra valores visibles; no comprueba su persistencia ni la exactitud de las estimaciones.

  • 01/04Pantalla Historial con accesos a Trofeos PRs, Bitácora, Progreso y Estadísticas.

    Historial separa récords, bitácora, progreso y estadísticas.

  • 02/04Pantalla Evolución de Fuerza con Squat, Peso real, Últimos bloques y un gráfico de 80 a 82,5 entre S1 y S2.

    Evolución alterna ejercicio, métrica y rango; aquí muestra peso real de Squat entre dos bloques visibles.

  • 03/04Bitácora con la sesión Sábado 17 Ene expandida y tres series de Remo barra con kilos, repeticiones y RIR.

    Una sesión expandida deja ver carga, repeticiones y RIR de tres series de remo.

  • 04/04Bitácora con la sesión Miércoles 14 Ene expandida y tres series de Press banca con kilos, repeticiones y RIR.

    Otra sesión conserva el mismo desglose para tres series de press banca.

Paso 01 de 04

07 / Una capa más abajo

Del gesto
al sistema.

La misma acción atraviesa interfaz, estado local, API y base de datos. Aquí se puede leer cómo está resuelto el guardado actual.

INTERFAZReact Native / Expo
CONTRATO HTTPNestJS / validación
PERSISTENCIAPrisma / PostgreSQL

Ruta A / Envío directo

Guardar el día completo.

  1. La pantalla prepara el día, los ejercicios y las series.
  2. Comprueba la conexión e intenta enviar el conjunto a la API.
  3. El servidor busca un día del mismo usuario y crea o sustituye su registro.
  4. La interfaz recibe la respuesta y actualiza su estado.

Ruta B / Cola pendiente

Conservar un envío para después.

  1. Si la comprobación o la petición falla, intenta guardar el conjunto en AsyncStorage.
  2. Una cola conserva pendientes y sustituye entradas de la misma fecha.
  3. Eventos de conectividad o de vuelta a la app disparan un nuevo intento.
  4. Tras una respuesta satisfactoria, se intenta retirar el elemento de la cola.

El aislamiento por cuenta y la consistencia del guardado requieren mejoras antes de prometer funcionamiento offline completo.

Diagrama basado en el código. No ejecuta la app ni realiza peticiones a su backend.

Organización del código y reglas de negocio

El frontend separa pantallas, componentes, hooks y servicios. El backend organiza autenticación, ciclos, días, sesiones, series, récords y dashboard en módulos. Los ajustes de calendario usan transacciones; el reemplazo del día necesita todavía agrupar su borrado y creación en una transacción.

Autenticación: qué está implementado

Hay JWT, almacenamiento de credenciales en SecureStore y refresh tokens opacos cuyo hash se persiste en el servidor. Los refresh tokens rotan y se revocan por familia ante reutilización. El access token actual dura 30 días: revocar la familia de refresh tokens no invalida de inmediato un JWT ya emitido.

La siguiente mejora con mayor impacto

Reforzar el guardado: asociar los pendientes a su cuenta, propagar los errores de escritura local y hacer atómica la sustitución del día. Después, comprobar el recorrido completo de pérdida y recuperación de conexión en el teléfono.

08 / Evidencia y estado

Mostrar lo construido.
Explicar lo que sigue.

Una revisión local del 7 de septiembre de 2026 permite separar el código comprobado de lo que muestran las grabaciones y de lo que aún falta comprobar en una sesión real y sin conexión.

49

Pruebas del backend

21 suites unitarias pasan en la revisión local.

13

Pruebas del frontend

3 suites pasan con dependencias y hooks simulados.

2/2

Chequeos de tipos

Frontend y backend sin errores de TypeScript.

Estas cifras describen una ejecución local, no un porcentaje de cobertura ni una prueba de rendimiento en un teléfono. Las pruebas E2E no se ejecutaron en esta revisión.

Selección editorial completa del lote. Las capturas y los tres montajes vienen de los cuatro videos de uso disponibles (0001–0004), analizados fotograma a fotograma el 16 de septiembre de 2026. Esa es la fecha del análisis, no la fecha de grabación, que sigue sin confirmar, igual que la versión instalada. Los montajes son derivados mudos y editados: conservan las cargas cuando forman parte de la transición mostrada y no convierten los valores visibles en prueba de persistencia, exactitud o rendimiento.

0002 / 45 s

Planificar un bloque

Crear el mesociclo, configurar su semana, preparar dos ejercicios y guardar el día.

Montaje editado y sin audio del flujo de planificación.
0003 / 37 s

Recorrer el producto

Inicio, bloques, catálogo, ficha técnica, opciones para entrenar e Historial.

Montaje editado y sin audio del recorrido general.
0004 / 43 s

Consultar el historial

Récords, seis estados de progreso y dos sesiones abiertas en la bitácora.

Montaje editado y sin audio de las vistas de historial.

Este proyecto permite conversar sobre diseño de interacción, desarrollo móvil, contratos de API y consistencia de datos: distintas partes de una misma solución de software.

marcoandres.avaria@gmail.comLinkedIn Volver al portafolio