Willows Media Group: A Modern Platform for Indonesian Hip-Hop

Willows Media Group is a bilingual website and content management system for an independent Jakarta-based record label. The platform showcases artists, manages releases, and provides a seamless editorial experience through a custom headless CMS architecture.

Project Overview

Willows Media Group is an independent music label focused on Indonesian hip-hop, R&B, and electronic artists. They needed a professional web presence that could showcase their roster while allowing non-technical team members to update content without developer involvement. The solution required bilingual support (English/Indonesian), integration with streaming platforms, and a modern aesthetic that reflects the label's underground culture.

The Challenge

The project addressed several key problems facing the growing label:

• Content Management Bottleneck: Artist bios, photos, and show information required developer intervention to update
• Bilingual Requirements: All content needed Indonesian translations for the local market
• Streaming Platform Integration: Release information was manually duplicated across the website and Spotify
• Media Performance: Large artist photos and videos needed optimization for mobile users in Indonesia
• Brand Consistency: The label needed a cohesive visual identity across artist pages while allowing individual artist theming

Technical Architecture

Headless CMS with Live Preview

The architecture separates content management from presentation, using Payload CMS as a headless backend with Next.js as the frontend. This enables content editors to preview changes in real-time before publishing.

// Live preview configuration in Payload CMS
livePreview: {
  url: ({ data }) => {
    const baseUrl = 'https://willow-records.vercel.app'
    if (data?.slug) {
      return `${baseUrl}/en/artists/${data.slug}`
    }
    return baseUrl
  },
  collections: ['artists', 'shows', 'videos', 'pages'],
  breakpoints: [
    { label: 'Mobile', width: 375, height: 667 },
    { label: 'Desktop', width: 1440, height: 900 },
  ],
}

API Integration Layer

The frontend communicates with multiple data sources through a unified API layer:

• Payload CMS REST API: Artist profiles, show information, page content
• Spotify Web API: Automatic release catalog synchronization
• Vercel Blob Storage: Optimized image and video delivery
• Resend API: Contact form email delivery

Key Features Implementation

1. Bilingual Content Management

Internationalization with next-intl:

• Dual content fields in CMS (bio/bioId, content/contentId)
• URL-based locale switching (/en/artists vs /id/artists)
• Automatic locale detection with manual override
• Separate translation files for UI strings

2. Spotify Catalog Integration

Automatic Release Synchronization:

export async function getArtistReleases(artistId: string, limit = 20) {
  const token = await getSpotifyToken()
  const response = await fetch(
    `https://api.spotify.com/v1/artists/${artistId}/albums?limit=${limit}&include_groups=album,single,ep`,
    { headers: { Authorization: `Bearer ${token}` } }
  )
  return response.json()
}

Catalog Features:

• Real-time release data from Spotify API
• Album artwork, track counts, and release dates
• Direct links to streaming platforms
• Artist filtering and release type categorization

3. Immersive Artist Pages

3D WebGL Backgrounds:

• Custom Three.js scenes per artist using React Three Fiber
• Particle systems with artist-specific accent colors
• Scroll-driven parallax animations with Framer Motion
• Graceful fallbacks for low-powered devices

User Experience Design

Performance-First Approach

The site prioritizes performance for users in Indonesia, where mobile connections vary significantly in quality.

Key UX Principles:

• Progressive Loading: Skeleton states and lazy-loaded components
• Image Optimization: WebP format with responsive srcsets via Next.js Image
• Code Splitting: Dynamic imports for 3D scenes and heavy components
• Caching Strategy: ISR with 1-hour revalidation for CMS content

Content Editor Experience

Design Considerations:

• Live Preview: Editors see changes in real-time on actual frontend
• Dashboard Links: Quick access to production site from CMS
• Media Library: Centralized upload with automatic optimization
• Relationship Fields: Link artists to videos and shows with dropdowns

Technology Decisions

Frontend Architecture

Next.js 16 with App Router:

• Server Components for SEO-critical pages
• Client Components for interactive elements
• Parallel route rendering for performance
• Built-in image optimization and caching

Backend Strategy

Payload CMS 3.x with PostgreSQL:

