# How to Vibe Code Your Own Plan to Eat (and Stop Paying for It) > Pick Your Meals. We'll Handle the Grocery List. - Site: https://plantoeat.com - Category: Lifestyle & Productivity SaaS - Platforms: Web app, Browser extension - Verdict: **Solid side project** (72/100 vibecodeable) - Estimated effort: 2-3 weeks part-time ## Verdict Build a personal subset for your own kitchen in a couple of weeks, but keep paying if you rely on their polished web clipper and multi-device sync. Building a personal meal planner is a satisfying project, but the recipe clipper will test your patience. Unstructured food blogs use dozens of different HTML schemas (or JSON-LD markup, if you're lucky), meaning your scraper will fail on 20% of random sites unless you back it up with an LLM-powered extraction layer using the Anthropic API. Ingredient aggregation—turning cups, grams, pinches, and qualitative measurements into a coherent grocery list—also requires careful prompt design and string normalization. ### What you can't replicate - 18 years of community trust and user recipe databases - The exact browser extension user base and ecosystem integrations ## What it does An online meal-planning, recipe-management, and automated grocery shopping list SaaS designed for individuals and families. ### Core features - Digital recipe book with folder/tag categorization - Recipe clipper browser extension for scraping web recipes - Drag-and-drop weekly/monthly meal planning calendar - Automated ingredient extraction and grocery list generation - Aisle-by-aisle sorting and custom pantry merging - Nutrition and macro tracking per meal/day - Family sharing and account permissions ## The business ### Pricing - Free Trial: Free — 14-day trial requiring no credit card upfront. - Monthly: $5.95/mo — Standard recurring monthly subscription. - Annual: $49.00/yr — Discounted annual billing. Founded 2008. Team size: Small bootstrapped team. ## The hard parts - Universal recipe scraping: handling wildly different HTML schemas across thousands of recipe blogs without breaking - Ingredient parsing and semantic normalization: standardizing '1 cup diced onions' and 'half an onion' into a clean aggregated grocery total - Calendar state management: dragging recipes across dates, scaling serving sizes, and dynamically updating the shopping list in real time ## How to vibe code Plan to Eat ### Prerequisites - Node.js (free): Runtime environment for building and running the Next.js application. - GitHub (free): Code repository and deployment pipeline connection. - Anthropic API Key (Pay-as-you-go (~$2/mo for personal use)): Required for parsing unstructured recipe URLs into clean JSON data. ### Recommended AI 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. ### Stack - Frontend: Next.js (App Router, Tailwind CSS) - Backend: Next.js Server Actions / API Routes - Database: Turso (SQLite at the edge for ultra-light personal relational data) - Auth: better-auth - Payments: Skip (personal-use clone) - Other: Vercel AI SDK, Anthropic API (Claude 3.5 Sonnet for recipe extraction) ### Hosting - Cloudflare (Hosts the Next.js frontend and edge API routes with generous free tiers.): $0/mo - Turso (Provides serverless SQLite database storage for personal recipe libraries and meal plans at $0.): $0/mo ### Build guide 1. **Project 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. ``` 2. **Recipe 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. ``` 3. **AI 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. ``` 4. **Meal 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. ``` 5. **Automated 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. ``` 6. **Polish, 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. ``` ### Cost vs paying **Starting costs (one-time):** - Anthropic API Credits: $5.00 one-time - Total: ~$5.00 one-time **Ongoing costs (monthly):** - Anthropic API Usage (Recipe Clipper): ~$2.00/mo - Total: ~$2.00/mo - Paying for the SaaS instead: $5.95/mo - Build time: 18-25 hours - AI tool credits: $20 (Claude Pro / Cursor) - Break-even: Never (subscription is cheaper, build for fun and privacy) ## Sources - [Plan to Eat - Home Page](https://www.plantoeat.com) - [Plan to Eat - The Plan to Eat Story](https://www.plantoeat.com/about/story/) - [Crafty Penguins Case Study: Plan to Eat Infrastructure Migration to DigitalOcean](https://craftypenguins.ca/case-studies/mindfuel-plantoeat/)