09·Product·Passion project
Halation
Subscription web app for cinephile designers. Two surfaces — a personal taste graph that ships a weekly cinematographer-voice essay (a *through line*) over your library, and a Reddit-style Learn community for cinematography / lighting / colour / production design / directors / shot-of-the-week. Localhost-only through validation; private-beta later.
What it took
The skills behind this project.
Every project below leans on a primary discipline and a handful of secondary ones. Tap any chip to see how that skill plays out across the wider portfolio.
Skills demonstrated
- Product StrategyPrimary
Taste-graph + weekly cinematographer essay + community Learn surface; Halation app, 'through line' = essay artifact.
- Frontend EngineeringSecondary
Next.js 15 App Router with server-rendered Learn surfaces, optimistic vote/save buttons, useTransition + useState patterns split by navigate-away vs in-place.
- Backend EngineeringSecondary
Prisma + libSQL (lazy-init Proxy), JWT cookie auth, learn-post/vote/comment/accept/save APIs with uniform {error, detail} shape and in-memory rate limiting.
- Web DesignSecondary
Production-document visual system: mono chrome, slate numbering, single halation-amber accent (#FF6A3D), 8% film-grain overlay, Fraunces serif only inside the essay zone.
Context
Why it exists.
A subscription web app for cinephile designers — the founder-market-fit niche where Letterboxd, Mymind, Are.na, and Cosmos each own one piece (audience, library, graph, curation) but no incumbent assembles them into a personalised weekly essay. The wedge sits in cinema-grounded taste modelling plus cinematographer-voice writing plus Figma-exportable palettes; nobody at the $9–29/mo tier is shipping that combination.
Two surfaces, one product. First: a personal taste graph — log films, images, designs, architectural references, books, get a weekly four-hundred-word essay (a *through line*) tracing visual lineage across the library, with a five-colour palette and three unexplored adjacents to find next. Second: a Reddit-style Learn community — practitioner-curated topics (cinematography, lighting, colour, production design, directors, shot of the week), LINK + QUESTION post kinds, threaded comments, upvotes, accepted-answer affordance on questions.
The brand carries the architecture in its grammar: Halation is the app; a through line is the artifact it ships you each Sunday. Halation itself is the orange-red bloom that happens when bright light bleeds back through film stock — cinema-native, colour-native, one word.
StackNext.js 15 · Prisma · Turso · JWT · OpenAI embeddings · Claude · @xenova/transformers · node-vibrant
Process
The decisions that shaped it.
- 01
Brand chosen for what it points at, not at
The product was scaffolded as 'Through Line', renamed once to 'Filament', then settled on 'Halation' in a single decision the same day. The first name described, the second was generic, the third *is* — a bloom around tungsten is what the visual register of the founder's #1 film (Moonlight, 2016) already does. The brand commits to a colour register before the product asks anyone to.
Product Strategy - 02
Production-document visual system
The chrome reads like a call sheet: mono-forward, four-digit slate numbering on every header, single warm accent (--halo amber #FF6A3D), 8% film-grain overlay applied as a fixed sibling in the root layout via inline SVG turbulence (no asset request). The Fraunces serif is reserved exclusively for the .essay zone — the weekly through line — so the editorial register is structurally enforced, not stylistically suggested. A /style-guide route locks the visual language as a single navigable artifact.
Web Design - 03
Learn surface designed for the community before it exists
The Reddit-style Learn surface launched in private beta with v1 conventions: LINK posts open with a paragraph of context (never a bare link drop), QUESTION posts get an accepted-answer affordance once the author finds the comment that resolved it, one level of comment nesting, up-votes only. Topics are practitioner-curated, not user-created, to prevent long-tail subreddit sprawl in early days. Six topics seed the surface; eight posts seed the discourse.
Product Strategy - 04
Save-to-library as the explicit taste-graph bridge
A LINK post with an imageUrl is structurally an Entry — same data shape as a Letterboxd import or an Are.na block. Saving a LINK post mirrors it into the upvoter's Library on an explicit action, never on upvote. Upvote means 'this is insightful'; save means 'this is part of my visual taste'. Conflating them would produce noisy embeddings down the line. The mirror writes through with a learn:<postId> externalId so the audit trail stays intact.
Backend Engineering - 05
Localhost-first sequencing
Phases 1-5 ship the full product loop running locally on port 3020. Pavlo uses it daily as the validation gate. Phase 6 (Publish — Stripe, Resend, Vercel, cron, rolling release) is explicitly deferred until G2 passes: would he screenshot the essays, would they make Bonya clients curious. No paid users, no email deliverability, no deploy regressions to fight while the system prompt and the taste graph are still being tuned. The build accumulates correctness before it asks for revenue.
Frontend Engineering
Outcome
What shipped.
Localhost-only on :3020 through G2 validation. Phase 1 scaffold + Learn v1 (post / vote / comment / accept-answer / save-to-library) shipped 2026-05-26; Phase 2 Connections sync starts next.
Phase 1 scaffold complete, Learn v1 fully shipped (six topics, eight seeded posts, vote / comment / accept-answer / save-to-library all end-to-end verified). Connections sync proven with eighty real Letterboxd entries flowing into the library through the existing /api/connections/sync pipeline. Repo locked behind nine atomic commits. Next: Are.na + Pinterest OAuth, CLIP embeddings, then Phase 3 essay generation.