Referi
Marcador semiautomático para pistas de pádel: una pulsera para anotar, una pantalla en la pista y una app para las estadísticas.
- Rol
- Desarrollador Flutter en las dos apps: la app complementaria desde sus primeras pantallas de estadísticas hasta las tiendas, y la mayoría de las vistas de juego de la pantalla de la pista
- Cliente
- Referi
- Periodo
- 2025 – actualidad
- Plataformas
- iOS y Android (app complementaria); un kiosco Linux junto a la pista (pantalla)
El producto
Referi lleva el marcador de un partido de pádel para que no tengan que hacerlo los jugadores. Cada jugador lleva una pulsera: la acerca a la puerta de la pista para unirse a un partido, después la pulsa para anotar un punto, la mantiene pulsada para anular uno y la pulsa dos veces para pausar. Una pantalla junto a la pista muestra el marcador al instante y anuncia cada juego, cada set y cada cambio de lado.
Cada punto queda registrado, así que el partido sigue vivo en la app complementaria: resultados, evolución, rankings y el historial de cada partido, para cada jugador que haya emparejado una pulsera. Trabajo en las dos apps: la que los jugadores llevan en el bolsillo y la de la pantalla de la pista.
- 75%
- de los commits de la app complementaria son míos (85 de 113)
- 49%
- de los de la pantalla de la pista (69 de 142)
- 24k
- líneas de Dart entre las dos apps, sin contar el código generado
- 3
- gestos en la pulsera: todo lo que hace falta para llevar el marcador
Recorrido
La app en acción
Elige una grabación o salta directamente a un capítulo.
Grabado a partir del código actual: la pantalla de la pista a 1920 × 1080, con sus propios efectos de sonido colocados bajo el video; la app complementaria en tamaño de teléfono, sin sonido. Una pista virtual hace de backend.
Qué hace
De una pulsación en la muñeca a las estadísticas en tu bolsillo
01
Acercar la pulsera y elegir quién saca
Entre partidos, la pantalla reproduce los videos del club y explica los tres gestos. Cada jugador acerca su pulsera a la puerta de la pista y ocupa un puesto en uno de los dos equipos, con su nombre y su avatar; una pulsera que no corresponde se rechaza. El primero en sacar pulsa dos veces y empieza el partido.
02
Un marcador que se lleva solo
Cada pulsación se convierte en un punto para el equipo de quien pulsa, y la pantalla sigue las reglas del pádel: quince, treinta, cuarenta, iguales y ventaja, juegos, sets, el tie-break, quién saca y el cambio de lado. Cada evento tiene su animación y su sonido, y una doble pulsación pausa el partido con el marcador completo a la vista.
03
Juego, set y partido
El último punto activa los anuncios de juego, set y partido, y después el resultado final con los puntos de cada jugador y la pareja ganadora, con un recordatorio de que las estadísticas completas están en la app.
04
Registro y una pulsera propia
La app complementaria da acceso a los jugadores con su número de teléfono y les pide un apodo y una foto, a partir de la cual Referi crea el avatar que mostrará la pantalla. El emparejamiento encuentra la pulsera del jugador por Bluetooth y la vincula a la cuenta.
05
Cada partido, en cifras
El último partido set a set, los partidos jugados por semana, mes y trimestre, los puntos y breaks ganados y perdidos, los puntos de cada partido reciente y los rankings del club, de la ciudad y de toda la red. El historial muestra con quién gana un jugador y quién le gana, partido a partido.
Por dentro
Cómo se construyó
Una pantalla gobernada por mensajes
El backend de la pista publica por MQTT lo que la pantalla debe mostrar (un estado, como el marcador en vivo) y lo que debe reproducir (un efecto, como un punto o un cambio de lado). Los efectos se encolan y cada uno retiene los mensajes siguientes hasta que su animación y su sonido han terminado o se agota su tiempo; un indicador de interrupción permite que un mensaje urgente se adelante. Arquitectura limpia con flutter_bloc e injectable; media_kit para los videos de los patrocinadores.
Un kiosco que funciona todo el día
Se ejecuta a pantalla completa en un pequeño PC con Linux junto a la pista, sin ratón y sin nadie que lo reinicie. Parte de mi trabajo ahí no se ve: averiguar por qué los videos aparecían como una pantalla azul en el chip gráfico del kiosco (decodificación por hardware, el renderizador) y por qué las actualizaciones del marcador podían ir por detrás de la pulsación de la pulsera.
La app complementaria
Flutter con flutter_bloc, get_it y retrofit, en flavors de desarrollo, producción y mock. Este último lo añadí yo para que la app funcione, y se pruebe, sin el backend. Inicio de sesión por teléfono con Firebase, notificaciones push y un escaneo Bluetooth que encuentra las pulseras Referi entre todo lo demás que hay al alcance, lidiando con las distintas formas en que Android e iOS las reportan. Las compilaciones para las dos tiendas se ejecutan en Bitbucket Pipelines.
Grabar un sistema en producción
Una pista virtual, dos apps reales
Referi funciona en pistas reales con jugadores reales. Nada de eso tiene cabida en un portfolio, así que las dos apps se grabaron a partir de su código actual, funcionando por sí solas, con un sustituto del backend y jugadores inventados.
- 1
Las dos apps, compiladas para el navegador
La app complementaria se ejecuta en tamaño de teléfono, con el flavor mock que ya tenía y el inicio de sesión sustituido por una implementación falsa en memoria. La pantalla de la pista, una app de kiosco para Linux, se ejecuta en una ventana del navegador a la resolución de la TV.
- 2
Una pista virtual
En lugar del broker MQTT, la pantalla recibe una pequeña pista propia: cuatro jugadores inventados, las reglas de puntuación del pádel y los mismos mensajes de estado y de efecto que envía el backend, a través de la misma cola. Los scripts de grabación le dicen lo que pasa en la pista: una pulsera en la puerta, una pulsación en una pulsera.
- 3
Jugadores inventados y un club
Avatares dibujados para los cuatro jugadores, un video promocional de un club que no existe y una temporada de partidos, rankings y notificaciones escritos para la demo, en inglés.
- 4
El sonido de la pantalla
Una grabación del navegador no tiene sonido, así que la pantalla registra cada sonido que reproduce, con su instante. Después de cada toma, la herramienta de grabación coloca los propios archivos de sonido de la pantalla bajo el video, en esos mismos instantes.
Los logotipos, las interfaces, sus imágenes y los efectos de sonido de la pantalla son los de las propias apps. Los jugadores, los avatares, los clubes, los partidos, las estadísticas, las notificaciones y el video promocional son contenido de ejemplo creado para este portfolio.
Aquí no hay demo que probar: Referi está en producción, así que esta página muestra grabaciones con contenido de ejemplo.
Todas las pantallas
La colección completa de capturas
La pantalla de la pista
En esperaEntre partidos, la pantalla muestra los videos del club. Toca para jugarCómo anotar, deshacer y pausar con la pulsera. Jugadores uniéndoseCada pulsera que se acerca a la puerta ocupa un puesto en uno de los dos equipos. Quién sacaEl jugador que saca primero pulsa dos veces. Marcador en vivoPuntos, juegos y quién saca, actualizados a medida que se pulsan las pulseras. Cambio de ladoSe anuncia al final de los juegos impares, como mandan las reglas. PausaUna doble pulsación pausa el partido; la pantalla muestra el marcador completo. Iguales y ventajaVentaja, de nuevo iguales, otra vez ventaja. Partido ganadoJuego, set y partido, cada uno con su propio anuncio. Resultado finalCada set y los puntos de cada jugador. GanadoresLa pareja ganadora, antes de que la pista vuelva al modo de espera.
La app complementaria
OnboardingLo que hace Referi, en tres diapositivas. Inicio de sesiónNúmero de teléfono, condiciones y el consentimiento para los datos de salud. Código de verificaciónEl código enviado por SMS (en la demo vale cualquier combinación de seis cifras). ApodoEl nombre que mostrará la pantalla de la pista. EmparejamientoEl teléfono busca la pulsera por Bluetooth. EmparejadaLa pulsera es ahora la llave del jugador para todas las pistas. InicioTodavía no hay partidos. InicioEl avatar creado a partir de la foto del jugador, las cifras del mes y la pulsera emparejada. NotificacionesLos resultados llegan en cuanto termina el partido. RendimientoEl último partido, set a set, y los partidos jugados a lo largo del tiempo. Estadísticas avanzadasPuntos y breaks ganados y perdidos, con medias por semana, mes o trimestre. RankingRankings general, del club y de la ciudad, con la variación de la semana. Historial de partidosCon quién gana, contra quién pierde, y cada partido. Detalle del partidoDuración, tiempo de juego y cómo fueron los puntos. PerfilCuenta, notificaciones, condiciones y la eliminación de la cuenta desde la app.
Siguiente caso de estudio
Herbarium →