CASO DE ESTUDIO / 03
Canchitas App
Un espacio para que equipos locales registren sus partidos y compartan sus resultados con su comunidad.
En esta página
01 / CONTEXTO
El problema y la solución
El punto de partida
Centralizar los resultados de equipos locales de fútbol y basketball y crear un lugar donde sus seguidores puedan encontrarlos.
La propuesta
Una red social deportiva con gestión privada del equipo, feed público y perfiles que reúnen resultados y próximos partidos.
02 / PRODUCTO
Funciones principales
Panel del equipo
Gestión de torneos, jugadores y partidos con marcador, fecha y ubicación.
Comunidad de fans
Los seguidores pueden seguir equipos y dar me gusta a sus resultados.
Feed y perfiles públicos
Exploración de partidos, búsqueda por código y una página para consultar la actividad de cada equipo.
Vista general
Dashboard con información agregada de equipos, jugadores y partidos registrados.
03 / IMPLEMENTACIÓN
Decisiones técnicas
Aplicación full-stack con Nuxt
Nuxt 4 y Nitro reúnen la interfaz Vue 3 y el servidor; Nuxt UI y Tailwind CSS componen los controles visuales.
Persistencia relacional
Drizzle ORM conecta el servidor con PostgreSQL alojado en Neon.
Registro verificado
nuxt-auth-utils gestiona la autenticación, Zod valida los datos y Nodemailer envía los códigos de verificación por correo.
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
Red social que permite a equipos locales de fútbol y basketball registrar, gestionar y compartir sus partidos con su comunidad. Desarrollada con Nuxt 4, Vue 3, Nuxt UI 4 y Tailwind CSS. Utiliza PostgreSQL con Drizzle ORM y Neon para la base de datos.
Acerca del proyecto
Este proyecto surge de la necesidad de crear un espacio digital donde equipos locales de fútbol y basketball puedan centralizar sus resultados, generar comunidad alrededor de sus partidos y compartir su pasión deportiva con un público más amplio. Tiene un apartado de fans donde estos los pueden seguir y dar me gusta a sus resultados
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 los estilos. En el backend uso Nitro (el servidor de Nuxt) con Drizzle ORM para interactuar con PostgreSQL en Neon. La autenticación la manejo con nuxt-auth-utils, validación con Zod, y el envío de correos con Nodemailer.
Landing Page
La página de inicio presenta la marca "canchitas.app" con un diseño dark y branding fuerte. Incluye CTAS para registrarte como equipo como fan.
Autenticación
Sistema de registro e inicio de sesión donde los usuarios pueden crear una cuenta con su equipo. Incluye verificación por código enviado por email.
Panel del Equipo (Dashboard)
Área privada donde los capitanes/administradores pueden crear y gestionar torneos, registrar partidos con marcador, fecha y ubicación, administrar jugadores del equipo, y ver el historial de partidos.
Sección Social
Feed público donde se muestran los partidos de todos los equipos, permitiendo explorar partidos de otros equipos, buscar equipos por código y ver el perfil público de equipos.
Perfil Público del Equipo
Cada equipo tiene una página pública única (ej: canchitas.app/equipos/mi-equipo) donde cualquier persona puede ver la lista de partidos jugados, resultados recientes y próximos partidos programados.
Dashboard General de la aplicación
Vista general de todos los equipos registrados, con estadísticas agregadas como cantidad total de partidos jugados, cantidad de equipos, y cantidad de jugadores.
Puedes probar la aplicación en: canchitas.app