# How to Vibe Code Your Own Crouton (and Stop Paying for It) > Recipe organization and meal planning assistant - Site: https://crouton.app - Category: Lifestyle & Productivity - Platforms: iOS app, macOS app, iPadOS app - Verdict: **Serious undertaking** (45/100 vibecodeable) - Estimated effort: 4-6 weeks of evening work ## Verdict Build a scoped personal web or mobile clone for yourself, but keep paying for the real app if you want native Apple watch/vision OS features and seamless iCloud sync. Replicating Crouton as a cross-platform React Native or Next.js app is a solid challenge, but matching the native Apple polish, zero-config iCloud sync, and smooth gesture handling of an award-winning SwiftUI app requires weeks of patient engineering. The hardest part is not the UI, but building a robust web scraper and OCR parser that reliably cleans up messy recipe blog layouts into structured ingredient objects without constant regex breakage. ### What you can't replicate - Native Apple Design Award polish across watchOS, visionOS, and iOS widgets - Zero-infrastructure iCloud synchronization engine - Deep integration with native reminders and system menus ## What it does A recipe organizer and meal planning app that aggregates recipes from URLs, raw text, and physical cookbook photo scans, offering guided cooking modes and calendar planning. ### Core features - URL recipe parsing and extraction - AI OCR cookbook page scanning - Weekly meal planner grid - Guided cooking mode with inline timers - Ingredient measurement scaling and conversion - iCloud cross-device synchronization - Household sharing ## The business ### Pricing - Free: Free — Basic recipe collection with storage caps. - Crouton Plus: $24.99 — One-time unlock for unlimited storage and household features. - Crouton Discover / Pro: $14.99/yr — Subscription for advanced AI and cloud features. Founded 2019. Team size: 1 developer. ## The hard parts - Building a reliable recipe parser that handles inconsistent HTML schema and unstructured blog layouts - Accurately extracting structured ingredient names, quantities, and steps from unstructured OCR text blocks of physical pages - Implementing seamless zero-infrastructure multi-device sync matching iCloud capabilities - Designing responsive native tablet, desktop, and mobile layouts with fluid animations ## How to vibe code Crouton ### Prerequisites - Node.js (free): Required for running the Expo and TypeScript build toolchain. - Mac + Xcode (free): Required if building the native iOS companion app via Expo EAS or Swift. - GitHub (free): Source control and CI/CD pipelines. ### Recommended AI tools - Claude Code: Best-in-class terminal agent for scaffolding the full-stack database schemas, scrapers, and mobile components iteratively. - Cursor: Essential for fine-tuning mobile UI components and interactive guided cooking screens with visual feedback. ### Stack - Frontend: React Native with Expo (TypeScript) - Backend: Node.js / Express or Next.js API Routes - Database: Turso (SQLite at the edge for offline-first local storage) - Auth: better-auth - Payments: None (Personal use clone) - Other: Firecrawl for robust URL recipe scraping, OpenAI API or Anthropic API for OCR cookbook text parsing ### Hosting - Cloudflare (Hosting backend APIs and edge serverless functions): $0-5/mo ### Build guide 1. **Project Scaffolding & Database Schema** — Initialize the Expo React Native project with TypeScript and set up the Turso SQLite database schema for recipes, ingredients, steps, and meal plans. ``` Create a new Expo TypeScript project named CroutonClone with file-based routing. Set up a Turso SQLite database schema using Drizzle ORM containing tables for recipes (id, title, description, prep_time, cook_time, servings), ingredients (id, recipe_id, name, amount, unit, category), steps (id, recipe_id, step_number, instruction, timer_seconds), and meal_plans (id, date, meal_type, recipe_id). Ensure types are fully exported and validate clean execution with expo start. ``` 2. **URL Recipe Scraper & Parser Engine** — Build an ingestion backend service that accepts a recipe URL, fetches the HTML using Firecrawl or Cheerio, extracts JSON-LD recipe schemas, and normalizes unstructured text into structured database fields using LLM extraction when schema parsing fails. ``` Implement a recipe import service in the backend that takes a target URL. First, attempt to parse JSON-LD Schema.org Recipe metadata from the fetched HTML. If JSON-LD is missing, send the cleaned markdown content to the Anthropic API with a structured JSON prompt to extract title, prep time, servings, an array of ingredients with parsed amounts and units, and sequential steps. Save the parsed recipe to the Turso database and return the full record to the mobile client. ``` 3. **Recipe Library & Grid UI** — Build the mobile recipe library screen displaying stored recipes in a clean grid or list with search, filter by category, and quick view cards. ``` Create the main Recipe Library screen in Expo Router using React Native. Implement a searchable, filterable grid view of saved recipes with images, titles, and total cook times. Include a floating action button to trigger manual entry or URL import modal inputs. Ensure smooth scrolling performance and clean dark/light mode styling matching modern iOS design patterns. ``` 4. **Guided Cooking Mode & Interactive Timers** — Design an immersive cooking view that shows active steps one at a time, supports ingredient scaling multipliers, and auto-detects duration strings in text to spawn interactive countdown timers. ``` Build a Guided Cooking Mode screen for a selected recipe. Display one step at a time in large text with navigation controls. Parse step text for time durations (e.g., 'simmer for 20 minutes') and render clickable countdown timers that run concurrently and trigger local notifications or audio alerts when complete. Add a servings multiplier control at the top that dynamically scales all ingredient amounts in real-time. ``` 5. **Weekly Meal Planner Grid** — Implement a calendar-based weekly meal planner matrix allowing users to assign saved recipes to breakfast, lunch, and dinner slots across days of the week. ``` Build a Weekly Meal Planner screen featuring a 7-day calendar grid with slots for Breakfast, Lunch, and Dinner. Allow users to tap any slot to open a recipe picker modal from their saved library and assign a recipe to that day. Support drag-and-drop or simple re-assignment actions, and persist assignments to the Turso meal_plans table. ``` 6. **OCR Photo Import Pipeline** — Add camera capture and image upload support that sends cookbook photos to an AI vision endpoint to extract ingredients and steps into a new recipe draft. ``` Implement a camera capture screen in the mobile app using Expo Camera. Allow users to take photos of physical cookbook pages or recipe cards. Upload the image to the backend service, which passes it to a vision model (OpenAI or Anthropic API) with a specialized prompt to extract recipe components into the standard recipe schema. Return the draft recipe to the client for user review and saving. ``` ### Cost vs paying **Starting costs (one-time):** - AI Coding Assistant Subscriptions: $20.00 - Total: ~$20.00 one-time **Ongoing costs (monthly):** - Cloudflare Workers & Turso DB: $0.00 - LLM API usage for URL/OCR parsing: ~$3.00/mo - Total: ~$3.00/mo - Paying for the SaaS instead: $1.25/mo ($14.99/yr) - Build time: 35-50 hours - AI tool credits: $20 (Claude Pro / Cursor) - Break-even: Not financially rational (pay $14.99/yr for the real app unless building for pure learning) ## Sources - [Crouton Official Website](https://crouton.app) - [MacStories Review & Background](https://www.macstories.net)