Recipe Card & Ingredient Substitution

Scenario

You're the first engineer at Homemade. The founder, Joel, is presenting the product in 48 hours to a program manager at Seattle Children's Hospital who oversees their oncology family support program.

The feature he needs to demo: a family texts the app and says, "I don't have heavy cream for this soup — what can I swap?" The app returns a smart substitution suggestion that respects the family's dietary guidelines (in this case: low-fat, low-sodium). The family is at the hospital. They're on their phone. They need it to work.

Your job: build the recipe display and ingredient substitution feature as a proof-of-concept, then write a short architecture document explaining how it works and what it would take to go from here to production.

This is not a full product build. You have roughly 30–35 minutes of working time plus 5–7 minutes to record your walkthrough video. Build to demonstrate your thinking, not to ship.

You may use any programming language, framework, or LLM provider you like (Claude, GPT, Gemini, or any other). The point is not which tools you pick — it is how you use them.

Constraints to Consider

• Mobile-first, low-end device target. The demo will be shown on a parent's phone at the hospital. Your component must render without horizontal scroll on a 375px-wide viewport. Assume limited bandwidth.
• Stateless LLM interaction. Each substitution request must work without storing any user-specific information. You may include the recipe context and a dietary guideline category in your prompt (e.g., "low-fat, low-sodium"), but no personal identifier, patient name, or health record data may appear in the LLM request.
• Graceful degradation required. If the LLM call fails (timeout, rate limit, API unavailability) the feature must remain usable. Showing an error and stopping is not acceptable.
• Single-file or single-component scope. Your primary artifact must be a single runnable file (e.g., an HTML file with embedded CSS and JS, or a single React or Vue component). No multi-service setup, no database, no authentication required. Keep the surface area minimal.

AI Usage Guidance

We expect you to use AI tools. We evaluate how you use them, not whether you use them. Evidence of iteration, redirection, and critical evaluation scores higher than a polished output with no process documentation.

The single highest-signal indicator: your video answer to the mandatory AI question. If you cannot name a specific moment where you redirected AI output, evaluators will assume you did not.

Mandatory AI question for your video: Walk me through one moment where you disagreed with, pushed back on, or redirected what the AI gave you, and what you did instead. Name the specific moment. Explain what the AI produced that didn't meet the bar, what you did differently, and why.

Communication note: Speak naturally. This is a technical role; we assess clarity of ideas and reasoning, not verbal polish, accent, or filler words.