Vértice Fitness

Capturas

El problema

Un gimnasio de barrio llevaba socios, cuotas y cobros en un Excel: nadie sabía a primera vista quién vencía esta semana, qué cobros faltaban ni cuánto se ingresaría a fin de mes.

Qué hace

• Estructura de CRM: menú lateral con contadores, barra superior con buscador global (Ctrl+K) y alertas, y un cajón de menú en móvil.
• Panel con 8 indicadores, gráficos de 12 meses (socios con altas y bajas, e ingresos) y paneles de actividad: distribución de socios, cuotas por renovar y últimos cobros.
• Lista de socios con búsqueda sin tildes, filtros con contador y columnas ordenables; ficha con perfil, cifras clave y pestañas de resumen, datos y pagos.
• Registro de pagos que extiende la cuota con las reglas de meses naturales.
• Alertas de cuotas por vencer y vencidas, y cobro de domiciliados que no cobra dos veces a quien ya renovó.
• Importación desde Excel o CSV: respeta las tildes, avisa de fechas imposibles y omite duplicados.
• Portada que presenta la demo como caso práctico: qué incluye, una autoevaluación de si el sistema encaja con un gimnasio y el cálculo del tiempo que se va en seguir cuotas a mano.

Decisiones que importan

• La demo no lleva base de datos ni inicio de sesión: los datos de ejemplo se generan en el navegador. La capa de datos imita a la de Supabase y aplica las garantías de una base real (campos obligatorios, claves foráneas, DNI único y operaciones de todo o nada), así que conectar una base real es cambiar un archivo.
• Marca, nombre y socios inventados; teléfonos en un rango claramente ficticio.
• Fechas siempre en hora local, para que un cobro no cambie de día según la zona horaria.
• Las reglas de negocio (vencimientos, cobros, importación, autoevaluación) son funciones con pruebas automáticas: 47 en la última comprobación, entre ellas una que verifica que los datos de ejemplo son coherentes con 366 fechas distintas.
• Comprobada con una herramienta automática de accesibilidad en todas las pantallas, en escritorio y móvil, y en sus estados (pestañas, menú, filtros, formularios con error), y servida con la política de seguridad real de producción: así apareció un fallo de fuentes bloqueadas que ni los tipos ni el linter detectan. La revisión automática no sustituye a una manual.
• El cálculo de la portada es una estimación con supuestos que cambia quien la usa, no una promesa de ahorro.

Lo que aprendí

Una demo la revisa quien compara pantallas: las cifras tienen que cuadrar, las fechas ser correctas en cualquier zona horaria y los estados iniciales contar una historia coherente. Y probar la versión publicada, con sus cabeceras reales, encuentra fallos que en local no se ven.

Proyecto de práctica basado en un caso real. Esta versión usa una marca, unos precios y unos datos inventados.