Enchanted Map

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