Product & Architecture
Platform structure, feature pages, site architecture, and user experience flows across the MavelPoint ecosystem.
Tech Stack
Core technologies powering www.mavelpoint.com.
Astro 5 SSR
Server-side rendered marketing site using the @astrojs/node adapter. Pages are rendered on demand with full SEO support and dynamic data fetching.
React 18 Islands
Interactive components (player, modals, tabs, forms) are hydrated as React islands inside Astro pages, keeping JS payload minimal.
Tailwind CSS 3.4
Utility-first styling with custom design tokens for colors, typography, and spacing. Dark theme by default on a pure-black background.
Nanostores
Lightweight cross-framework state management for player state, tracks, tabs, navigation, collections, industry access, and modal voting.
Partytown
Third-party scripts (analytics, tracking) offloaded to a web worker to keep the main thread free and LCP under 2 seconds.
Sentry
Error monitoring and performance tracing across both server-side rendering and client-side React islands.
Package Manager
pnpm
Testing
Vitest
Performance Target
< 2s LCP
Internationalization
Five languages with locale-prefixed routing.
| Language | Prefix | Example |
|---|---|---|
| English (default) | / | /features |
| Spanish | /es/ | /es/features |
| French | /fr/ | /fr/features |
| German | /de/ | /de/features |
| Dutch | /nl/ | /nl/features |
All marketing pages, feature pages, and legal pages are translated. Dynamic content (artist profiles, events, blog) is served in the original language.
Complete Sitemap
Every route in www.mavelpoint.com organized by category.
Marketing Pages
| Route | Purpose |
|---|---|
| / | Homepage -- hero, value proposition, audience-specific CTAs for artists and industry |
| /features | Feature index page linking to all 11 feature detail pages |
| /pricing | Plan comparison table, redirects to app.mavelpoint.com/billing for checkout |
| /dj-press-kit | Overview of the electronic press kit (EPK) concept and how MavelPoint replaces PDF kits |
| /mavelpoint-studio | AI-powered flyer generation tool using Google Gemini 2.0 Flash (30-second timeout) |
Feature Pages (11)
| Route | Feature |
|---|---|
| /features/artist-team-management | Invite managers, agents, and team members to collaborate on an artist profile |
| /features/demo-submission | Rate-limited demo submission pipeline for labels and promoters |
| /features/dj-biography | Rich-text biography editor with multilingual support |
| /features/dj-calendar | Public event calendar showing upcoming and past gigs |
| /features/dj-genres | Genre tagging system for artist discoverability and filtering |
| /features/dj-music-profile | Embedded music tracks with play counts, waveform previews, and release metadata |
| /features/dj-photo-gallery | High-resolution press photo gallery with download capability |
| /features/dj-press-articles | Curated press mentions, interviews, and media coverage |
| /features/dj-social-links | Consolidated social media and streaming platform links |
| /features/maveltree | MavelTree -- link-in-bio page generated from the artist profile |
| /features/privacy-controls | Granular visibility settings for profile sections and contact information |
Each feature page follows a consistent structure: hero with value prop, visual demo, benefit list, and a CTA that redirects to the app. Target conversion rate: 8--12%.
Dynamic Pages
| Route Pattern | Description |
|---|---|
| /artist/[artistName]/ | Artist public profile with tabbed navigation (overview, events, tracks, gallery, press-media, send-demo) |
| /event/[eventSlug] | Event detail page with lineup, venue, date, calendar integration, and sharing |
| /venue/[venueSlug] | Venue detail page with map, capacity info, and upcoming events |
| /blog | Blog index sourced from WordPress REST API, cached for 1 hour |
| /blog/[slug] | Individual blog post rendered from WordPress with contextual CTAs |
| /local-circuit | Local Circuit DJ contests with city, promoter, and contest drill-down structure |
Legal & System Pages
SEO Infrastructure
robots.txt
Dynamically generated per environment to block staging from crawlers
sitemap-index.xml
Master sitemap index that references child sitemaps
sitemap-static.xml
All marketing, feature, pricing, legal, and blog listing pages
sitemap-artists.xml
Auto-generated list of all public artist profile URLs
Structured Data
JSON-LD on artist, event, and venue pages for rich Google results
Page Layouts (11)
Astro layout components that define chrome, navigation, and shared structure per page type.
Layout
Base layout for general pages -- includes global head, fonts, scripts, and footer.
LandingLayout
Marketing landing pages with hero sections, NavBarWeb navigation, and full-width sections.
ArtistLayout
Artist profile pages -- minimal MavelPoint chrome, NavBarPublicProfile, tabbed content area.
EventLayout
Standalone event detail pages with NavBarGeneral and event-specific metadata.
EventWithArtistLayout
Event pages viewed in the context of an artist profile, combining event details with artist navigation.
VenueLayout
Venue detail pages with NavBarGeneral, map embed, and upcoming event listing.
BlogPostLayout
WordPress blog posts with article styling, contextual sidebar CTAs, and related content.
PressMediaLayout
Press and media article pages within the artist profile context.
TrackLayout
Individual track pages with waveform player, metadata, and related tracks.
CollectionIdLayout
Collection detail pages displaying grouped content (e.g., releases, playlists).
CollectionIdLayoutEditorial
Editorial variant of collection pages with richer text formatting and imagery.
Data Sources & Services
External data systems and internal service modules that power page content.
Data Sources
MavelPoint API
Primary data source for artist profiles, events, venues, genres, tracks, and all user-generated content. NestJS backend with Clean Architecture.
WordPress REST API
Blog content sourced via REST. Responses are cached for 1 hour to reduce latency and API calls.
Google Gemini 2.0 Flash
Powers MavelPoint Studio: AI flyer generation (generate-flyer), flyer analysis (analyze-flyer), and email distribution (send-flyers-email).
Azure Blob Storage
Static asset storage for artist images, gallery photos, event flyers, and generated media files.
API Endpoints (Gemini AI)
| Endpoint | Method | Description |
|---|---|---|
| generate-flyer | POST | Creates an event flyer using Gemini AI based on event details and style parameters. 30-second timeout. |
| analyze-flyer | POST | Analyzes an uploaded flyer image to extract event information (date, lineup, venue). |
| send-flyers-email | POST | Distributes generated flyers via email to a specified contact list. |
Service Modules
wordpress
Blog content fetching and caching
gemini
AI flyer generation and analysis
featureFlags
Runtime feature toggling for gradual rollouts
localCircuit
DJ contest management by city and promoter
trackSubmission
Rate-limited demo submission pipeline
industryAccess
Gated access for promoters, agents, and labels
genres
Genre taxonomy and artist categorization
User Flows
The ten core journeys users take through the platform, with conversion targets.
Flow 1: Artist Discovery and Signup
Homepage conversion
3--5%
Feature page conversion
8--12%
Two audience tracks: artists see profile-building value, industry professionals see talent discovery. CTA must appear above the fold and pass the 5-second rule.
Flow 2: Industry Evaluates Artist (EPK)
Replaces the traditional workflow of juggling PDF press kits, Google searches, SoundCloud, Instagram, and Resident Advisor. All artist information consolidated in a single tabbed interface with minimal MavelPoint branding.
Flow 3: Event Discovery
Event pages show full lineup with links to artist profiles, venue details with map, date and time, and actions to add to calendar or share on social media.
Flow 4: Venue Exploration
Venue pages include embedded maps, capacity information, and a list of upcoming events at that location. Users can navigate directly to event details or artist profiles from the lineup.
Flow 5: Blog to Conversion
Blog conversion target
1--2%
Blog posts from WordPress include contextual CTAs relevant to the article topic, linking to feature pages or the sign-up flow.
Flow 6: Local Circuit (DJ Contests)
City-based DJ contests organized by promoter. Users can browse active contests, vote for contestants, or submit their own entry.
Flow 7: Demo Submission
Artists submit demos to labels and promoters through a rate-limited pipeline that prevents spam while ensuring quality submissions get reviewed.
Flow 8: MavelPoint Studio (AI Flyers)
AI-powered event flyer generation via Google Gemini 2.0 Flash. 30-second timeout per generation. Results can be downloaded or emailed directly to contacts.
Flow 9: Pricing Evaluation
Pricing page presents plan comparison. All checkout and billing actions redirect to app.mavelpoint.com/billing -- the marketing site never handles payments.
Flow 10: Feature Deep-Dive
Users explore individual feature pages from the /features index or from cross-links in other pages. Each page follows the same structure: hero with value proposition, visual demo, benefit list, and a redirect CTA. Target conversion: 8--12%.
Cross-Page State Management
Nanostores provide lightweight, cross-framework state that persists across Astro page navigations.
playerStore
Current track, playback state, volume, and position. Persists so music continues playing during page transitions.
tracksStore
Track list, queue, and metadata for the current context. Shared between player and track listing components.
tabsStore
Active tab state for artist profile navigation. Keeps the selected tab in sync across component re-renders.
navigationStore
Scroll position, navbar visibility state, and breadcrumb history for back navigation.
collectionStore
Current collection context (releases, playlists) and pagination state.
industryAccessStore
Industry verification status, gated content access levels, and session state for promoters, agents, and labels.
modalVoteStore
Local Circuit voting modal state -- current contest, selected contestant, and vote submission status.