FiguNet — Álbum Virtual de Figuritas
Ecosistema de coleccionismo digital interactivo con dinámicas P2P y gamificación de alta fidelidad.
Tipo: Plataforma interactiva / Aplicación PWA
Estado: Desplegado / En producción
Stack: React · TypeScript · Tailwind CSS · PWA · Service Workers
Mi rol
Fullstack Developer & UX Architect
Tecnologías utilizadas
ReactTypeScriptTailwind CSSPWA & Service WorkersCanvas ConfettiZustand
Objetivo
Desarrollar una plataforma interactiva de coleccionismo digital con enfoque mobile-first y rendimiento estelar, logrando:
- • Experiencia táctil y visual idéntica a pegar figuritas reales
- • Intercambio P2P (Peer-to-Peer) fluido y seguro de figuritas repetidas
- • Compatibilidad total PWA para instalación en móviles y soporte offline
- • Efectos visuales premium y gamificación (confeti y brillo neon al completar)
- • Optimización de imágenes (LCP) y rendimiento móvil senior
Resultado
Un producto digital de alta fidelidad que recrea a la perfección la emoción de completar un álbum.
- ✓ Cero fricción en dispositivos móviles con puntuaciones excelentes en Lighthouse
- ✓ Funcionamiento offline ininterrumpido gracias al Service Worker
- ✓ Sistema de intercambio sumamente interactivo y libre de errores de estado
- ✓ Experiencia inmersiva y de alto impacto visual que encanta a los usuarios
Proceso del proyecto
El desarrollo se centró en la respuesta táctil instantánea y la optimización de activos para dispositivos de gama media-baja:
- 1Diseñé una interfaz móvil ultra-responsiva con Tailwind CSS y HSL tailoreado
- 2Implementé Service Workers para caché de red y soporte 100% offline (PWA)
- 3Desarrollé la lógica de emparejamiento de intercambio (TokenMatch) en el cliente
- 4Automaticé y reestructuré el sistema de assets con nombres normalizados ISO
- 5Integré efectos de canvas-confetti y animaciones CSS optimizadas para la GPU
Responsabilidades
- → Diseño de interfaz interactiva y animaciones de alta fidelidad
- → Implementación del Service Worker y configuración PWA de producción
- → Estructuración de almacenamiento y flujo de datos de colecciones
- → Resolución de fallos críticos de TypeScript y optimización de rendimiento LCP
- → Despliegue y validación en entorno de producción real
"FiguNet se ha convertido en una pieza clave del portafolio, demostrando la capacidad de llevar una aplicación compleja desde su concepción hasta un estado de producción real, cuidando meticulosamente cada detalle de performance, experiencia de usuario y accesibilidad móvil.
