Producto y Arquitectura
Estructura de la plataforma, paginas de funcionalidades, arquitectura del sitio y flujos de experiencia de usuario en todo el ecosistema MavelPoint.
Stack Tecnologico
Tecnologias principales que impulsan www.mavelpoint.com.
Astro 5 SSR
Sitio de marketing con renderizado del lado del servidor usando el adaptador @astrojs/node. Las paginas se renderizan bajo demanda con soporte completo de SEO y obtencion dinamica de datos.
React 18 Islands
Los componentes interactivos (reproductor, modales, pestanas, formularios) se hidratan como islas de React dentro de las paginas de Astro, manteniendo la carga de JS al minimo.
Tailwind CSS 3.4
Estilos utility-first con tokens de diseno personalizados para colores, tipografia y espaciado. Tema oscuro por defecto sobre fondo negro puro.
Nanostores
Gestion de estado ligera y cross-framework para el reproductor, tracks, pestanas, navegacion, colecciones, acceso de la industria y votacion en modales.
Partytown
Scripts de terceros (analitica, tracking) descargados a un web worker para mantener el hilo principal libre y el LCP por debajo de 2 segundos.
Sentry
Monitoreo de errores y trazado de rendimiento tanto en el renderizado del lado del servidor como en las islas de React del lado del cliente.
Gestor de paquetes
pnpm
Testing
Vitest
Objetivo de rendimiento
< 2s LCP
Internacionalizacion
Cinco idiomas con enrutamiento por prefijo de idioma.
| Idioma | Prefijo | Ejemplo |
|---|---|---|
| Ingles (por defecto) | / | /features |
| Espanol | /es/ | /es/features |
| Frances | /fr/ | /fr/features |
| Aleman | /de/ | /de/features |
| Neerlandes | /nl/ | /nl/features |
Todas las paginas de marketing, funcionalidades y legales estan traducidas. El contenido dinamico (perfiles de artistas, eventos, blog) se sirve en el idioma original.
Mapa del sitio completo
Todas las rutas de www.mavelpoint.com organizadas por categoria.
Paginas de Marketing
| Ruta | Proposito |
|---|---|
| / | Pagina principal -- hero, propuesta de valor, CTAs especificos por audiencia para artistas e industria |
| /features | Indice de funcionalidades con enlaces a las 11 paginas de detalle |
| /pricing | Tabla comparativa de planes, redirige a app.mavelpoint.com/billing para el pago |
| /dj-press-kit | Vision general del concepto de press kit electronico (EPK) y como MavelPoint reemplaza los kits en PDF |
| /mavelpoint-studio | Herramienta de generacion de flyers con IA usando Google Gemini 2.0 Flash (timeout de 30 segundos) |
Paginas de Funcionalidades (11)
| Ruta | Funcionalidad |
|---|---|
| /features/artist-team-management | Invita a managers, agentes y miembros del equipo a colaborar en un perfil de artista |
| /features/demo-submission | Pipeline de envio de demos con limite de frecuencia para sellos y promotores |
| /features/dj-biography | Editor de biografia con texto enriquecido y soporte multilingue |
| /features/dj-calendar | Calendario publico de eventos con actuaciones pasadas y futuras |
| /features/dj-genres | Sistema de etiquetado por genero para descubrimiento y filtrado de artistas |
| /features/dj-music-profile | Tracks integrados con conteo de reproducciones, previsualizacion de forma de onda y metadatos de lanzamiento |
| /features/dj-photo-gallery | Galeria de fotos de prensa en alta resolucion con posibilidad de descarga |
| /features/dj-press-articles | Menciones de prensa, entrevistas y cobertura mediatica seleccionadas |
| /features/dj-social-links | Enlaces consolidados a redes sociales y plataformas de streaming |
| /features/maveltree | MavelTree -- pagina link-in-bio generada a partir del perfil del artista |
| /features/privacy-controls | Configuracion granular de visibilidad para secciones del perfil e informacion de contacto |
Cada pagina de funcionalidad sigue una estructura consistente: hero con propuesta de valor, demo visual, lista de beneficios y un CTA que redirige a la app. Tasa de conversion objetivo: 8--12%.
Paginas Dinamicas
| Patron de ruta | Descripcion |
|---|---|
| /artist/[artistName]/ | Perfil publico del artista con navegacion por pestanas (overview, events, tracks, gallery, press-media, send-demo) |
| /event/[eventSlug] | Pagina de detalle del evento con lineup, venue, fecha, integracion con calendario y opciones para compartir |
| /venue/[venueSlug] | Pagina de detalle del venue con mapa, informacion de aforo y proximos eventos |
| /blog | Indice del blog obtenido de la API REST de WordPress, cacheado durante 1 hora |
| /blog/[slug] | Articulo individual del blog renderizado desde WordPress con CTAs contextuales |
| /local-circuit | Concursos de DJ Local Circuit con estructura de navegacion por ciudad, promotor y concurso |
Paginas Legales y del Sistema
Infraestructura SEO
robots.txt
Generado dinamicamente por entorno para bloquear el staging de los rastreadores
sitemap-index.xml
Indice principal del sitemap que referencia sitemaps secundarios
sitemap-static.xml
Todas las paginas de marketing, funcionalidades, precios, legales y listado del blog
sitemap-artists.xml
Lista autogenerada de todas las URLs de perfiles de artistas publicos
Datos Estructurados
JSON-LD en paginas de artistas, eventos y venues para resultados enriquecidos en Google
Layouts de Pagina (11)
Componentes de layout en Astro que definen el marco, navegacion y estructura compartida por tipo de pagina.
Layout
Layout base para paginas generales -- incluye head global, fuentes, scripts y footer.
LandingLayout
Paginas de marketing con secciones hero, navegacion NavBarWeb y secciones a ancho completo.
ArtistLayout
Paginas de perfil de artista -- minimo marco de MavelPoint, NavBarPublicProfile, area de contenido con pestanas.
EventLayout
Paginas independientes de detalle de evento con NavBarGeneral y metadatos especificos del evento.
EventWithArtistLayout
Paginas de evento vistas en el contexto de un perfil de artista, combinando detalles del evento con la navegacion del artista.
VenueLayout
Paginas de detalle de venue con NavBarGeneral, mapa integrado y listado de proximos eventos.
BlogPostLayout
Articulos del blog de WordPress con estilos de articulo, CTAs contextuales en la barra lateral y contenido relacionado.
PressMediaLayout
Paginas de articulos de prensa y medios dentro del contexto del perfil del artista.
TrackLayout
Paginas individuales de track con reproductor de forma de onda, metadatos y tracks relacionados.
CollectionIdLayout
Paginas de detalle de coleccion que muestran contenido agrupado (por ejemplo, lanzamientos, playlists).
CollectionIdLayoutEditorial
Variante editorial de las paginas de coleccion con formato de texto e imagenes mas rico.
Fuentes de Datos y Servicios
Sistemas de datos externos y modulos de servicio internos que alimentan el contenido de las paginas.
Fuentes de Datos
MavelPoint API
Fuente de datos principal para perfiles de artistas, eventos, venues, generos, tracks y todo el contenido generado por usuarios. Backend en NestJS con Clean Architecture.
WordPress REST API
Contenido del blog obtenido via REST. Las respuestas se cachean durante 1 hora para reducir la latencia y las llamadas a la API.
Google Gemini 2.0 Flash
Alimenta MavelPoint Studio: generacion de flyers con IA (generate-flyer), analisis de flyers (analyze-flyer) y distribucion por email (send-flyers-email).
Azure Blob Storage
Almacenamiento de activos estaticos para imagenes de artistas, fotos de galeria, flyers de eventos y archivos multimedia generados.
Endpoints de la API (Gemini AI)
| Endpoint | Metodo | Descripcion |
|---|---|---|
| generate-flyer | POST | Crea un flyer de evento usando Gemini AI a partir de los detalles del evento y parametros de estilo. Timeout de 30 segundos. |
| analyze-flyer | POST | Analiza una imagen de flyer subida para extraer informacion del evento (fecha, lineup, venue). |
| send-flyers-email | POST | Distribuye los flyers generados por email a una lista de contactos especificada. |
Modulos de Servicio
wordpress
Obtencion y cache de contenido del blog
gemini
Generacion y analisis de flyers con IA
featureFlags
Activacion de funcionalidades en tiempo de ejecucion para despliegues graduales
localCircuit
Gestion de concursos de DJ por ciudad y promotor
trackSubmission
Pipeline de envio de demos con limite de frecuencia
industryAccess
Acceso restringido para promotores, agentes y sellos
genres
Taxonomia de generos y categorizacion de artistas
Flujos de Usuario
Los diez recorridos principales que los usuarios realizan en la plataforma, con objetivos de conversion.
Flujo 1: Descubrimiento y Registro del Artista
Conversion en pagina principal
3--5%
Conversion en pagina de funcionalidad
8--12%
Dos vias de audiencia: los artistas ven el valor de construir su perfil, los profesionales de la industria ven el descubrimiento de talento. El CTA debe aparecer visible sin scroll y cumplir la regla de los 5 segundos.
Flujo 2: La Industria Evalua al Artista (EPK)
Reemplaza el flujo de trabajo tradicional de buscar entre press kits en PDF, busquedas en Google, SoundCloud, Instagram y Resident Advisor. Toda la informacion del artista consolidada en una unica interfaz con pestanas y minima presencia de marca de MavelPoint.
Flujo 3: Descubrimiento de Eventos
Las paginas de eventos muestran el lineup completo con enlaces a perfiles de artistas, detalles del venue con mapa, fecha y hora, y acciones para agregar al calendario o compartir en redes sociales.
Flujo 4: Exploracion de Venues
Las paginas de venues incluyen mapas integrados, informacion de aforo y una lista de proximos eventos en esa ubicacion. Los usuarios pueden navegar directamente a los detalles del evento o a los perfiles de artistas desde el lineup.
Flujo 5: Del Blog a la Conversion
Objetivo de conversion del blog
1--2%
Los articulos del blog de WordPress incluyen CTAs contextuales relevantes al tema del articulo, enlazando a paginas de funcionalidades o al flujo de registro.
Flujo 6: Local Circuit (Concursos de DJ)
Concursos de DJ por ciudad organizados por promotor. Los usuarios pueden explorar concursos activos, votar por participantes o enviar su propia participacion.
Flujo 7: Envio de Demos
Los artistas envian demos a sellos y promotores a traves de un pipeline con limite de frecuencia que previene el spam y garantiza que los envios de calidad sean revisados.
Flujo 8: MavelPoint Studio (Flyers con IA)
Generacion de flyers de eventos con IA a traves de Google Gemini 2.0 Flash. Timeout de 30 segundos por generacion. Los resultados se pueden descargar o enviar directamente por email a contactos.
Flujo 9: Evaluacion de Precios
La pagina de precios presenta la comparativa de planes. Todas las acciones de pago y facturacion redirigen a app.mavelpoint.com/billing -- el sitio de marketing nunca gestiona pagos.
Flujo 10: Exploracion de Funcionalidades en Detalle
Los usuarios exploran paginas individuales de funcionalidades desde el indice /features o desde enlaces cruzados en otras paginas. Cada pagina sigue la misma estructura: hero con propuesta de valor, demo visual, lista de beneficios y un CTA de redireccion. Conversion objetivo: 8--12%.
Gestion de Estado entre Paginas
Nanostores proporciona gestion de estado ligera y cross-framework que persiste entre las navegaciones de paginas de Astro.
playerStore
Track actual, estado de reproduccion, volumen y posicion. Persiste para que la musica siga sonando durante las transiciones de pagina.
tracksStore
Lista de tracks, cola y metadatos del contexto actual. Compartido entre el reproductor y los componentes de listado de tracks.
tabsStore
Estado de la pestana activa para la navegacion del perfil de artista. Mantiene la pestana seleccionada sincronizada entre re-renders de componentes.
navigationStore
Posicion de scroll, estado de visibilidad del navbar e historial de breadcrumbs para la navegacion hacia atras.
collectionStore
Contexto de la coleccion actual (lanzamientos, playlists) y estado de paginacion.
industryAccessStore
Estado de verificacion de la industria, niveles de acceso a contenido restringido y estado de sesion para promotores, agentes y sellos.
modalVoteStore
Estado del modal de votacion de Local Circuit -- concurso actual, participante seleccionado y estado del envio del voto.