Music / Record Label

Warbeats Records

Institutional site for an electronic-music label with a local mirror of the catalog, auto-synced from Beatport and enriched by Spotify.

Year: 2026
Role: Full-stack development, design and UX
Status: Live
Complexity: Very High

For whomDJs looking for label releases, music pros searching the catalog, fans of the scene and the label team monitoring the integration

7 integrated modules18+ screens6 integrationsBuilt in 2026

View live Have a similar project?

The case

Problem

A Brazilian electronic-music label with a deep catalog needed its own institutional site, always up to date. Beatport has an API but rarely grants access, and when it does the editorial metadata is poor: cover at variable resolution, no reliable preview, imprecise duration.

Solution

Custom integration with Beatport's API (the hardest unlock in the project), mirrored locally in Postgres and enriched with Spotify (HD cover, 30-second preview, precise duration, genres) joined by UPC → ISRC. Everything syncs on its own, no manual button. On top of that base, the full institutional site: filterable catalog, artist pages, public performance via Songstats, demos, contact and a sync-observability admin panel.

Outcome

Label catalog lives at its own address
New releases appear on the site automatically, with HD cover and preview
Site stays up even if Beatport or Spotify go down
100% automatic sync: no operator clicks required
Team monitors sync health from the panel, no log digging

9.68M

streams

Songstats · MAY 2026

472

DJ supports

Songstats · MAY 2026

651

tracks released

Warbeats · MAY 2026

Architecture

TanStack Start + React 19 with SSR and PT/EN i18n. The catalog lives in a Postgres mirror fed by a custom engine that combines Beatport (commercial truth) and Spotify (editorial truth) joined by UPC → ISRC, with automatic sync via pg_cron and images mirrored to storage.

System modules

7 modules integrated in the same database, same auth, same design system.

Beatport + Spotify sync engine

Custom engine that combines two catalog sources into a Postgres mirror, 100% automatic.

Custom Beatport API integration (access typically not granted)
Spotify Web API integration joined by UPC → ISRC
Postgres mirror with diff by bp_updated_at (incremental sync)
pg_cron jobs: Beatport every 6h + daily full, Spotify 30 min later
Mirror of covers in WebP (640px hero, 300px grid) to Supabase Storage
Dead-letter for releases with no Spotify match, visible in the admin panel

Release catalog

Public showcase of every label release.

Paginated listing with HD cover, artist and genre (served from the mirror)
Genre filter (derived from the releases themselves)
Release page with tracklist and related releases
Player with 30-second Spotify preview (automatic fallback to Beatport)
Two side-by-side CTAs: Buy on Beatport + Listen on Spotify
Dynamic Open Graph (music.album) and JSON-LD MusicAlbum + BreadcrumbList

Artists

Dedicated page for each artist on the roster.

Listing aggregated by release count on the label
Artist page with bio, official Spotify photo and discography
Official Spotify genres on the header
Stable slugs for SEO

About and performance

Label history and public numbers via Songstats.

Founders bio (Plastic Robots and FlexB)
Label stats (164 releases, 651 tracks, 228 artists, since 2015)
Audience: 11.5K followers, 9.68M streams, 705 playlists, 7.49M reach
Discovery: 138 charts, 175K Shazams, 472 DJ supports
Video: 4.6K videos, 14.9M views
"Played by" in three tiers: Armin van Buuren, Felix Jaehn, Solomun and full roster

Demos and contact

Direct channel for artists and partners.

Demo submission form
Contact page
Routing by message type

Sync admin panel

Complete observability of the mirror, no need to open server logs.

Supabase login with password reset
Status cards: last sync, success rate, totals (releases, tracks, artists)
Full history of runs (Beatport and Spotify)
Last-7-days chart by status
Unmatched releases panel (no ISRC on Spotify)
Admin user management

Internationalization and brand

Ready for a global audience.

PT/EN i18n with persistent language switch
Brand system (lockup, mark, wordmark)
Cookie consent
Dynamically generated sitemap and robots

Architecture decisions

How the project evolved: technical choices, what changed and why.

Live-fetch → local Postgres mirror

Before

Every page view hit Beatport's API in real time, with a 300s edge cache and a static fallback in case the API went down.

After

The catalog lives in a Postgres mirror (releases, tracks, artists, joins, sync history). Beatport is queried only by the sync job to detect diffs.

WhyBeatport's API is unstable with a low rate limit. The mirror decouples the site from API availability: reads are always fast and predictable, and the site stays up even if Beatport is down for hours.

One source → two sources (Beatport + Spotify)

Before

Beatport was the only catalog source. Covers at variable resolution, no reliable preview, sometimes imprecise duration.

After

Beatport = commercial truth (UPC, ISRC, catalog, BPM, presale, exclusivity). Spotify = editorial truth (640px CDN cover, canonical name, 30-second preview, precise duration, artist images and genres). Join by UPC → ISRC.

WhyEach platform is good at what it is. Beatport knows the release commercially; Spotify knows it editorially. Combining them yields the best of both without making up data.

Manual sync → 100% automatic pg_cron

Before

Sync was triggered by a button in the admin panel, at the risk of the operator forgetting or clicking twice.

After

Scheduled jobs via pg_cron: Beatport every 6h + daily full, Spotify enrichment 30 min later, daily pre-release polling. The admin panel now only observes, it does not trigger.

WhyRepetitive tasks belong to the infra, not the operator. Cron keeps the catalog always up to date without depending on anyone to remember.

External CDN → covers mirrored to own storage

Before

Covers were served directly from Beatport's CDN, in variable size and format, with high latency for Brazil.

After

Images mirrored to Supabase Storage in WebP (640px hero, 300px grid), idempotent. Stable, fast URLs independent of Beatport's CDN.

WhyImagery is part of the label's identity: it should not depend on a third-party CDN. WebP cuts file size in half and own storage guarantees the URL never changes.