Back

Rambutan

Rambutan

Main Tech Stack

  • React
  • TypeScript
  • Express
  • SQL
  • AI

Problem

I found recipe management tedious. Many recipe websites are frustrating due to intrusive ads, lengthy introductions and inconsistent formatting. Saving recipes from websites often involves manually copying and tediously editing recipes for different serving portions or ingredient substitutes.

Solution

I created a full-stack recipe card manager that uses AI to automate recipe extraction and modification. Users can paste URLs or text to automatically generate structured recipes, scale ingredients and make ingredient substitutions. When an adjustment is made, a new variation of that recipe is created. So it is easy to keep track and compare different versions of the same recipe.

Implementation Highlights

  • Built the frontend with React and TypeScript so recipe editing, chat-based modifications, and version navigation could behave like a single app instead of disconnected forms.
  • Used Express and PostgreSQL to for the backend supporting authentication, saved recipes, tags, and version history.
  • Prioritized structured recipe extraction by parsing JSON-LD first, then falling back to cleaned HTML scraping when sites did not expose usable schema data.
  • Added AI guardrails and validation around parsing and modification flows so malformed model output did not break the app.

Technical Challenges

  • Guest vs. Authenticated User Flow: Initially built the app for authenticated users only with full database persistence, but realized forcing account creation before trying the app created friction for potential users. Refactored the authentication layer to support both flows by implementing optionalAuth middleware that attaches req.user for logged-in users or leaves it null for guests. This allowed the existing recipe creation endpoint to either save to the database. While guests recipes saved in the browser local storage.
  • Recipe Versioning: Users want to modify recipes through AI (scaling servings, making substitutions) but need to preserve the original and navigate between different versions. Traditional AI chat apps present conversations where previous responses scroll away and become difficult to reference. Instead of infinite scrolling, users navigate between recipe iterations with ChatNavigation controls that preserve the complete version history.
  • AI Prompt Engineering: LLMs can return unpredictable responses, malformed JSON or irrelevant messages when the user input off-topic messages. Created prompts to handle recipe extraction, modification detection (scaling, substitutions), and content relevancy guardrails. Implemented fallback validation when AI returns malformed JSON or empty responses.
  • Web Scraping Reliability: Recipe sites have inconsistent HTML structures. Used Cheerio to parse JSON-LD schema when available, with HTML-to-Markdown fallback for unstructured pages.