Nibbles with Nifa

A Next.js and Sanity site where Nifa can write recipes and travel stories, preview them and decide when they are ready for readers.

Content architecture
Sanity workflow
Preview security
Accessible frontend

Visit live site

Context

Nibbles with Nifa is Nifa’s food and travel site. She needed to write and update recipes and articles without asking a developer to rebuild each page.

I built the publishing flow in Sanity and Next.js. It accepts rough ideas, but only sends finished, published entries to the public site.

Ownership

Engineering and product architecture

Next.js · TypeScript · Sanity · React

Modelled recipes, articles and editorial states in Sanity, with published content as the only production source.
Built the homepage, recipe, article, archive and preview routes in Next.js.
Added validation and route tests for publication state, provider failure, metadata and accessible media.

Nifa · Editorial direction, writing, photography and day-to-day publishing.

I built the software. Nifa owns the editorial direction, writing, photography and food and travel perspective.

The case-study media was captured locally. It contains no Studio session, unpublished entry, credential or internal note.

Constraints

Nifa needed to handle routine editing on her MacBook without developer help.
A recipe can begin as a short note, but a public recipe needs quantities, timing, ordered steps, attribution and image text.
The first release had to stay on the existing free stack, so publishing remains manual.
A failed or empty Sanity response must not be replaced with sample content.

Decisions

Keep sample content out of production.

Content-source diagram: production Sanity content passes through published and ready filters into public routes; local fixture content is rejected in production. — Production reads published Sanity content. Local sample entries use the same renderers but cannot run in production.

Approach: All pages read through one content store. Production accepts Sanity only and returns real empty or error states instead of substitute entries.
Trade-off: Maintaining separate Sanity and sample sources adds code. It prevents local test entries from appearing on the live site.
Why: The public site should show what Nifa published, even if that means an empty page or a visible error.

Give recipes a separate ready state.

Editorial workflow diagram: a sparse recipe idea moves through a cooked draft and a strict ready gate before native publication makes it eligible for a public route. — One Sanity document moves from a short idea to a cooked draft, then gains the required recipe and accessibility fields at ready.

Approach: A recipe moves from idea to cooked draft to ready. Quantities, timing, steps, authorship and image text become required at ready.
Trade-off: Nifa has one more field to set. In return, rough notes can stay in Sanity without meeting every public recipe requirement.
Why: Capture stays quick, but a public recipe cannot omit the details needed to cook or understand it.

Keep preview routes private.

Trust-boundary diagram: published, cacheable, indexable public routes are separated from signed, no-store, no-index authenticated preview routes. — Public and preview routes reuse page layouts but have separate access, caching and indexing rules.

Approach: Public queries use Sanity’s published perspective and exclude draft IDs. Preview uses a signed enable route, no-store data and noindex metadata.
Trade-off: Signed preview routes and separate fetch settings add setup. They stop drafts from sharing public caching and metadata.
Why: Nifa can review a real page before publishing it, while readers and search engines receive only public content.

Proof

Public queries exclude draft IDs and require the ready state for recipes. Production uses Sanity’s published perspective and rejects local sample content. Preview runs through a signed route with no-store data and noindex metadata. Route tests cover drafts, provider failures, metadata and private editorial fields. The screenshots and clip were captured locally; the live site is linked above.

Five-second silent walkthrough of the homepage, recipe and article layouts, recorded locally.

The clip opens on the Nibbles with Nifa homepage, moves through an example recipe and ends on an example article. No Studio session or unpublished Sanity content appears.

Text description

Silent visual walkthrough. It starts on the Nibbles with Nifa development homepage. It opens an example Miso mushroom pasta recipe and shows its ingredients and method. It ends on an example article titled ‘A corner-shop haul turned dinner’. No speech or audio is present.

Outcomes

Nifa can write and publish recipes and articles without page-by-page developer work.
Recipes, travel stories, media, authors, SEO fields, tags and related content share reusable models and renderers.
Production excludes drafts, internal fields and local sample content.
Route tests cover public pages, authenticated preview, missing entries, provider failures, metadata and mixed media.

Reflection

The useful split was simple: make capture forgiving and make publication strict.

Next case study · Waxlist Visit live site All selected work