Saltar al contenido principal
Rubén Villar - Ir a inicio
Acceso Cliente
Proyecto Propio

Poke-Rescam: Ecosistema Digital para Coleccionistas de Pokémon TCG

Mi Rol

Desarrollador Full-Stack (Arquitectura, UI/UX, Visión Artificial)

Astro Astro
React React
TailwindCSS TailwindCSS
Firebase Firebase
Node.js Node.js
Visitar Web
Poke-Rescam: Ecosistema Digital para Coleccionistas de Pokémon TCG

Sobre el Proyecto

El Problema y la Solución

Problema: La dificultad de los coleccionistas para llevar un registro preciso de sus cartas físicas, gestionar duplicados y darles un uso lúdico más allá del coleccionismo estático. Solución: Una plataforma que utiliza el móvil como escáner inteligente. Mediante OCR y corrección de perspectiva, las cartas físicas se convierten en activos digitales dentro de un inventario gamificado, permitiendo batallas, intercambios y progresión de usuario.

Tecnologías Utilizadas

Frontend & UI/UX

  • Astro 4.0: Utilizado para la arquitectura de islas, garantizando una carga ultra rápida y SEO optimizado.
  • React 18: Para la lógica compleja de los mini-juegos y componentes interactivos del escáner.
  • Tailwind CSS: Diseño moderno con estética "Dark/Cyberpunk", uso de Glassmorphism y layouts adaptativos.
  • Framer Motion: Micro-animaciones fluidas que elevan la sensación de producto premium.

Visión Artificial & OCR

  • OpenCV.js: Implementación de algoritmos de "Warp Perspective" para extraer cartas rectangulares perfectas incluso desde ángulos inclinados.
  • Tesseract.js: Motor de OCR segmentado que procesa por separado la cabecera (Nombre/HP) y el pie (Número/Set) para maximizar la precisión.

Backend & Real-time

  • Firebase (Firestore): Base de datos NoSQL para sincronización instantánea de inventarios y salas de intercambio.
  • Firebase Auth: Gestión segura de sesiones de usuario.

Funcionalidades Destacadas (Content of the Publication)

  1. Motor de Escaneo "Rigor 3.0": Un sistema de triple recorte (Triple Crop) que identifica automáticamente los datos de la carta y los valida contra múltiples fuentes (PokemonTCG.io, TCGdex y búsqueda avanzada).
  2. Sistema de Progresión Gamificado: Los usuarios ganan XP al escanear y jugar, subiendo de nivel y desbloqueando puntos de atributo (Ataque, Defensa, Energía) que afectan el rendimiento en los mini-juegos.
  3. Sala de Intercambios (Trade Room): Interfaz de doble vista en tiempo real donde los usuarios pueden negociar e intercambiar cartas con confirmación de seguridad mutua.
  4. Inventario Inteligente: Algoritmo de stacking automático que organiza cientos de cartas por nombre y estadísticas, resaltando cartas raras y gestionando duplicados de forma visualmente limpia.
  5. Mini-Juegos de Combate: El "Stadium Battle" permite usar el inventario digital en un sistema de combate por turnos que integra los atributos personalizados del entrenador.

Este proyecto demuestra la capacidad de transformar una necesidad cotidiana en una solución técnica robusta, integrando visión artificial, estado global en tiempo real y una interfaz de usuario de alto impacto.

Desafíos Técnicos

  1. Optimización de Visión Artificial en Cliente: Lograr que OpenCV.js y Tesseract.js funcionen de manera fluida en dispositivos móviles dentro del navegador, optimizando el uso de memoria y CPU.
  2. Arquitectura Híbrida (Astro + React): Gestionar la hidratación de componentes complejos (Islas) sin comprometer el rendimiento de carga inicial del sitio.
  3. Normalización de Datos de Múltiples Fuentes: Crear un motor de consenso que concilie datos de diferentes APIs (PokemonTCG.io, TCGdex) para ofrecer información precisa incluso en cartas raras o ediciones especiales.
  4. Resiliencia ante Malas Capturas: Desarrollar algoritmos de corrección de perspectiva y filtros de imagen dinámicos para mejorar la tasa de acierto del OCR bajo iluminación deficiente.