feat: initial scaffold for ClickTrack monorepo
Full self-hosted click track generator for cover bands. Core technical pieces implemented: - CTP (Click Track Protocol) TypeScript schema, Zod validator, and WAV renderer (44.1 kHz, 16-bit PCM, accented downbeats, ramp sections) - MusicBrainz API client with 1 req/s rate limiting - PostgreSQL schema (songs, tempo_maps, registry_sync_log) with triggers - Git registry sync logic (clone/pull → validate CTP → upsert DB) - Next.js 14 App Router: search page, track page, API routes (/api/songs, /api/tracks, /api/generate) - UI components: SearchBar, SongResult, TempoMapEditor, ClickTrackPlayer (Web Audio API in-browser playback + WAV download) - Docker Compose stack: app + postgres + redis + nginx + registry-sync - Multi-stage Dockerfile with standalone Next.js output - .env.example documenting all configuration variables - README with setup instructions, CTP format spec, and API reference Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
AJ Avezzano
101
app/(web)/page.tsx
Normal file
101
app/(web)/page.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import { Suspense } from "react";
|
||||
import SearchBar from "@/components/SearchBar";
|
||||
import SongResult from "@/components/SongResult";
|
||||
import { searchSongs as searchSongsDB } from "@/lib/db/client";
|
||||
import { searchSongs as searchMB } from "@/lib/musicbrainz/client";
|
||||
import { upsertSong } from "@/lib/db/client";
|
||||
|
||||
interface PageProps {
|
||||
searchParams: { q?: string };
|
||||
}
|
||||
|
||||
async function SearchResults({ q }: { q: string }) {
|
||||
// Try local DB first
|
||||
let songs = await searchSongsDB(q, 20);
|
||||
|
||||
// If sparse results, hit MusicBrainz and cache locally
|
||||
if (songs.length < 3) {
|
||||
try {
|
||||
const mbResults = await searchMB(q, 20);
|
||||
for (const s of mbResults) {
|
||||
await upsertSong({
|
||||
mbid: s.mbid,
|
||||
title: s.title,
|
||||
artist: s.artist,
|
||||
duration_seconds: s.duration_seconds,
|
||||
acousticbrainz_bpm: null,
|
||||
acousticbrainz_time_sig_num: null,
|
||||
source: "musicbrainz",
|
||||
});
|
||||
}
|
||||
songs = await searchSongsDB(q, 20);
|
||||
} catch {
|
||||
// MusicBrainz unavailable — fall through with local results
|
||||
}
|
||||
}
|
||||
|
||||
if (songs.length === 0) {
|
||||
return (
|
||||
<p className="mt-8 text-center text-zinc-500">
|
||||
No results for <span className="text-zinc-300">“{q}”</span>.
|
||||
Try a different search.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="mt-6 space-y-3">
|
||||
{songs.map((song) => (
|
||||
<SongResult key={song.mbid} song={song} />
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomePage({ searchParams }: PageProps) {
|
||||
const q = searchParams.q?.trim() ?? "";
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-10 text-center">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-green-400">ClickTrack</h1>
|
||||
<p className="mt-3 text-zinc-400">
|
||||
Find a song, download a click track. Built for cover bands.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<SearchBar initialValue={q} />
|
||||
|
||||
{q && (
|
||||
<Suspense
|
||||
fallback={
|
||||
<p className="mt-8 text-center text-zinc-500 animate-pulse">Searching…</p>
|
||||
}
|
||||
>
|
||||
{/* @ts-expect-error async server component */}
|
||||
<SearchResults q={q} />
|
||||
</Suspense>
|
||||
)}
|
||||
|
||||
{!q && (
|
||||
<div className="mt-12 grid gap-6 text-sm text-zinc-500 sm:grid-cols-3">
|
||||
<div className="rounded-lg border border-zinc-800 p-5">
|
||||
<div className="mb-2 text-lg font-semibold text-zinc-200">Search</div>
|
||||
Search any song by title or artist. We pull metadata from MusicBrainz
|
||||
and cache it locally.
|
||||
</div>
|
||||
<div className="rounded-lg border border-zinc-800 p-5">
|
||||
<div className="mb-2 text-lg font-semibold text-zinc-200">Tempo Map</div>
|
||||
Community-contributed CTP tempo maps define every section, time
|
||||
signature change, and tempo ramp in a song.
|
||||
</div>
|
||||
<div className="rounded-lg border border-zinc-800 p-5">
|
||||
<div className="mb-2 text-lg font-semibold text-zinc-200">Download</div>
|
||||
Generate a 44.1 kHz WAV click track with accented downbeats — ready
|
||||
for your in-ear monitor mix.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
108
app/(web)/track/[id]/page.tsx
Normal file
108
app/(web)/track/[id]/page.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import type { Metadata } from "next";
|
||||
import { query, getTempoMapsForSong } from "@/lib/db/client";
|
||||
import type { SongRow } from "@/lib/db/client";
|
||||
import TempoMapEditor from "@/components/TempoMapEditor";
|
||||
import ClickTrackPlayer from "@/components/ClickTrackPlayer";
|
||||
import type { CTPDocument } from "@/lib/ctp/schema";
|
||||
|
||||
interface PageProps {
|
||||
params: { id: string };
|
||||
}
|
||||
|
||||
async function getSong(mbid: string): Promise<SongRow | null> {
|
||||
const { rows } = await query<SongRow>(
|
||||
"SELECT * FROM songs WHERE mbid = $1",
|
||||
[mbid]
|
||||
);
|
||||
return rows[0] ?? null;
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
|
||||
const song = await getSong(params.id);
|
||||
if (!song) return { title: "Track not found" };
|
||||
return { title: `${song.title} — ${song.artist}` };
|
||||
}
|
||||
|
||||
export default async function TrackPage({ params }: PageProps) {
|
||||
const song = await getSong(params.id);
|
||||
if (!song) notFound();
|
||||
|
||||
const tempoMaps = await getTempoMapsForSong(params.id);
|
||||
const bestMap = tempoMaps.find((m) => m.verified) ?? tempoMaps[0] ?? null;
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Song header */}
|
||||
<div>
|
||||
<p className="text-sm text-zinc-500 uppercase tracking-widest mb-1">Click Track</p>
|
||||
<h1 className="text-3xl font-bold">{song.title}</h1>
|
||||
<p className="mt-1 text-lg text-zinc-400">{song.artist}</p>
|
||||
{song.duration_seconds && (
|
||||
<p className="mt-1 text-sm text-zinc-600">
|
||||
{Math.floor(song.duration_seconds / 60)}m{" "}
|
||||
{Math.round(song.duration_seconds % 60)}s
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Player / Download */}
|
||||
{bestMap ? (
|
||||
<ClickTrackPlayer
|
||||
tempoMapId={bestMap.id}
|
||||
ctpDoc={bestMap.ctp_data as unknown as CTPDocument}
|
||||
verified={bestMap.verified}
|
||||
upvotes={bestMap.upvotes}
|
||||
/>
|
||||
) : (
|
||||
<div className="rounded-lg border border-dashed border-zinc-700 p-10 text-center text-zinc-500">
|
||||
<p className="text-lg font-medium text-zinc-300 mb-2">No tempo map yet</p>
|
||||
<p className="text-sm">
|
||||
Be the first to contribute a tempo map for this song via the community
|
||||
registry.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tempo map editor / viewer */}
|
||||
{bestMap && (
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-4">Tempo Map</h2>
|
||||
<TempoMapEditor ctpDoc={bestMap.ctp_data as unknown as CTPDocument} readOnly />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* All maps */}
|
||||
{tempoMaps.length > 1 && (
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-3">
|
||||
All community maps ({tempoMaps.length})
|
||||
</h2>
|
||||
<ul className="space-y-2">
|
||||
{tempoMaps.map((m) => (
|
||||
<li
|
||||
key={m.id}
|
||||
className="flex items-center justify-between rounded-lg border border-zinc-800 px-4 py-3 text-sm"
|
||||
>
|
||||
<span className="text-zinc-300">
|
||||
By{" "}
|
||||
<span className="font-medium">
|
||||
{(m.ctp_data as { metadata?: { contributed_by?: string } }).metadata?.contributed_by ?? "unknown"}
|
||||
</span>
|
||||
</span>
|
||||
<div className="flex items-center gap-3 text-zinc-500">
|
||||
{m.verified && (
|
||||
<span className="rounded-full bg-green-900/40 px-2 py-0.5 text-xs text-green-400">
|
||||
verified
|
||||
</span>
|
||||
)}
|
||||
<span>{m.upvotes} upvotes</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user