How to vibe codeCrouton

Prerequisites

• Node.jsfree

  Required for running the Expo and TypeScript build toolchain.

• Mac + Xcodefree

  Required if building the native iOS companion app via Expo EAS or Swift.

• GitHubfree

  Source control and CI/CD pipelines.

AI coding 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.

Build guide

1. 01Project 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02URL 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Recipe 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Guided 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Weekly 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06OCR 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Crouton