← Back to Projects

Pärlband

Ongoing Development
Next.jsTypeScriptTailwind CSSCloudflare D1 & R2Pages FunctionsZustand

About the Project

A serverless full-stack web application built for the band Pärlband to manage and stream music, lyrics, and sheet music. Instead of running a conventional container or Node.js server, the frontend is compiled into a static export hosted on Cloudflare Pages, while all dynamic operations—relational data persistence, REST APIs, and media streaming—run entirely on Cloudflare's edge infrastructure.

Key Features

Persistent Media Player

  • Single audio element surviving client-side route transitions
  • Global state management (queue, playback, active track) via Zustand
  • Play-count analytics with debounce rules (registers after 5s continuous playback)

Edge Admin & Media Pipeline

  • Direct binary streaming to R2 object storage via Workers to avoid RAM buffering
  • Automatic metadata synchronization linking R2 objects to SQL records
  • Protected editor surface for songs, recordings, musicians, and credits

Architecture & Edge Infrastructure

Frontend Client

  • Next.js App Router (static export)
  • React & TypeScript
  • Tailwind CSS

Edge Backend

  • Cloudflare Pages Functions (REST API)
  • Zero-latency cold starts with V8 isolates
  • Stream-through payload handling

Storage & Data

  • D1: Relational SQLite with versioned SQL migrations
  • R2: S3-compatible asset storage via custom CDN domain
  • Automatic primary/fallback recording queries
Security & Edge Auth: Administrative interfaces (/admin) and write endpoints (/api/admin/*) are secured at the edge using Cloudflare Zero Trust (Access), enforcing identity verification prior to Worker invocation.