WikiSkins

Propio · 2025

Wiki de ítems de CS2 con login de Steam: mi primer full stack desplegado.

Ver sitio
Estado
Pausado · demo sin base
Rol
Diseño y desarrollo, solo
WikiSkins: captura 1
Renderizado progresivo con loaders contextuales. Los skeletons indican el estado del fetch en tiempo real, mientras que el menú y la búsqueda se renderizan de forma progresiva conforme el usuario interactúa. Esto reduce el tiempo de bloqueo inicial y mejora la perceived performance al distribuir la carga de datos de manera incremental.
WikiSkins: captura 2
Modelo de datos relacional con renderizado por ítem. Cada skin está normalizada en la base de datos con referencias a su colección, caja de origen, rareza y variantes. El cliente realiza consultas filtradas por ID o tipo, generando vistas dinámicas con datos vinculados, precios y descripciones contextuales.
WikiSkins: captura 3
Implementación OAuth/OpenID con validación JWT. El sistema utiliza NextAuth con el proveedor de Steam OpenID para manejar la autenticación de forma segura. El backend Express valida las firmas de los JWT y asocia los perfiles autenticados con las cuentas almacenadas en la base de datos. Se preserva la privacidad del usuario y se asegura la integridad del flujo de login.
WikiSkins: captura 4
Ruta protegida y sincronización de perfil Steam. El endpoint de perfil está protegido por middleware de sesión (NextAuth). Al autenticarse, se extrae el SteamID y metadatos del usuario mediante la API de Steam, persistiendo sus favoritos, colecciones y actividad en la base de datos. Cada acción se asocia al ID único del proveedor.
WikiSkins: captura 5
Soporte multilenguaje con i18n. Se integró internacionalización (i18n) en WikiSkins, permitiendo traducir dinámicamente textos de la interfaz mediante archivos JSON locales. El sistema detecta el idioma del usuario y carga el paquete correspondiente, mejorando la accesibilidad y experiencia global del sitio.

Sobre el proyecto

Una wiki pública de 9 tipos de ítems de Counter-Strike 2 con login de Steam. Fue mi primer proyecto full stack desplegado, en 2025, y lo hice solo para aprender: no tuvo usuarios. Front en Next.js 16 y React 19, API REST en Node.js y Express, y base en PostgreSQL (Supabase).

Lo más destacado

  • Login con Steam OpenID y NextAuth; la sesión se intercambia por un JWT de API de 5 minutos con secreto propio, algoritmo fijado, issuer y audience.
  • Búsqueda que une las 9 tablas con un UNION ALL parametrizado, paginación con tope y conteo en paralelo; el front la consume con scroll infinito que cancela los pedidos viejos.
  • Ante el CVE crítico de React Server Components, subí a Next.js 16 y React 19.2 el mismo día en que el bot de Vercel abrió el PR del parche.
Siguiente proyectoSteam Inventory Scrapper