Case study
In progress
Kocteau
A Letterboxd-inspired music product with OTP auth, taste onboarding, Deezer search, reviews, public profiles, track pages, and a Supabase/Postgres backend.
Status
In progress
Year
2026
Stack
Next.js, React, TypeScript, Supabase, PostgreSQL, Tailwind CSS, Shadcn/ui, Vercel
Role
Product design, frontend, data, deployment
Stack
Case notes
Problem
Music discovery is personal, but most music products optimize playback, cataloging, or passive recommendation. Kocteau explores a more social question: what would a Letterboxd-like layer for songs feel like if reviews, taste, and discovery lived in the same product?
Kocteau is built around a simple belief: music taste becomes more meaningful when people can explain it, not only stream it.
Playlists show what people collect, scrobbles show what people played, and algorithms suggest what might come next. But the human layer often disappears into group chats, social posts, or notes that are hard to revisit. Kocteau turns that behavior into a product loop.
Solution
The core loop combines explicit taste with social activity. A user signs in with email OTP, completes a profile, selects preference tags, reviews songs found through Deezer, and then discovers more music through reviews, follows, and feed signals.
- 01
Sign in
A passwordless OTP flow lowers account friction and keeps the first session focused on taste, not credentials.
- 02
Shape taste
Profile setup and preference tags create the first recommendation signals before the user has review history.
- 03
Find a track
Deezer search gives users a fast way to find music while Kocteau decides what needs to become local data.
- 04
Publish a review
A rating and written take turn listening into a reusable object attached to a profile and a track page.
- 05
Interact
Likes, bookmarks, comments, and follows make the product social and create richer signals for discovery.
- 06
Recommend
The feed can blend preference tags, social signals, recency, diversity, and fallback content as usage grows.
Product surfaces
These are the product moments that make Kocteau more than a database of songs: identity, taste, publishing, and social discovery.
Track review loop
Search, write, publish, discover
Auth
Email OTP sign in
A lightweight account flow powered by Supabase Auth and email delivery, designed to avoid password friction.
Taste
Preference onboarding
Explicit tags give the feed a starting point before the user has enough behavior for stronger recommendations.
Search
Deezer-powered lookup
Users search real music metadata without manually creating songs, albums, or artists.
Review
Rating plus written take
The composer turns a quick reaction into content that can live on feeds, profiles, and track pages.
Feed
For You direction
The product direction combines human curation with lightweight recommendation signals instead of pure algorithmic opacity.
Social
Likes, comments, saves, follows
Interaction primitives make taste social and give future recommendation logic more useful signals.
Role
- Defined the MVP, user journey, review loop, onboarding model, and recommendation direction.
- Built the frontend with Next.js App Router, React, TypeScript, Tailwind CSS, and shadcn/ui.
- Modeled the backend with Supabase Auth, Postgres tables, relational entities, RLS-aware access patterns, and RPCs.
- Integrated Deezer search, email OTP delivery, server-state handling, deployment workflow, and production release concerns.
Architecture
I treated Kocteau as a product system, not a static demo. The architecture separates UI, server state, backend data, auth, external music metadata, and deployment so the product can keep evolving after the MVP.
System map
A compact product architecture around a Next.js web app, a Supabase data layer, Deezer for music search, email infrastructure for OTP, and Vercel as the production surface.
Core
Next.js web app
The main product surface for auth, onboarding, search, review creation, profiles, feeds, and track pages.
- App Router
- React
- TypeScript
- Tailwind
- shadcn/ui
Server state
TanStack Query manages remote data, cache, optimistic interactions, and synchronization for reviews and social actions.
TanStack Query / cache / optimistic UI
Supabase
Auth, Postgres, Row Level Security, Storage, and RPCs handle identity, relational product data, and critical writes.
Auth OTP / Postgres / RLS / RPCs
Music metadata
Deezer powers track search while Kocteau stores stable local entities so reviews can accumulate around durable records.
Deezer API / track search / entity cache
Email layer
Resend SMTP supports OTP delivery and keeps auth messaging separate from product UI concerns.
Resend / SMTP / React Email
Vercel
Hosts the production app, preview builds, and the public release surface at kocteau.com.
Production / previews / CI
Technical decisions
OTP-first authentication
- Problem
- A social product needs low-friction account creation, but handling passwords adds security and UX overhead early in the MVP.
- Decision
- Use Supabase Auth with email OTP and pair onboarding with profile and taste setup instead of password creation.
- Tradeoff
- The app avoids password management, but email delivery, expired codes, and redirect states need careful testing.
Entity caching layer
- Problem
- Deezer is useful for search, but relying on an external API as the source of truth would make reviews and track pages fragile.
- Decision
- Create or reuse local `entities` when users publish reviews, then attach ratings, profile activity, and track pages to those records.
- Tradeoff
- Metadata can become slightly stale, but Kocteau gets durable IDs, fewer repeated external calls, and data it can query reliably.
Postgres and RLS over NoSQL
- Problem
- The product depends on relationships between users, reviews, entities, likes, comments, bookmarks, follows, and taste tags.
- Decision
- Use Supabase Postgres with relational modeling and RLS-aware access rules instead of a loose document model.
- Tradeoff
- The schema requires more upfront thinking, but joins, constraints, and policy-driven access fit the product better.
TanStack Query for server state
- Problem
- Reviews and social interactions change often, and manually coordinating fetches, cache, loading states, and optimistic updates gets messy.
- Decision
- Use TanStack Query for server-state synchronization, local cache, and interaction feedback.
- Tradeoff
- It adds dependency and bundle weight, but reduces custom state code and makes interactive surfaces feel faster.
Hybrid recommendation direction
- Problem
- A new user has almost no behavior history, so a pure algorithmic feed starts cold and generic.
- Decision
- Blend explicit taste tags, reviewed tracks, follows, recent activity, diversity, and fallback content into the discovery model.
- Tradeoff
- The feed becomes more opinionated, but the first session can feel relevant before the product has enough long-term data.
Backend-as-a-service over custom infrastructure
- Problem
- The MVP needed auth, database, storage, policies, and server writes without spending the project budget on infrastructure.
- Decision
- Use Supabase and Vercel instead of maintaining a custom Node backend and self-managed database.
- Tradeoff
- There is some platform coupling, but the product can move faster and keep engineering effort on the user experience.
Measurement
The case study should not invent traction. Instead, Kocteau can be evaluated through the signals that matter for this product category: activation, publishing, engagement, recommendation quality, and system health.
Observable signals
The next iteration should turn these product questions into dashboard queries or analytics events.
Activation
OTP to taste
How many users verify email, finish profile setup, and select preference tags.
Creation
First review
How quickly a new user searches a track and publishes their first rating or written take.
Engagement
Social actions
Likes, saves, comments, and follows show whether reviews create interaction beyond reading.
Discovery
Feed quality
Feed loads, clicks, follows, and review actions can reveal whether recommendations feel useful.
Result
Kocteau reached a functional MVP shape: users can authenticate, complete onboarding, search music through Deezer, publish reviews, browse social surfaces, and view public profiles and track pages. The strongest result is not a single feature, but a coherent loop that can now be tested with real behavior.
Learnings
- 01Recommendation quality starts before the algorithm. Onboarding, taste tags, empty states, and social defaults shape the first session.
- 02External APIs are inputs, not product foundations. Deezer can search music, but Kocteau needs its own stable entities.
- 03Server state deserves a dedicated model. Reviews, likes, comments, and saves feel better when cache and optimistic states are handled deliberately.
- 04Relational data fits social products. Reviews, follows, profiles, and entities benefit from constraints and explicit relationships.
- 05OTP auth looks simple but has hidden edge cases: email delay, spam folders, expired codes, redirects, and incomplete profiles.
Next steps
- Add real product screenshots and Excalidraw/SVG diagrams for architecture, user flow, and recommendation logic.
- Instrument activation and engagement metrics before making claims about traction.
- Improve recommendation quality with more nuanced taste signals and feedback loops.
- Expand notifications and retention surfaces once review publishing is validated.
- Add automated tests around auth, review creation, social interactions, and feed behavior.
Open Kocteau
A social music review product built around tracks, taste, profiles, and discovery.
Next
I'm shaping each project into a clearer story: problem, solution, role, stack, technical decisions, result, and what I learned.
View all work