# How to Vibe Code Your Own AnyList (and Stop Paying for It)

> The best way to create and share a grocery shopping list.

- Site: https://anylist.com
- Category: Productivity
- Platforms: iOS app, Android app, macOS app, Web app
- Verdict: **Solid side project** (68/100 vibecodeable)
- Estimated effort: 3-4 weekends of focused development and debugging

## Verdict

Build a web-first personal clone with React Native (Expo) and a Supabase backend for lists and recipes, but keep paying if you rely on polished Mac/watchOS native apps.

AnyList looks simple on the surface—just checkboxes and a database—but achieving buttery-smooth real-time multi-user sync across devices while scraping unstructured cooking blogs reliably requires significant glue code. Vibecoding an Expo-based cross-platform client backed by Supabase is entirely realistic over a few weekends. However, matching the exact edge-case handling of Apple Watch complications, offline caching mechanics, and resilient DOM parsing for every obscure recipe blog will consume more debugging time than expected.

### What you can't replicate

- The founders' decade of polish on native iOS/watchOS UI performance
- Proprietary local grocery item categorization maps built over years of user data

## What it does

AnyList is a cross-platform consumer productivity and lifestyle application centered around grocery shopping, recipe management, and meal planning.

### Core features

- Real-time multi-user list synchronization
- Store aisle categorization and item autocomplete
- Recipe web scraper and parser (Schema.org/Recipe)
- Recipe scaling and grocery list generation
- Weekly/monthly meal planning calendar
- Voice assistant integrations (Siri, Alexa)

## The business

### Pricing

- Free: Free
- AnyList Complete (Individual): $9.99 / year
- AnyList Complete (Household): $14.99 / year
Team size: Small remote team.

## The hard parts

- Real-time WebSocket sync engine without race conditions across family members
- Robust web scraper that handles broken or shifting HTML structures on thousands of cooking blogs
- Cross-platform parity across native mobile apps, Mac app, and responsive web interface

## How to vibe code AnyList

### Prerequisites

- Node.js (free): Runtime environment for building and bundling the web and mobile frontend.
- GitHub (free): Version control and deployment pipeline for Supabase and hosting.
- Supabase Account (free): Managed PostgreSQL database with built-in real-time subscriptions and auth.

### Recommended AI 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.

### Stack

- Frontend: React Native (Expo) + Tailwind CSS / NativeWind
- Backend: Next.js API routes / Supabase Serverless functions
- Database: Supabase (PostgreSQL with Realtime enabled)
- Auth: Supabase Auth
- Payments: None (Personal use clone)
- Other: Cheerio or Firecrawl for recipe parsing, Zod for schema validation

### Hosting

- Supabase (PostgreSQL database, real-time sync websocket channels, and user authentication): $0/mo (Free tier)
- Vercel (Hosting the web companion app and recipe-scraping API endpoints): $0/mo (Hobby tier)

### Build guide

1. **Project 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'.
```

2. **Real-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.
```

3. **Recipe 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.
```

4. **Recipe 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.
```

5. **Meal 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.
```

6. **Polish, 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.
```

### Cost vs paying

**Starting costs (one-time):**

- AI Coding Assistant (Claude Pro / Cursor): $20.00
- Total: $20.00 one-time

**Ongoing costs (monthly):**

- Supabase Free Tier & Vercel Hobby: $0.00
- Total: $0.00/mo

- Paying for the SaaS instead: $0.83/mo ($9.99/yr individual)
- Build time: 25-35 hours
- AI tool credits: $20 (1 month Claude Pro / Cursor)
- Break-even: Never (purely for learning and personal customization)

## Sources

- [AnyList Official Website & Features](https://anylist.com)
- [AnyList Features & Pricing Matrix](https://anylist.com/_features.md)
- [AnyList About Us & Founders Background](https://anylist.com/_about.md)