How to vibe codePlan to Eat

Prerequisites

• Node.jsfree

  Runtime environment for building and running the Next.js application.

• GitHubfree

  Code repository and deployment pipeline connection.

• Anthropic API KeyPay-as-you-go (~$2/mo for personal use)

  Required for parsing unstructured recipe URLs into clean JSON data.

AI coding tools

• Claude Code

  Terminal-based AI coding agent ideal for scaffolding the Next.js app, setting up database schemas, and writing complex recipe parsing heuristics.

• Cursor

  AI-native code editor for refining the drag-and-drop calendar UI and grocery list check-off interactions.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, configure better-auth for single-user login, and set up the Turso SQLite database schema for recipes, ingredients, calendar entries, and grocery items.

   Scaffold a new Next.js project using the App Router and Tailwind CSS. Configure better-auth with a local SQLite adapter using Turso. Create database tables for 'recipes' (id, title, prep_time, cook_time, servings, instructions), 'ingredients' (id, recipe_id, name, amount, unit, category), 'meal_plan' (id, date, meal_type, recipe_id), and 'grocery_items' (id, name, category, checked, added_manually). Ensure all foreign keys and relations are properly defined in a schema file.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Recipe Organizer & CRUD Interface

   Build the recipe book dashboard where users can view, filter by tag, search, and manually create or edit recipes with ingredient lists and step-by-step instructions.

   Build a responsive recipe dashboard in Next.js. Create a grid view of saved recipes with search and category filtering. Implement a detail view page showing ingredients, scaling servings up or down with dynamic quantity math recalculation, and numbered cooking instructions. Add a modal form to manually create or edit a recipe, saving directly to the Turso database via Server Actions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03AI Recipe Clipper & URL Importer

   Implement a web clipper feature that takes any external recipe URL, fetches its HTML, and uses Claude via the Anthropic API to parse it into standardized recipe JSON.

   Create a recipe import feature where a user can paste any external recipe URL. Build a server-side API route that fetches the raw HTML of the URL, strips unnecessary tags, and sends the text content to the Anthropic API using Claude 3.5 Sonnet with a strict JSON schema prompt to extract title, prep time, cook time, servings, ingredients (with parsed name, amount, unit), and instructions. Return the structured JSON to the client for user review and one-click saving to the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Meal Planning Calendar

   Build a weekly and monthly calendar interface allowing users to assign recipes to breakfast, lunch, or dinner slots for any given day.

   Build a weekly calendar grid view in Next.js showing Monday through Sunday with slots for Breakfast, Lunch, and Dinner. Allow users to click a slot to open a searchable picker drawer of their saved recipes, attaching the recipe to that specific date and meal type. Support dragging or moving meals between days and deleting planned meals, updating the Turso database instantly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Automated Grocery List & Aggregation

   Write logic that aggregates ingredients from all recipes scheduled on the calendar for a selected date range, categorizes them by supermarket aisle, and handles simple unit merging.

   Implement an automated grocery list generator. Create a backend function that queries all recipes scheduled on the meal planning calendar for the current week. Aggregate the ingredients by name and category (e.g., Produce, Dairy, Pantry), combining quantities where units match (e.g., '1 cup flour' + '2 cups flour' = '3 cups flour'). Display an interactive checklist where users can tick off items while shopping or add custom non-recipe items. Save grocery list state in the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Polish, Macro Tracking & UI Refinement

   Add basic nutritional macro estimation per recipe, dark mode support, and polish mobile responsiveness for kitchen tablet usage.

   Add basic nutritional and macro tracking (calories, protein, carbs, fat) to recipe creation and detail views, either calculated via standard ingredient estimates or LLM estimation during import. Ensure the entire layout is fully responsive and optimized for mobile and kitchen tablet viewports with clean touch targets. Add error handling, loading states, and toast notifications for all CRUD actions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Plan to Eat