LettuceEat

• 

  Architecture diagram

Inspiration

I live alone. Every week I screenshot recipes I want to cook. Every week I forget they exist. The one time I actually go back, I open my camera roll and realize I don't have half the ingredients.

There was no easy path from "I want to cook this" to "here's what I need to buy." So I built one.

What it does

Paste any recipe URL into LettucEat. It reads the recipe, extracts every ingredient, and matches each one to a real price at your store. You get a complete shopping list with a total before you open the grocery app.

There's also a pantry tab. Mark the staples you always have on hand, olive oil, salt, canned tomatoes, and the list trims to only what you still need to buy that week.

How we built it

React and TypeScript on the frontend. A single-page app with four views: capture, shopping list, pantry, and settings. We used the CSS View Transitions API for slide animations between pages and CSS custom properties throughout for the design system.

For recipe parsing, we send the URL to an AI model that extracts ingredients, normalizes quantities, and maps them to store SKUs. The pricing layer queries real-time store inventory for a given zip code and returns per-item costs. Pantry data lives in localStorage and persists between sessions.

Challenges we ran into

Ingredient normalization was the hardest part. A recipe might say "2 cans of cannellini beans" or "400g white beans, drained", they mean the same thing, but a price lookup engine doesn't know that. We spent a lot of time on the disambiguation layer.

Recipe sites also vary a lot in structure. Some use structured data, some bury ingredients in prose, some are behind paywalls. Each format needed its own handling.

Scope management was its own challenge.

Accomplishments that we're proud of

The whole flow works end to end. Paste a URL, get a priced list in seconds. That was the goal and we shipped it.

The pantry feature came together late in the build and made the app more useful, not just "what does this recipe cost" but "what do I still need to buy this week."

What we learned

Real-world ingredient matching is a data problem before it's a code problem. How well you can normalize free-text quantities into store-searchable terms sets a ceiling on everything else.

Cutting scope matters more at a hackathon than building the right abstractions. We cut the browser extension, multi-store comparison, and meal planning. We shipped a working core instead.

What's next for LettucEat

A browser extension so you can capture recipes while you're already on the page, instead of copying the URL later. Weekly meal planning mode that consolidates all your saved recipes into one shopping list. We also want to make an app so that it is easier for users to do everything on thier phone.

Built With

• amazon-web-services
• bedrock
• react
• typescript
• vercel
• vite