Tavern: La Taberna de los Aventureros

Detalles del Proyecto - Tavern

Descripción: Tavern es una aplicación de Dungeons and Dragons (D&D) diseñada para que los jugadores puedan formar grupos de juego en la vida real. La aplicación cuenta con un e-commerce para la venta de artículos relacionados con el juego, un servicio de mensajería, un calendario integrado y toda la información del perfil está diseñada en base al universo de D&D.

Modelo de Negocios: La aplicación Tavern implementa un modelo de negocios diversificado para generar ingresos. Ofrece la posibilidad de contratar Dungeons Masters y cobra una comisión por transacción. Además, cuenta con un e-commerce para la venta de productos relacionados con D&D, donde también se aplica una comisión. Además, ofrece un espacio publicitario para locales con temática de D&D, cobrando por la publicidad mostrada.

Buyer Personas: Se realizaron análisis detallados de las buyer personas para comprender las necesidades y preferencias de los usuarios. Esto permitió diseñar una experiencia personalizada y enfocada en las necesidades de los jugadores de D&D, los Dungeons Masters y los propietarios de locales temáticos.

Desarrollo:

Lenguajes de Programación y Tecnologías Utilizadas:

  • HTML (HyperText Markup Language)
  • Pug (Preprocesador HTML)
  • CSS (Cascading Style Sheets)
  • Sass (Syntactically Awesome Style Sheets)
  • Node.js
  • JavaScript
  • TypeScript
  • Angular
  • Firebase (Base de Datos)

Funcionalidades Principales:

  • Creación y gestión de perfiles de usuario.
  • Exploración y compra de artículos de D&D en el e-commerce integrado.
  • Creación y gestión de grupos de juego.
  • Comunicación entre usuarios a través del servicio de mensajería.
  • Organización de eventos y sesiones de juego en el calendario integrado.

Arquitectura de la Aplicación:

La aplicación sigue una arquitectura basada en el patrón MVC (Modelo-Vista-Controlador), donde el modelo representa los datos, la vista muestra la interfaz de usuario y el controlador maneja las interacciones del usuario y la lógica de negocio.

Desafíos Técnicos:

Uno de los principales desafíos fue integrar múltiples servicios externos, como el sistema de pago y la mensajería, mientras se mantenía la coherencia y seguridad en la aplicación. Se implementaron soluciones escalables y robustas para abordar estos desafíos.

Integración de APIs y Servicios Externos:

Se integraron varias APIs de terceros para funcionalidades como el procesamiento de pagos y el envío de mensajes. La integración se realizó mediante solicitudes HTTP y autenticación mediante tokens API.

Seguridad y Protección de Datos:

Se implementaron medidas de seguridad, como la encriptación de datos y la autenticación de dos factores, para proteger la información de los usuarios. Además, se siguieron las mejores prácticas de seguridad de Firebase para garantizar la integridad de la base de datos.

Optimización de Rendimiento:

Se llevaron a cabo diversas optimizaciones de rendimiento, como la minimización de archivos CSS y JavaScript, la compresión de imágenes y el uso de CDN para la entrega de contenido estático. Esto aseguró una carga rápida de páginas y una experiencia fluida para los usuarios.

Pruebas y Depuración:

Se realizaron pruebas exhaustivas, incluyendo pruebas unitarias y de integración, así como pruebas de usuario finales para garantizar la estabilidad y la calidad de la aplicación. Se utilizó herramientas de depuración avanzadas para identificar y corregir errores de manera eficiente.

Diseño:

Aspectos Visuales:

  • Estilo Visual: Se utilizó una paleta de colores medievales, con tonos morados predominantes para evocar el ambiente de Dungeons and Dragons.
  • Tipografía: Se seleccionó una tipografía inspirada en la era medieval para los títulos, proporcionando una sensación de autenticidad y coherencia con el tema del juego.
  • Iconografía: Se crearon iconos personalizados que reflejan elementos característicos del mundo de D&D, como espadas, escudos y pergaminos.

Experiencia de Usuario (UX):

  • Navegación: La navegación se diseñó de manera intuitiva, con menús desplegables y botones de fácil acceso para garantizar una experiencia de usuario fluida.
  • Usabilidad: Se enfocó en la simplicidad y claridad de la interfaz de usuario, asegurando que los usuarios pudieran realizar tareas como la creación de perfiles y la compra de artículos de manera sencilla.

Prototipado y Pruebas:

  • Prototipos: Se crearon prototipos de alta fidelidad utilizando herramientas de diseño, permitiendo iterar y refinar el diseño en base a la retroalimentación del equipo.
  • Pruebas de Usuario: Se realizaron pruebas de usuario para evaluar la usabilidad y la efectividad del diseño, lo que permitió identificar y abordar áreas de mejora antes del lanzamiento.

Coherencia Visual:

  • Sistema de Diseño: Se estableció un sistema de diseño coherente que incluía estilos de botones, tarjetas y otros componentes para mantener la coherencia visual en toda la aplicación.
  • Guía de Estilo: Se creó una guía de estilo que documentaba los colores, tipografías y estilos de diseño utilizados, facilitando la colaboración entre diseñadores y desarrolladores.

Adaptabilidad y Responsividad:

  • Adaptabilidad: El diseño se optimizó para adaptarse a diferentes dispositivos y tamaños de pantalla, asegurando una experiencia de usuario consistente en computadoras de escritorio, tabletas y dispositivos móviles.
  • Responsividad: Se implementó un diseño responsivo que permitía a los elementos de la interfaz adaptarse dinámicamente al tamaño de la pantalla, mejorando la accesibilidad y la usabilidad en dispositivos móviles.

Fecha de Lanzamiento: Enero 2024

Próximos Pasos: Estamos trabajando en la implementación de nuevas funcionalidades, como la integración de videoconferencias para sesiones de juego virtuales y la expansión del catálogo de productos en el e-commerce.

Imágenes de Mockups

Mockup 1 Mockup 2 Mockup 3
Volver a Proyectos