How to vibe codeAnyList

Prerequisites

• Node.jsfree

  Runtime environment for building and bundling the web and mobile frontend.

• GitHubfree

  Version control and deployment pipeline for Supabase and hosting.

• Supabase Accountfree

  Managed PostgreSQL database with built-in real-time subscriptions and auth.

AI coding tools

• Claude Code

  Agentic terminal tool best suited for scaffolding complex full-stack Expo and Next.js applications.

• Cursor

  AI-native editor ideal for fine-tuning UI component layouts and fixing state bugs.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize an Expo project with file-based routing and set up the core relational database schema in Supabase for users, lists, items, and recipes.

   Create a new Expo app using TypeScript and Expo Router. Set up a Supabase client connection with environment variables for URL and anon key. Write a SQL migration script for Supabase that creates tables for 'profiles', 'lists', 'list_items' (with fields for name, category, quantity, notes, completed boolean, and assigned list_id), and 'recipes' (with fields for title, ingredients JSON array, instructions, and image_url). Enable Row Level Security (RLS) on all tables and configure real-time replication for 'list_items'.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Real-time Shopping List UI & State Management

   Build the interactive list view with instant optimistic UI updates and real-time synchronization across devices using Supabase Realtime channels.

   Build a shopping list screen in React Native using Expo Router. Implement a flat list grouping items automatically by their store category (e.g., Produce, Dairy, Pantry). Connect the list items to Supabase Realtime channels so that checking off an item or adding a new one instantly updates state across multiple connected clients without manual refreshing. Add an input bar at the top with auto-complete suggestions based on previously entered items in the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Recipe Storage & Parsing API Endpoint

   Create a backend API route that extracts structured recipe metadata and ingredients from arbitrary recipe blog URLs using JSON-LD Schema.org parsing.

   Create a Next.js API route that accepts a target URL in its body. Using fetch and Cheerio, extract the webpage HTML, look for <script type='application/ld+json'> tags containing Recipe schema, and parse out the title, ingredients array, and instructions. Fallback to basic OpenGraph tags if JSON-LD is missing. Return a clean JSON object containing title, ingredients, and instructions, ready to be saved into the Supabase 'recipes' table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Recipe Scaling and List Integration

   Build the recipe detail view with ingredient scaling controls and a one-tap action to merge ingredients directly into an active shopping list.

   Build a recipe detail screen in the React Native app. Display the recipe title, image, instructions, and an interactive ingredient list with a multiplier stepper (0.5x, 1x, 2x, 3x) that dynamically recalculates ingredient quantities using a robust fraction/number parser. Add an 'Add to Shopping List' button that opens a modal allowing the user to select which active list receives the scaled ingredients, automatically combining duplicates by name.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Meal Planning Calendar View

   Implement a weekly/monthly visual calendar matrix allowing users to assign recipes or custom notes to specific meal slots (Breakfast, Lunch, Dinner).

   Build a meal planning calendar screen in the Expo app that renders a weekly grid view with days as columns and meal slots (Breakfast, Lunch, Dinner) as rows. Allow users to tap a slot to open a picker drawer populated from their saved Supabase 'recipes' table. Save assignments to a new 'meal_plans' table linked by date, user_id, meal_slot, and recipe_id.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Polish, Offline Support, & Final Verification

   Add local AsyncStorage persistence for offline queueing, configure styling themes, and verify edge cases across web and mobile builds.

   Implement local caching for offline list viewing using AsyncStorage or Expo SQLite. Ensure that actions performed while offline (checking off items or adding notes) are queued and synced to Supabase when network connectivity returns. Add polish with smooth slide animations when items are completed and verify TypeScript compilation across all screens.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for AnyList