CASO DE ESTUDIO / 05
RandomTeams
Generación de equipos aleatorios a partir de listas de participantes, con sorteos e historial guardados.
En esta página
01 / CONTEXTO
El problema y la solución
El punto de partida
Distribuir una lista de personas en equipos y poder reutilizar participantes o consultar el resultado de un sorteo después.
La propuesta
Un generador que recibe nombres manualmente o mediante archivo, permite definir cuántos equipos crear y guarda listas y sorteos en un panel privado.
02 / PRODUCTO
Funciones principales
Generador de equipos
Introducción o importación de nombres y selección del número de equipos para realizar el sorteo.
Listas reutilizables
Panel para guardar y volver a utilizar listados de participantes.
Historial de sorteos
Consulta de grupos guardados con participantes, equipos, descripción y fecha de creación.
Edición y regeneración
Los sorteos guardados se pueden editar, regenerar o eliminar desde su detalle.
03 / IMPLEMENTACIÓN
Decisiones técnicas
Acceso mediante GitHub
OAuth con GitHub y nuxt-auth-utils evita un registro con contraseña propio.
Nuxt con Turso
Nuxt y Nitro manejan la aplicación; Drizzle ORM conecta con Turso, basado en SQLite, y Zod valida los datos.
Identidad neo-brutalista
Formas geométricas, colores sólidos y tipografía fuerte mantienen una identidad consistente entre la landing y los paneles.
04 / CAPTURAS
El proyecto en pantalla
Una selección de vistas del proyecto. Pulsa una captura para verla a tamaño completo.
05 / DOCUMENTACIÓN
Explorar en detalle
El recorrido completo por los módulos, las reglas y las pantallas del proyecto.
Leer documentación completa
Aplicación para generar equipos aleatorios de forma justa a partir de una lista de nombres. Permite guardar sorteos, explorar historial y compartir resultados con amigos. Desarrollada con Nuxt 4, Vue 3, Nuxt UI 4 y Tailwind CSS. Utiliza Turso (SQLite) con Drizzle ORM y autenticación con GitHub.
Stack Tecnológico
El proyecto está construido con Nuxt 4 como framework principal, utilizando Vue 3 con Composition API. Para el frontend utilizo Nuxt UI 4 con Tailwind CSS para estilos neo-brutalistas. En el backend uso Nitro (el servidor de Nuxt) con Drizzle ORM para interactuar con Turso (SQLite). La autenticación la manejo con nuxt-auth-utils integrada con GitHub, y la validación de datos con Zod.
Landing Page
La página de inicio presenta un diseño neo-brutalista potente que introduce el concepto de RandomTeams. Incluye CTAs para registrarse con GitHub y comenzar a generar equipos inmediatamente, con ejemplos visuales del resultado.
Autenticación con GitHub
Sistema de autenticación simple basado en OAuth con GitHub. Los usuarios hacen clic en "Iniciar sesión con GitHub" y se autentica con un token seguro, sin requerir contraseña ni proceso de registro complejo.
Generador de Equipos
Interfaz principal donde los usuarios introducen nombres (manualmente o importando un archivo) y especifican la cantidad de equipos deseados. El algoritmo genera equipos aleatorios y balanceados, mostrando el resultado con un diseño visual limpio y neo-brutalista.
Mis Listas (Dashboard)
Gestione sus listas guardadas para la generación de equipos. Acceda a su panel privado para visualizar o utilizar sus listados de participantes en cualquier momento.
Mis Equipos (Dashboard)
Área privada donde los usuarios autenticados pueden ver el listado de todos sus sorteos guardados. Muestra información resumida de cada grupo (nombre, descripción, cantidad de participantes) y permite acciones rápidas como eliminar o ver detalle.
Detalle de Grupo
Vista detallada de un sorteo guardado que muestra todos los detalles: nombre del grupo, descripción, lista completa de participantes, equipos generados con sus integrantes, y la fecha de creación. Permite regenerar equipos, editar información o eliminar el sorteo.
Diseño Neo-brutalista
RandomTeams mantiene una identidad visual consistente basada en neo-brutalismo: tipografía fuerte, colores sólidos, formas geométricas, y espacios limpios. Este enfoque se refleja en toda la aplicación, desde la landing page hasta los detalles de cada componente, creando una experiencia memorable y moderna.
Puedes probar la aplicación en: randomteams.app