I Built a Recipe Extractor Because I'm Tired of Reading Life Stories Before Getting the Ingredients

Source: Dev.to

You know the drill.

You google “easy chicken tikka masala recipe.” You click the first result. And then you’re hit with 3,000 words about how the author’s grandmother once visited a spice market in Jaipur during a summer that changed her life forever.

You scroll. And scroll. And scroll past the “Jump to Recipe” button that somehow takes you to another paragraph about kitchen renovations.

I finally snapped.

So I Built JustTheRecipe

justtherecipe-app.fly.dev – paste any recipe URL, get just the ingredients and instructions. That’s it. No life stories. No ads. No bloat.

How It Works

• Paste a recipe URL.
• The server fetches the page and extracts the recipe data.
• You get a clean, readable recipe card.

Extraction Methods (in order)

1. JSON‑LD (the golden path)
   Most recipe sites embed structured data using Schema.org Recipe markup. This is the most reliable source – it’s literally machine‑readable recipe data sitting right there in a <script> tag.

   function extractJsonLd($) {
     const scripts = $("script[type=\"application/ld+json\"]");
     for (let i = 0; i < scripts.length; i++) {
       let data = JSON.parse($(scripts[i]).html());
       if (data["@graph"]) data = data["@graph"];
       const items = Array.isArray(data) ? data : [data];
       for (const item of items) {
         if (item["@type"] === "Recipe") return normalizeRecipe(item);
       }
     }
     return null;
   }

2. Microdata fallback
   Some older sites use itemprop attributes instead of JSON‑LD. We check for those too.

3. Heuristic extraction
   When there’s no structured data at all, we look for common patterns – lists with “ingredient” in the class name, ordered lists with “instruction” or “step” in the class. It’s not perfect, but it catches a surprising number of sites.

The Stack

• Express – serves the API and static files
• Cheerio – parses HTML and extracts recipe data
• Vanilla HTML/CSS/JS – no framework, no build step
• Fly.io – deployed in Paris (CDG region)

The entire server is one file. The entire frontend is one HTML file. Total dependencies: 6.

Features I’m Actually Proud Of

• Checkbox ingredients – tap to cross off as you go. Game changer when cooking.
• Print mode – generates a clean recipe card. My fridge is now covered in these.
• Mobile‑first – because nobody’s propping up a desktop in the kitchen.
• No accounts, no tracking – paste URL, get recipe, done.

Try It

👉 justtherecipe-app.fly.dev

Grab any recipe URL from your favorite food blog and paste it in. The one with the 4,000‑word preamble about autumn in Vermont? That one works great.

What I Learned

• Schema.org is a gift. Structured data makes the web actually usable for tools like this. If you run a recipe site, please use JSON‑LD.
• You don’t need React for everything. Vanilla JS + a single HTML file loads instantly and does everything I need.
• Scratch your own itch. The best side projects solve problems you actually have. I cook almost every day, and this saves me real frustration.

Built in a weekend. Already using it daily. Sometimes the best projects are the simplest ones.