Academia César Acosta

La academia de tenis que muestra el cupo que de verdad le queda a cada grupo

Estado
Construido, a la espera de publicarse
Entregables
Diseño y desarrollo web, integración con Rematch
Industria
Academia de tenis · Lima
Plataforma
Web, sobre la API de Rematch

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.

Grupos abiertos de la academia, cada tarjeta con el cupo que le queda, y un detalle del chip «Quedan 4»
Grupos abiertos filtrados por sede. El sitio no guarda ni un solo grupo: los pide y los pinta.

Lo que construimos

  • Grupos: las clases abiertas con su cupo, su sede, sus días y su horario, filtradas por club y por edad.
  • Programa: la ficha de cada grupo con el horario de la semana, el día de hoy marcado y los planes con su precio.
  • Inscripción: el apoderado inscribe a su hijo —o se inscribe él— eligiendo plan y horario, sin crear ninguna cuenta.
  • Clases particulares: las horas que de verdad están libres, cada una con su precio, y la reserva en el mismo paso.
  • Tienda: el catálogo del club con categorías, precios y stock, carrito, cotización de envío y pedido.
  • Método y sedes: los cuatro pilares con los que la academia enseña, y las canchas de cada club bajo un mismo velo navy.
  • Integración: todo lo anterior sale de la API v1 de Rematch, con la llave viviendo solo del lado del servidor.
  • Móvil primero: es donde el padre mira: la pantalla chica se diseñó antes que la grande, no después.

Reto

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.

Enfoque

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.

Los cuatro pilares del método de la academia: biomecánica, técnica, táctica y patrones de juego
La cancha del Club El Polo a vista de dron, con el nombre de la sede encima de la foto

Decisiones técnicas

La integración con Rematch

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.

Diagrama de la integración: el panel de Rematch, la API v1 con sus rutas y tiempos de caché, y el sitio de la academia
La academia administra en el panel de Rematch · la API v1 sirve el catálogo, los grupos y los cupos · el sitio los pinta con la marca del club.

Lo que esa decisión obliga a resolver

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.

La ficha de un programa: el horario de la semana con el día de hoy marcado y, delante, el panel de planes con el botón de inscripción
Las horas libres de las clases particulares con su precio y, delante, dos raquetas de la tienda del club con el suyo

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 de la academia en tres celulares, sobre una banca junto a la cancha

Estado

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.

  • Ocho secciones públicas: inicio, programas, ficha de programa, sedes, entrenadores, galería, tienda y contacto
  • Cinco lecturas y cuatro escrituras contra la API v1 de Rematch, todas desde el servidor
  • Caché por tipo de dato: la marca cada 5 minutos, el catálogo cada minuto, los cupos y las horas libres sin caché
  • Corte a los 5 segundos y degradación por sección: la API no puede tumbar la página ni el despliegue

Disciplinas y stack

  • Diseño web
  • Diseño UX/UI
  • Sistema de diseño
  • Desarrollo web
  • Integración de API
  • Next.js 15
  • React 19
  • TypeScript
  • Tailwind CSS v4
  • API v1 de Rematch
  • Cloudflare R2

A continuación

Más proyectos

¿Listo para transformar tu negocio?

Analizaremos tu proyecto y prepararemos una estimación preliminar. Nos reuniremos virtualmente o presencialmente para discutir tus necesidades y alinear los próximos pasos.

¿Prefieres contacto directo con nuestro CEO?

Alexander Arancibia
Alexander ArancibiaFundador & CEO