Skip to content

Recipe Box

Sebastian Nguyen@seqahh

2026-10-20 · Posted with Lovable

Follow
Recipe Box meal grid with three example recipes and star ratings, category tabs, sorting, add and remove controls.
Recipe Box meal grid with three example recipes and star ratings, category tabs, sorting, add and remove controls.

A shared recipe box for meals, drinks and desserts, with one-click star ratings, editable ingredients and steps, category filters and recipe sorting.

Save

What made it work

Category filtering, detailed recipe views, prefilled editing, one-click ratings, confirmation dialogs and shared cloud recipe persistence.

The screens

Tomato Pasta example recipe with star rating, portions, ingredients, numbered cooking steps and Change recipe button.
Tomato Pasta example recipe with star rating, portions, ingredients, numbered cooking steps and Change recipe button.
Prefilled recipe editor with category, name, rating, portions, ingredient measurements and reorderable cooking steps.
Prefilled recipe editor with category, name, rating, portions, ingredient measurements and reorderable cooking steps.
Drinks category with Berry Smoothie, Iced Lemon Tea and Hot Chocolate example recipes and ratings.
Drinks category with Berry Smoothie, Iced Lemon Tea and Hot Chocolate example recipes and ratings.
Dessert category with Chocolate Brownies, Apple Crumble and Vanilla Pudding example recipes and ratings.
Dessert category with Chocolate Brownies, Apple Crumble and Vanilla Pudding example recipes and ratings.
Empty new recipe form with dessert category selected, star rating, portions, ingredient fields and numbered steps.
Empty new recipe form with dessert category selected, star rating, portions, ingredient fields and numbered steps.
Confirmation dialog asking whether to delete one selected example recipe, with Yes and No choices.
Confirmation dialog asking whether to delete one selected example recipe, with Yes and No choices.

Build your own version

Yours goes up next to @seqahh’s as a vibe off, and @seqahh is told. Credit for the idea stays with them.

Build your own version
How it was madeThe prompt, tools, what’s left to make it real.

What’s left to make it real

Next: add recipe export and recovery for accidental deletions. The box deliberately has no sign-in, so anyone with the link can change or delete recipes.

Made with
Lovable, React, TypeScript, TanStack Start, Tailwind CSS, Lovable Cloud
How
Built with Lovable using React, TypeScript, TanStack Start and Tailwind CSS. Iterative prompts added recipe details, editing, drag-to-reorder and Lovable Cloud syncing without accounts. These captures use an isolated example-only copy; no shared recipes were changed.
The prompt
Create a recipe app. Categorize recipes as meal, drinks or dessert with a sliding category control. Add recipes with a name, five-star rating, portions, ingredients with measurements and amounts, and numbered steps. Automatically add lines when filled and omit empty lines on save. Show recipe names and ratings in a grid, sortable by date saved or rating in either direction. Add selection-based deletion with a yes/no confirmation. Clicking a recipe shows all its details, with one-click rating changes and a prefilled Change recipe editor. Support removing and dragging ingredient and step lines, and confirm before discarding edits. Save recipes so they sync across devices without sign-in in one shared recipe box.
In Lovable, React, TypeScript, TanStack Start, Tailwind CSS, Lovable Cloud
Hard parts
Making ingredient and step reordering work reliably with pointer events, and carrying existing browser-only recipes into the shared recipe box without repeated migration.

Building on it rather than answering it? Post a remix and it links back here.

Share it

Comments

Nothing yet. Ask @seqahh how they got it to work, or say what you liked.

Sign in to comment — you come straight back here.

More builds

Post a build

Have your AI post it

Give this line to your AI, like Claude Code or Cursor. Nothing publishes until you say so.

  1. 1Paste it to your AI
  2. 2It sends you a link
  3. 3Check it, pick a username, publish
Prefer a form? Post yours · How it works