Enchanted Map - Desvelando la Magia de Córdoba
- Sitio web: Enchanted Map
- Código fuente: GitHub
:sparkles: ¿Qué es?
Enchanted Map es una aplicación web interactiva que da vida a la mágica historia y leyendas de Córdoba. Combinamos lugares históricos, patrimonio cultural y leyendas locales en una experiencia digital atractiva.
:trophy: ¿Por qué es innovador?
- Experiencia Inmersiva: Permite a los usuarios explorar lugares emblemáticos como la Mezquita-Catedral, el Alcázar y el Barrio Judío a través de un mapa interactivo.
- Enfoque Único: Fusiona historia y cultura popular, ofreciendo una nueva forma de descubrir el patrimonio.
:identification_card: Uso de Clerk en el proyecto
Clerk se está usando para gestionar la autenticación del proyecto. Las librerías de Clerk que se están utilizando son:
- @clerk/clerk-js: La librería base de Clerk
- @clerk/vue: La integración específica para Vue
El proyecto utiliza Clerk para:
- Gestión de Autenticación:
- Sign In (Inicio de sesión)
- Sign Up (Registro)
- Sign Out (Cierre de sesión)
- Componentes de UI:
- SignInButton de @clerk/vue
- SignUpButton de @clerk/vue
- Montaje personalizado de componentes de autenticación con estilos de Vuetify
- Gestión de Estado:
Un store de Pinia que maneja:
- Estado de autenticación
- Información del usuario
- Inicialización de Clerk
- Gestión de sesión
- Características implementadas:
- Autenticación basada en correo electrónico
- Integración con redes sociales
- Gestión de sesiones
- Redirecciones después de autenticación
- Protección de rutas
- Personalización de la UI con Vuetify
:hammer_and_wrench: ¿Cómo funciona?
- Autenticación Requerida: Los usuarios deben autenticarse para acceder al mapa y las ubicaciones.
- Mapa Interactivo: Una vez autenticados, los usuarios navegan por un mapa de Córdoba, descubriendo ubicaciones mágicas.
- Historias y Leyendas: Al hacer clic en un lugar, se revelan sus historias y leyendas.
- Tecnología:
- Vue 3, TypeScript, Vite
- Pinia para la gestión del estado
- Vue Router para la navegación
- Vuetify para la interfaz de usuario
- Leaflet y MapTiler para la funcionalidad del mapa
- Clerk para la autenticación de usuarios
Para más detalle sobre la arquitectura puedes acceder al README del proyecto