Saltar al contenido
Joel Bello
← Proyectos

Cromos de Devs

Juego webNuevocromos-de-devs.vercel.app ↗Código ↗

Álbum de cromos de programadores: entras con GitHub, recibes tu cromo, abres un sobre gratis cada día y cambias los repetidos.

Portada de Cromos de Devs con tres cromos holográficos de ejemplo
Portada de Cromos de Devs con tres cromos holográficos de ejemplo

Contexto

Un juego de cromos coleccionables para la comunidad de desarrollo, inspirado en los álbumes de toda la vida.

Problema

Un perfil de GitHub es una lista de números: no se colecciona, no se cambia y casi no se comparte.

Mi rol

Idea, diseño, desarrollo y despliegue.

Decisiones

  1. Cromo creado al entrar con GitHub: el lenguaje principal es el tipo, los repos con más estrellas son los ataques y el nivel sale de los años en GitHub
  2. Cuatro rarezas con acabados foil en CSS y marco de metal en Three.js; la carta se inclina y el brillo sigue al puntero
  3. Sobre diario en 3D que se rasga con el dedo, con versión CSS si no hay WebGL o se piden menos animaciones
  4. Acciones del juego como funciones de Postgres que comprueban la sesión, con RLS en todas las tablas
Álbum de Cromos de Devs ordenado por países
Álbum de Cromos de Devs ordenado por países

Resultados

  • Álbum por país y por lenguaje, cambios con enlace y tablón público
  • Un sobre por persona y día, garantizado por la base de datos
  • Coste 0 €: planes gratuitos de Vercel y Supabase, sin IA de pago

Aprendizaje

Una buena versión sin WebGL no es un plan B: es la que ve quien pide menos animaciones o usa un móvil modesto.

Stack

Next.js 16 · React 19 · TypeScript · Tailwind CSS 4 · Supabase · Three.js · motion · Web Audio API