World Cup PvP
World Cup PvP es una plataforma onchain que convierte el Mundial en un mercado en vivo sobre Ethereum: cada nación es un token ERC-20 con su propio mercado, respaldado por el token central $WCUP, y la liquidez de las selecciones eliminadas se traslada al ganador a medida que avanza el torneo. La web principal articula varias secciones coordinadas: una portada (Home) con el partido en vivo, el panel de mercado de $WCUP, gráficas por nación y el feed de operaciones en tiempo real; una página de partidos (Matches) con todos los encuentros oficiales, horarios y grupos; una página de naciones (Nations) donde cada selección expone su token ERC-20, precio y acceso de compra; un piso de trading (Trading Floor) con transacciones en vivo, seguimiento de ballenas y filtros por nación; una página de torneo (Tournament) con la fase de grupos, clasificaciones enriquecidas con datos onchain y brackets; un leaderboard; y un onboarding «Pre-Match Briefing» que guía paso a paso al usuario (elegir nación, comprar token, unirse a la comunidad) con un sistema de puntos de fidelidad y sorteos. La conexión de cartera se resuelve con ConnectKit y autenticación SIWE (Sign-In With Ethereum), y todo el contenido dinámico —precios, operaciones, chat en vivo— se actualiza en tiempo real. La dirección de arte es la de una terminal de trading deportiva: fondos oscuros, acentos en verde eléctrico, tipografía condensada y micrográficas, reforzada con animaciones de Framer Motion.
Tecnologías usadas:
Front End:
El frontend es una SPA de alto rendimiento construida con React 19 y Vite, desplegada en el edge mediante Cloudflare Workers. El enrutado y la gestión de datos se resuelven con el ecosistema TanStack (Router, Query y Start) para navegación tipada y caché de datos del servidor con revalidación. La capa onchain se apoya en wagmi y viem para la conexión de cartera, lectura de contratos y firma, con ConnectKit para el flujo de conexión y SIWE para la autenticación sin contraseña. La interfaz en tiempo real se alimenta de Ably (precios, operaciones y chat en vivo), y la UI se compone con Tailwind CSS 4, componentes accesibles de Radix UI y animaciones de Framer Motion. El tipado de extremo a extremo con TypeScript y la validación con Zod garantizan contratos de datos seguros entre cliente y API. El proyecto vive en un monorepo Turborepo junto a un sitio de documentación independiente.
React
TypeScript
Vite
Tailwind
Back End:
El backend es una API NestJS 11 organizada en contextos acotados con CQRS (auth, market, matches, nations, portfolio, users, chat, loyalty y giveaways), siguiendo una arquitectura de dominio limpia y desacoplada. La persistencia se maneja con Prisma 7 sobre PostgreSQL, con Redis para caché y estado efímero, y Ably para la difusión de eventos en tiempo real (precios, operaciones y chat). La autenticación es onchain mediante SIWE verificada en el servidor y sesiones con JWT vía Passport. Tareas programadas (NestJS Schedule) sincronizan partidos y resultados desde fuentes remotas, y la observabilidad se cubre con Sentry. Como programador fullstack también trabajé en el panel administrativo, una aplicación independiente con su propia web (React + Vite + TanStack, en Cloudflare) y su propia API NestJS + Prisma, usada para operar la plataforma: gestión de carteras (KOL y market makers), naciones, partidos y parámetros del mercado. Todo el conjunto se despliega de forma desacoplada —el frontend en Cloudflare y la API en Fly.io— dentro de un monorepo Turborepo con pnpm.
PostgreSql
NestJS