How to vibe codePaprika Recipe Manager

Prerequisites

• Node.jsfree

  Required runtime for building and running the full-stack Next.js application.

• GitHubfree

  Source code repository and deployment pipeline integration.

• Gemini API Keyfree tier available

  Provides low-cost, high-context LLM calls for parsing unstructured recipe web pages.

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for scaffolding multi-file full-stack apps and writing complex parsing algorithms.

• Cursor

  Ideal AI-native editor for refining UI components, interactive cooking mode screens, and grocery list sorting logic.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Turso SQLite connection, and define database schemas for recipes, ingredients, grocery lists, and meal plans.

   Create a new Next.js project using App Router and Tailwind CSS. Configure Turso (libSQL) database client in lib/db.ts. Write migration scripts to create tables: 'recipes' (id, title, description, prep_time, cook_time, servings, image_url, instructions JSON, source_url), 'ingredients' (id, recipe_id, name, amount, unit, category), 'meal_plans' (id, date, meal_type, recipe_id), and 'grocery_items' (id, name, amount, unit, aisle, completed). Ensure proper foreign keys and indexes for fast retrieval.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Local-First Setup

   Integrate better-auth for secure single-user access and set up offline client caching so recipes remain accessible without an active internet connection.

   Set up better-auth in the Next.js app with email/password credentials and session management. Implement a client-side IndexedDB caching layer using Dexie.js that mirrors the Turso SQLite tables, enabling offline recipe browsing and local grocery list modifications when disconnected from the network.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Web Recipe Importer & LLM Extraction Pipeline

   Build a URL scraper endpoint that fetches target web pages, extracts raw text or JSON-LD schema, and calls the Gemini API to parse clean ingredients, steps, and metadata.

   Implement a server-side route POST /api/recipes/import that accepts a recipe URL. Fetch the HTML using native fetch, strip out extraneous tags, and send the cleaned text to the Gemini API using Vercel AI SDK's generateObject. Define a strict Zod schema enforcing structured extraction for title, prepTime, cookTime, servings, ingredients (array of name, amount, unit, category), and instructions (array of step strings). Store the parsed result in the Turso database and return the created recipe ID.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Interactive Cooking Mode & Timer Detection

   Create a dedicated cooking view with screen-awake persistence (NoSleep.js or Wake Lock API), interactive ingredient check-offs, step highlighting, and regex timer detection.

   Build a responsive cooking view component at /recipes/[id]/cook. Implement the browser Wake Lock API to prevent the screen from sleeping while active. Render ingredients as interactive checklist items that strike through when clicked. Render instruction steps with click-to-highlight functionality. Write a utility function using regular expressions to scan instruction text for time patterns (e.g., 'bake for 35 minutes', 'simmer for 10-15 mins'), rendering them as clickable timer badges that launch an interactive countdown timer when tapped.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Smart Grocery Lists & Aisle Sorting

   Implement grocery list generation from recipes, automatic unit-aware ingredient merging (e.g., 1 egg + 2 eggs = 3 eggs), and supermarket aisle categorization.

   Build a grocery list management module. Implement an aggregation algorithm that takes selected recipes, extracts their ingredients, matches similar ingredient names and units, and automatically sums quantities (e.g., combining '1 large egg' and '2 eggs' into '3 eggs'). Automatically assign items to supermarket aisles (Produce, Dairy, Pantry, Meat) based on a categorized ingredient dictionary, and allow users to manually reorder or check off items.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Serving Scaling, Measurement Conversion & Meal Planner

   Add dynamic scaling for ingredient quantities, metric/imperial unit conversion toggles, and a calendar view for daily/weekly meal planning.

   Add scaling and unit conversion controls to the recipe detail view. Implement a multiplier function that recalculates ingredient amounts proportionally when the user changes the target serving size. Add a toggle to convert volume and weight measurements between metric (grams, ml) and imperial (cups, ounces). Finally, build a monthly/weekly calendar view at /meal-planner that allows dragging or assigning recipes to specific calendar days and meal slots.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Paprika Recipe Manager