WHI$KY BEATSImmersive artist platform with a beat store.
01 — Overview
The platform of the artist WHI$KY: one continuous journey through the album THOUGHTLESS, with a vinyl that spins on scroll, a 3D turntable wired to Spotify, videos and gallery — plus a beat store with licences, checkout and automatic file delivery.
- Client
- WHI$KY (artist)
- Role
- Full-stack / Architecture / Payments / Testing
02 — Flow
- 01Listen
- 02Pick a licence
- 03Cart
- 04Stripe checkout
- 05Webhook confirms
- 06Email with links
- 07Download
03 — By the numbers
20
Postgres tables
10
SQL migrations
9
admin areas
E2E
desktop + mobile
04 — Stack
- Next.js 16
- TypeScript
- Supabase
- PostgreSQL
- Stripe
- Resend
- Three.js
- GSAP
- Vitest
- Playwright
- Vercel
05 — Technical highlights
- 01Beat store with per-beat licences (MP3, WAV, stems, exclusive) and a temporary hold on the exclusive during checkout.
- 02Stripe checkout with webhook and a daily reconciliation job; automatic email delivery with expiring download links.
- 03Postgres with Row Level Security, tested without Docker on Postgres compiled to WebAssembly.
- 04Admin panel: beats, licences, music, agenda, media, orders, sales and copy.
- 05Audio engine outside React (a single <audio> + Web Audio) with a player that persists across pages.
- 06PT/EN without an i18n library, and customer accounts with email sign-in codes.
06 — Backend & admin
Behind the site sits a complete system: the artist runs everything from his own panel, without touching code, and every sale goes through payment, confirmation, delivery and download tracking.
Architecture
01 Interface
- Public site PT/EN
- /admin panel
- Customer account
02 Server
- Server Components and Server Actions
- API: checkout, webhook, downloads
- Booking, sign-in codes, revalidation
03 Data
- Postgres with Row Level Security
- Auth (admin and customers)
- Storage: public media, private deliverables
04 Services
- Stripe: checkout and webhook
- Resend: transactional email
- Vercel Cron: daily reconciliation
Admin panel — /admin
01
Beats
Create and edit beats (BPM, key, genre, length), preview and delivery files with resumable uploads.
02
Licences
Licence types and per-beat pricing.
03
Music
Releases and tracks, with links to the platforms.
04
Agenda
Shows with venue, city and tickets.
05
Photos and videos
Site gallery and videos.
06
Requests
Booking requests from the site's form.
07
Sales
Sales, refunds, promo codes and a queue of items to resolve.
08
Copy
Site copy in PT and EN, editable without code.
09
Appearance and contacts
Accent colour, social links and contact emails.
07 — Selling files without losing sales
The core challenge was making sure every payment ends in delivered files, even when the webhook fails. Orders are confirmed by Stripe's webhook and anything that slips is caught by a daily reconciliation job.
08 — Audio and 3D without the weight
The turntable is a Three.js scene loaded only when it appears; audio lives in its own engine outside React, so music keeps playing while you navigate.
09 — Gallery
Next project →
Dashboard — Exemplo