A novel's website that opens like a book.
— Ecosystem
Anahê Canavezzi is a writer and a designer. She needed three public sites (the book, the studio and the blog) and a dashboard to manage all of it without depending on me. I built the four Next.js apps in a Turborepo and pnpm monorepo, served by a single NestJS API and a single database.
Architecture decision
I considered micro-frontends and dropped the idea: there are no multiple teams and no runtime composition. These are four sites sharing a design system, types and schemas, which is exactly what Turborepo is for.
One dashboard and one API manage the content of all three public sites.
— The story
Chapter 01Home
The Home starts with the book closed, and the pages turn to reveal the site. Each page is cut into vertical slices that bend as it turns, animated with the Web Animations API. The opening waits for the fonts and the images above the fold (4 s at most) so it never opens half-rendered, shows only on the first visit and is skipped with prefers-reduced-motion.
Chapter 02The book
Synopsis, book details, where to buy, the first chapter as a PDF and reviews. The chapter excerpt opens with a wine drop cap, and behind the book mockup a pattern slowly drifts diagonally.
Chapter 03Writings
Short stories and chronicles use the blog's Post model with publishTo = WRITINGS. Anahê writes in the same editor and picks where to publish. The writer site just filters.
Chapter 04About · Contact
The bio and timeline come from the dashboard. The contact form asks for the reason (event, press, book club, school or other) and goes through Turnstile, a honeypot and rate limiting before becoming a lead in the dashboard.