El reto
Las casas de apuestas tienen interfaces saturadas: cientos de mercados, banners por todas partes y un boleto que cuesta entender. Me propuse diseñar y construir un prototipo que mantuviera todas las funciones de una casa real, pero ordenadas para que apostar sea claro y rápido.
La solución
Boleto siempre visible
que calcula al instante la ganancia potencial, con importes rápidos (+10, +50, x2).
Combinadas
con varias selecciones en el mismo boleto.
Partidos en vivo
con minuto, marcador y cuotas 1X2 actualizadas.
Ligas favoritas
por usuario y barra lateral de ligas con contador de partidos.
Promociones
(bono de bienvenida, cashback, apuesta gratis, combinadas, VIP) en un carrusel.
Cash Out
cerrar una apuesta antes de que termine el partido.
Juego responsable
con límites configurables, accesible desde el menú.
Login
con correo y contraseña o con Google.
Móvil primero
en pantallas pequeñas el boleto pasa a un botón flotante.
Resultado
Un producto completo y navegable que demuestra cómo resolver la experiencia de usuario de una aplicación compleja, con muchos estados y datos que cambian en tiempo real.
Para desarrolladores
Next.js (App Router) + React 19, renderizado en servidor con Server Components y operaciones con Server Actions.
TypeScript estricto, sin
any. Tailwind CSS v4 con los colores de marca como tokens.Zustand para el estado del cliente (boleto, favoritos, filtros y cuotas en vivo); boleto y favoritos persisten en
localStorage.Supabase (Postgres): las reglas de negocio viven en funciones SQL (apostar, combinadas, liquidar partidos, promociones, límites de juego responsable y Cash Out). Todo lo que mueve dinero se ejecuta en el servidor y los datos están protegidos con RLS.
Supabase Auth con
@supabase/ssr: correo y contraseña, y Google OAuth; la sesión se refresca en cada petición.Simulación de partidos en vivo con scripts propios: mover cuotas, liquidar partidos y cargar datos de demostración.
Imágenes generadas con IA (OpenAI) en un script aparte; la IA no interviene mientras la web funciona.
Vercel con despliegue automático en cada push a
main· ESLint ·sharp.Repositorio privado: se puede enseñar en una entrevista.