Una aplicación web que transforma la educación financiera en un juego épico y viral. Utiliza un backend de IA para la generación de contenido ilimitado y una UX inmersiva para maximizar la retención.
Si este proyecto aporta valor o podría inspirar a otros, considera difundirlo en tu red profesional.
El Problema: La Barrera del Aburrimiento Financiero
La educación financiera tradicional es a menudo densa, intimidante y poco atractiva, lo que provoca que una gran mayoría de personas evite aprender sobre conceptos cruciales para su bienestar económico. El reto era claro: ¿cómo transformar un tema percibido como aburrido en una experiencia adictiva, motivadora y, sobre todo, educativa?
La Solución: "Finanzas Gratis" y el "Trono Financiero"
Finanzas Gratis es una aplicación web de gamificación diseñada desde cero para resolver este problema. Bajo el lema "Aprende Jugando. Conquista el Trono.", la plataforma convierte el aprendizaje en un juego de competición llamado "Trono Financiero".
Los usuarios no solo responden preguntas, sino que compiten en un ranking global, personalizan su perfil, desbloquean niveles de dificultad y aspiran a ser coronados "Soberano/a del Trono Financiero". Cada interacción está diseñada para ser una micro-recompensa, utilizando animaciones espectaculares, como la "Cascada Dorada" al acertar, y una cinemática de coronación única para celebrar el máximo logro, incentivando así la viralización del hito en redes sociales.
Desafíos Técnicos y Soluciones Implementadas
El proyecto presentó varios desafíos técnicos clave:
Experiencia de Usuario Inmersiva y Viral: Se implementaron animaciones complejas con Framer Motion y react-confetti para crear momentos de euforia. El diseño se centró en una UX "cinemática" para maximizar la retención.
Contenido Infinito y Escalable: Para evitar la repetición y mantener el juego fresco, se diseñó un sistema de backend asíncrono. Una Cloud Function de Firebase, escrita en TypeScript, se ejecuta periódicamente, llamando a la API de OpenAI (GPT-4) para generar, validar y almacenar nuevas preguntas en Firestore, asegurando que la aplicación principal siempre tenga un pool de contenido fresco sin sufrir latencia.
Arquitectura Robusta y Optimizada: Se eligió Next.js 14 (App Router) por su rendimiento y sus capacidades de SEO nativas. Toda la aplicación está construida con TypeScript para garantizar la seguridad de tipos y la mantenibilidad. La UI se desarrolló con Tailwind CSS y componentes shadcn/ui, sobre una estructura de archivos y componentes rigurosamente definida para evitar la deuda técnica y asegurar que el proyecto esté listo para producción desde el primer día.
.webp?alt=media&token=95409981-dabe-4ce7-9c50-c4ff9e0c3494)
.webp?alt=media&token=d0d74b77-963e-4e56-a7b1-64c4e62f3ece)
.webp?alt=media&token=5f4f2e01-98ff-438f-a3b3-197a60ecc552)
.webp?alt=media&token=5e0c4fcd-13c7-47ef-bc80-1d59724f27c6)
