ProyectosSport Miraflores
PWA · Fitness

De WhatsApp y llamadasa una app propia en semanas.

Diseñé y desarrollé una Progressive Web App para Sport Miraflores, un box de CrossFit e Hyrox en Málaga. Reservas de clases, panel de administración, gestión de bonos y notificaciones push — sin publicarla en ninguna tienda.

Duración
2 semanas
Plataforma
PWA (iOS & Android)
Rol
Diseño + Desarrollo
Sector
Fitness · CrossFit
Sport Miraflores
53+
socios activos en la app
0
llamadas para reservar
-85%
tiempo de gestión manual
100%
reservas en tiempo real

01 · El problema

Gestionar un boxpor grupos de WhatsApp.

Cuando el equipo de Sport Miraflores me contactó, el día a día del box dependía de grupos de WhatsApp. Los socios preguntaban si había plaza, el entrenador confirmaba a mano, y si alguien cancelaba a última hora había que avisar uno a uno a los que estaban en lista de espera.

El resultado eran malentendidos continuos, clases con más socios de los que cabían y horas diarias dedicadas a responder mensajes en lugar de entrenar y crecer el negocio. La ocupación real era imposible de saber sin hacer un recuento manual.

Publicar en App Store y Google Play era una opción cara, lenta y con revisiones arbitrarias. Necesitaban algo que funcionara como una app nativa, sin los tiempos ni los costes de una app nativa.

Pasaba más tiempo gestionando mensajes de WhatsApp que entrenando a mis socios. Necesitaba que la tecnología trabajara para mí, no al revés.

Sport MirafloresBox CrossFit & Hyrox · Málaga

02 · Objetivos

Lo que necesitaba
conseguir.

Antes de escribir una sola línea de código, me senté con el cliente para entender qué significaba el éxito para él — y para sus usuarios.

Objetivo principal

Reservas sin ninguna fricción

Que cualquier socio pudiera ver el horario del día, reservar una clase y cancelar si fuera necesario — desde el móvil, en segundos, sin hablar con nadie.

Objetivo de gestión

Visibilidad total en tiempo real

Que el entrenador y el admin vieran al instante cuántos socios había en cada clase, qué bonos tenían activos y cuál era la ocupación del box en cada momento.

Objetivo tecnológico

App sin coste de publicación

Una PWA instalable en iOS y Android directamente desde el navegador, sin App Store, sin proceso de revisión, sin cuota de desarrollador.

03 · Mi proceso

Cómo lo
abordé.

Semana 1–2

Entender el flujo real

Analicé cómo se gestionaban las reservas y qué información necesitaba cada perfil: el socio, el entrenador y el administrador. Tres roles distintos, tres experiencias que diseñar.

Semana 3–4

Diseño mobile-first y validación

Diseñé los flujos en Figma empezando desde el móvil. Probé el diseño con socios reales antes de escribir código. El flujo de reserva cambió dos veces según cómo interactuaba la gente.

Semana 5–8

Desarrollo con React y Supabase

Construí la PWA con React 19, Tailwind CSS y Supabase como backend. Autenticación, base de datos en tiempo real y almacenamiento de imágenes — todo gestionado desde Supabase.

Semana 9–10

Push, pruebas y lanzamiento

Integré OneSignal para notificaciones push. Hicimos pruebas con un grupo de socios beta, corregimos los últimos detalles y lanzamos. Los primeros 40 socios se registraron en 48 horas.

04 · La solución

Sport Miraflores.

Una solución que desapareció del radar — en el mejor sentido. Cuando algo funciona bien, no lo notas.

Reservas con calendario

Vista diaria con todas las clases disponibles, plazas restantes y estado de reserva del socio. Reservar o cancelar en dos toques. La clase queda bloqueada al instante.

Dashboard de administración

Panel de admin con métricas del día: clases activas, total de socios, nivel de ocupación y estado de bonos. Toda la visibilidad del box en una pantalla.

Socios, roles y bonos

Registro de socios con tipo de bono (ilimitado, mensual, clases sueltas). El sistema valida automáticamente si un socio puede reservar o no según su bono activo.

Notificaciones push sin app store

La PWA se instala como una app nativa y envía notificaciones push reales a iOS y Android. Los socios reciben recordatorio antes de cada clase desde la pantalla de inicio.

05 · Galería

La web en detalle.

Sport Miraflores — captura 1
Sport Miraflores — captura 2
Sport Miraflores — captura 3
Sport Miraflores — captura 4

Tech stack

Lo técnico, siempre al servicio del objetivo. Elegí estas herramientas no porque fueran las más modernas, sino porque eran las más adecuadas para este proyecto.

React 19TypeScriptTailwind CSSSupabaseTanStack QueryVite PWAOneSignalReact Hook FormZod

Lo que dice el cliente

Lo que más me sorprendió fue lo rápido que se adaptaron los socios. En la primera semana casi todos ya reservaban desde la app. Ahora no recibo mensajes de WhatsApp para gestionar clases y puedo centrarme en lo que de verdad importa: entrenar bien a mis socios y hacer crecer el box.

🏋️
Sport Miraflores
Box CrossFit & Hyrox · Málaga

¿Tienes un proyecto similar?

Construyamos
algo juntos.

Cada proyecto que termino viene de una conversación honesta. Cuéntame el tuyo.

Siguiente proyecto

🌿

Rubén & Pilar

De un evento familiar a una invitación digital hecha a medida.

Ver caso de estudio