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:
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user