Tarka Tales: Server-Rendered Pakistani Food Publication with TanStack Start

Duration
Design, build, content & launch
Year
2026
My Role
Founder, developer and editor: product design, the full TanStack Start build, SEO, security and hosting, plus writing and editing every recipe, guide and story
At a glance
- automated tests
- 455
- pages crawled, zero failures
- 86
- kitchen calculators
- 3
Technologies Used
The Challenge
Pakistani food is well loved and badly documented online. Search for nihari or karahi and you get long stories wrapped around vague quantities, recipes copied between sites, and dishes from different regions treated as one cuisine. A first-time cook needs exact quantities, the technique behind each step, and some idea of where the dish comes from. I wanted a publication that does that properly. It also had to work as a website: fast on mobile, readable by search engines without running JavaScript, and honest enough to meet Google's quality and AdSense rules. That meant no invented ratings, no fake testing claims and no padded content.
The Solution
What's on the site
- Recipes grouped by chicken, beef, mutton, rice, vegetarian, bread, desserts and drinks. Each one has ingredients, numbered method steps you can link to, dish-specific FAQs and serving quantities you can scale.
- Regional cuisine pages for Punjab, Sindh, Khyber Pakhtunkhwa, Balochistan, Kashmir and Gilgit-Baltistan, plus street food, ingredients and Ramadan & Eid sections.
- The Tarka Guide: technique guides such as keeping biryani rice separate, fixing a watery karahi and browning onions properly, plus a guide to cooking Pakistani food outside Pakistan.
- Food stories about the culture around the food, such as chai, Sunday breakfast and the dastarkhwan.
- Kitchen tools: a Biryani Calculator, a Rice Calculator and a Kitchen Unit Converter (details below).
- Search, saved recipes, an RSS feed, and author pages with a byline on every card.
Server-rendered by default
Public routes use TanStack Start SSR. Route loaders resolve typed content before rendering, so titles, ingredient lists, method steps and internal links are already in the first HTML response. Only the interactive parts hydrate: filters, saved recipes, serving quantities, navigation and the calculators. The sitemap, RSS feed and robots.txt are resource routes that build XML and text responses from the same content.
Content lives in a typed data module behind a repository layer, so moving to a CMS such as Supabase later means rewriting the repositories, not the routes.
Calculators people can rely on
- Biryani Calculator. You enter adults, children (each counted as 0.6 of an adult serving), biryani type, bone-in or boneless meat, appetite, how it's being served and whether you want leftovers. It returns rice, meat, onions, yogurt, tomatoes, oil or ghee, herbs and lemons, with shopping equivalents. Vegetable biryani swaps the meat for mixed vegetables.
- Rice Calculator. Uncooked rice per person for biryani, pulao, plain rice, fried rice and khichdi, shown in grams, kilograms, pounds and cups, with a cooked-yield range and a suggested pot size. It only shows a water ratio when the cooking method actually uses one. Boil-and-drain biryani rice gets an explanation instead of a misleading fixed ratio.
- Kitchen Unit Converter. Converts both ways between volume, weight and temperature units. It handles US customary, metric and Australian measures, whose cups and tablespoons really are different sizes.
- Every ratio sits in one typed config file, so it can be changed after recipe testing without touching UI code. Results update as you type, are announced through an ARIA live region, and can be copied or printed. Unit tests cover edge cases from zero guests to a hundred.
SEO and editorial standards
- Recipe pages output Recipe, BreadcrumbList and FAQPage JSON-LD. Guides and stories output Article or BlogPosting. Every page has a fixed self-canonical, and search results are
noindex, follow. - Published editorial, recipe-methodology and corrections policies. The site shows no star ratings or review counts because it has no reader review system, and no "kitchen-tested" date unless the written method has been confirmed.
- The food illustrations are AI-generated, and the About page says so. Artwork is never presented as proof that a recipe was tested.
- Six cultural stories stay
noindexand out of the sitemap until their facts are reviewed, instead of being published with claims I couldn't back up.
Security and hosting
- A nonce-based Content Security Policy and security headers on every SSR response.
- All inputs are validated on the server with Zod. Secrets stay in server-only variables and Secret Manager, and nothing private ever gets a
VITE_prefix. - Deployed to Firebase App Hosting (Cloud Run). It scales to zero when idle and has a hard cap on instances, so a traffic spike can't run up an unbounded bill.
Decisions & Trade-offs
- SSR rather than a single-page app. Recipes are content people search for, so they have to be in the first HTML response. The cost is a Node runtime (Cloud Run) instead of cheap static hosting.
- Typed content behind repositories, no CMS yet. Content is checked by the compiler and covered by tests today, and the repository interface leaves room to move to a CMS later without changing the routes.
- Calculator ratios in config, not in components. Quantities will change as recipes are tested, so every ratio lives in one typed file with unit tests around it.
- Leaving things out instead of faking them. No ratings, no unconfirmed testing dates and no newsletter form until signup works reliably in production. The site has fewer features, but nothing on it is false.
Results
- Live at tarkatales.com, with recipes, regional pages, technique guides, food stories and three kitchen tools.
- 455 automated tests passing, with typecheck, lint, formatting and production build checks run before release.
- A crawl of the production build checked 86 pages with zero failures: sitemap completeness, self-canonicals, valid structured data, ingredients matching the method steps, working step anchors and correct
noindexhandling. - A full mobile sweep of every sitemap URL at five widths from 320px to 900px found no horizontal overflow and no page errors.
Next Steps
Impact
Tarka Tales is where I hold myself to the standard I hold client products to. It ships as real HTML, its calculators are tested, and it states clearly what it can and can't back up. For a food site, being careful about recipes is part of what makes it trustworthy.
