
La academia de tenis que muestra el cupo que de verdad le queda a cada grupo
Construimos el sitio de la Academia César Acosta encima de la API de Rematch: los grupos, los cupos, los horarios y el catálogo que ve el visitante son exactamente los que la academia tiene en su panel.
La academia enseña tenis en dos clubes de Lima, del baby tenis de tres años a los adultos que compiten. Rematch —producto propio de Axium— es donde administra sus sedes, sus grupos y su tienda. El sitio no duplica nada de eso: lo consume. Está terminado y a la espera de que la academia lo publique.
Cada grupo abierto llega con el cupo que le queda. «Quedan 4» no es una frase escrita a mano: es el número que la academia tiene ahora mismo en su panel.

Las academias de tenis se presentan con un horario en PDF y un número de WhatsApp. El padre que quiere inscribir a su hijo no sabe si el grupo de su edad sigue abierto, en qué sede está ni a qué hora entrena, así que escribe para preguntar lo básico y la academia contesta lo mismo veinte veces. Y cuando un grupo se llena, la página sigue diciendo «inscríbete». La Academia César Acosta ya tenía su marca y ya administraba sus grupos, sus cupos y su tienda dentro de Rematch. Lo que no tenía era una cara pública que dijera la verdad de lo que hay dentro.
El sitio se construyó sobre el dato, no sobre el texto: cada sección se definió por lo que la API puede responder, y lo que la API no responde no se inventa. Encima montamos el sistema de diseño de la web —una sola familia tipográfica, Barlow, con un contraste de escala brutal; el navy #012045 como tinta de todos los títulos y como velo sobre cada fotografía; un lima escaso reservado a la acción; esquinas de 2 a 6 px, ni una píldora—. El velo es lo que hace que fotos de origen distinto (un celular, un fotógrafo, el archivo del club) se vean de la misma marca. La identidad del club ya existía y no la tocamos: lo que pusimos es cómo se comporta en pantalla.


Decisiones técnicas
El sitio es un storefront de un solo inquilino en Next.js: no tiene base de datos propia ni panel propio. Todo lo que muestra —sedes, grupos, cupos, horarios, planes, productos, precios y stock— se lo pide a la API v1 de Rematch, la plataforma con la que la academia ya opera todos los días. La consecuencia es la que importa: la academia sigue trabajando donde siempre, y el sitio se actualiza solo.

Consumir una API ajena desde el servidor trae tres problemas, y los tres se resolvieron de una vez. El primero es la llave: el módulo que habla con Rematch está marcado como de servidor, así que si alguien lo importa desde un componente de cliente el build falla en lugar de mandar la llave al navegador, donde cualquiera la leería con el inspector. Lo que el navegador necesita pasa por rutas del propio sitio, que corren en el servidor y agregan la llave ahí; y las escrituras —una inscripción, un pedido— llevan clave de idempotencia, para que un doble clic no cree dos. El segundo es el tiempo: sin un corte, una API lenta no degrada el sitio, lo cuelga —medido contra un servidor que tardaba un minuto, la página seguía sin responder a los cuarenta y cinco segundos—, así que cada petición se abandona a los cinco. El tercero es la ausencia: si un dato opcional no llega, esa sección se muestra vacía y la página sigue de pie. El build también, que era justo lo que antes impedía desplegar el sitio cuando el otro lado se caía un momento.


El padre mira esto de pie en la puerta del club, con una mano. Por eso la pantalla chica se diseñó antes que la grande.

El sitio está construido y funcionando contra la API en producción de Rematch: todo lo que se ve en estas pantallas —los grupos, los cupos, los horarios de la semana, los planes, las raquetas y sus precios— es el club real, leído en vivo. Queda a la espera de que la academia lo publique, así que todavía no hay tráfico ni inscripciones que contar. La prueba de este caso es lo construido y la integración funcionando.
Disciplinas y stack
A continuación
Analizaremos tu proyecto y prepararemos una estimación preliminar. Nos reuniremos virtualmente o presencialmente para discutir tus necesidades y alinear los próximos pasos.