// Collection definition for Artists
export const Artists: CollectionConfig = {
  slug: 'artists',
  admin: {
    useAsTitle: 'name',
    livePreview: { url: ({ data }) => `${FRONTEND_URL}/artists/${data.slug}` },
  },
  fields: [
    { name: 'name', type: 'text', required: true },
    { name: 'slug', type: 'text', required: true, unique: true },
    { name: 'bio', type: 'richText' },
    { name: 'bioId', type: 'richText', label: 'Bio (Indonesian)' },
    { name: 'photo', type: 'upload', relationTo: 'media' },
    { name: 'spotifyId', type: 'text' },
    { name: 'accentColor', type: 'text' },
  ],
}

Infrastructure

Vercel Platform:

• Separate deployments for CMS and frontend
• Neon PostgreSQL for serverless database
• Vercel Blob for media storage with CDN
• Automatic HTTPS and edge caching

Business Impact & Results

Operational Efficiency

For Content Editors:

• Zero Developer Dependencies: Staff update content independently
• Real-Time Preview: See exactly how changes appear before publishing
• Bilingual Workflow: Manage both languages in single interface
• Media Management: Upload, crop, and organize assets visually

For Artists:

• Consistent Branding: Professional pages with custom accent colors
• Automatic Updates: Releases sync from Spotify without manual entry
• Rich Media: Gallery support for photos and embedded videos

Business Metrics

Measurable Improvements:

• 100% reduction in developer time for content updates
• 2 language markets served from single codebase
• < 3 second load times on 3G connections
• 0 downtime deployments with Vercel preview URLs

SEO & Marketing Foundation

Search Optimization

Technical SEO:

• Server-rendered pages for full crawlability
• Dynamic sitemap generation
• Structured metadata per page
• Open Graph images for social sharing

Content Strategy:

• Artist pages optimized for name searches
• Bilingual content expands search footprint
• Release pages link to streaming platforms
• Contact forms capture booking inquiries

Future Development Roadmap

Planned Enhancements

Content Expansion:

• News/blog collection for label announcements
• Event calendar with ticket integration
• Press kit downloads for media contacts
• Newsletter signup with email automation

Advanced Features

Technical Improvements:

• On-demand ISR revalidation via Payload webhooks
• Analytics dashboard in CMS admin
• A/B testing for landing page variants
• PWA support for mobile app experience

Technical Challenges & Solutions

Vercel Blob Storage Integration

Challenge: Payload CMS 3.x required specific configuration for cloud storage, and the storage adapter documentation was sparse for production deployments.

Solution: Configured the Vercel Blob storage plugin with disablePayloadAccessControl: true to serve files directly from CDN, updated Content Security Policy to allow blob storage domain, and added proper remotePatterns in Next.js config for image optimization.

Live Preview with Separate Deployments

Challenge: The CMS and frontend are deployed as separate Vercel projects, requiring cross-origin iframe embedding and proper security headers.

Solution: Added the CMS domain to frame-ancestors CSP directive, configured CORS in Payload, and set up Permissions-Policy headers for Spotify embed compatibility within the preview iframe.

Lessons Learned

Technical Insights

Payload CMS 3.x Maturity: The framework handles complex use cases well, but requires careful attention to import map regeneration when adding custom components.

Vercel Blob vs Traditional Uploads: Cloud storage significantly simplifies media handling but requires upfront CSP and image optimization configuration.

Three.js Performance Budgets: 3D backgrounds enhance visual impact but need aggressive optimization and fallbacks for mobile devices.

Business Learnings

Content Structure Planning: Investing time in collection field design upfront prevents migration headaches later.

Bilingual Complexity: Dual-language support doubles content fields but the CMS handles it gracefully with proper labeling.

Live Preview Value: Editors strongly prefer seeing real changes over abstract admin forms—worth the setup complexity.

Conclusion

The Willows Media Group platform demonstrates how modern web technologies can solve real business problems for creative industries. By combining a headless CMS architecture with a performant Next.js frontend, the label gained complete control over their digital presence without ongoing developer dependencies.

The project showcases full-stack capabilities across the entire development lifecycle: database design, API integration, frontend performance optimization, and deployment infrastructure. The bilingual implementation and Spotify integration highlight the ability to handle complex business requirements while maintaining clean, maintainable code.

Most importantly, the platform serves its users—both the label staff managing content and the fans discovering new Indonesian artists.

View the Website

The Willows Media Group website is live at https://willow-records.vercel.app. The platform continues to evolve as the label grows its roster and expands its digital presence across Southeast Asia.