publishing

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

    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

    TanStack StartTanStack RouterReact 19TypeScriptViteTailwind CSSZodVitestFirebase App HostingGoogle Analytics 4

    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 noindex and 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 noindex handling.
    • 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

    Add more recipes and regional detail, confirm kitchen-testing for the remaining recipes, review the six held-back food stories for publication, and connect official social profiles.

    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.

    Product Links

    Share this project

    Building something like Tarka Tales: Server-Rendered Pakistani Food Publication with TanStack Start? Let's talk.

    Work With Me