Web de gimnasio con entrenamiento personalizado

Plataforma web para un gimnasio de barrio en Bogotá, desarrollada junto a un cliente real y refinada en ciclos iterativos a partir de su retroalimentación. Tiene dos caras: una web pública que vende (planes, servicios, rutinas, clase gratis) y un área privada para el equipo y para los clientes con entrenamiento personalizado.

Es un prototipo en revisión: el enlace de la demo funciona de punta a punta, pero los datos son de ejemplo y se guardan en el navegador de cada visitante. Nombre, precios y dirección son provisionales.

El problema

El gimnasio ya tenía su sistema de recepción (GymApp), pero nada hacia afuera: quien preguntaba por precios, horarios o una clase de prueba lo hacía por WhatsApp, y los clientes con entrenador recibían la rutina en papel o en fotos sueltas.

Qué hace

• Web pública: planes y precios, servicios, horario, bienestar, barra fit, preguntas frecuentes y contacto, con WhatsApp siempre a la mano en el celular.
• Rutinas generales: el visitante elige para quién es, cuántos días entrena y su objetivo, y ve qué hacer cada día con series y descansos.
• Clase gratis con códigos: quien la pide recibe un código de un lote de 1000 que vale 3 días; recepción lo marca como usado y el sistema frena a quien intenta repetir.
• Entrenamiento personalizado: el entrenador arma la ficha de cada cliente, sus medidas, valoraciones, rutina, plan de alimentación y pausas. Cada ejercicio puede llevar un video general o uno grabado solo para esa persona.
• Área del cliente: entra con su documento y un PIN, y ve su rutina con videos, su alimentación y su progreso.
• Equipo y permisos: desarrollador, administradores, recepción y entrenadores, cada uno con lo suyo. El acceso de un cliente nuevo se le envía por WhatsApp con un clic.

Cómo está hecha

• Next.js 16 (App Router), React 19, TypeScript y Tailwind CSS 4.
• Toda la lectura y escritura de datos pasa por una sola capa (lib/api), así que conectar una base de datos real solo cambia ese archivo, no las pantallas.
• Base local versionada con migraciones, para que un cambio de datos no borre lo que el visitante ya tenía.
• Los mapas musculares de las rutinas son SVG dibujados en código, sin imágenes de terceros.
• Despliegue continuo en Vercel desde GitHub y un script propio que genera las capturas con Edge sin ventana.

Resultado

• Prototipo funcionando de punta a punta, publicado en Vercel y ajustado iteración por iteración con los comentarios del cliente.
• Cubre los dos frentes del gimnasio: la web pública que vende y el área privada donde cada cliente ve su rutina, sus videos y su alimentación.
• Lista para crecer: como todos los datos pasan por lib/api, conectar una base de datos real no toca ninguna pantalla.

Capturas

Todas con datos de ejemplo, ninguna persona real.

En el celular