How to vibe codeFamilyWall

Prerequisites

• Node.jsfree

  Runtime environment for building and executing the web-based family hub.

• GitHubfree

  Version control and automated deployment pipeline integration.

• Expo Accountfree

  Managed React Native build service for cross-platform mobile app compilation.

AI coding tools

• Claude Code

  Unmatched capability for executing complex multi-file scaffolding, schema designs, and debugging loops across full-stack applications.

• Cursor

  Provides an AI-native code editor workflow for rapidly refining UI components and inspecting real-time diffs.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the monorepo with Next.js and Expo, configure Tailwind CSS, and set up the core relational schema in Supabase for households, members, groups, events, tasks, and budgets.

   Initialize a new Next.js project with Tailwind CSS and TypeScript. Set up a Supabase client configuration with environment variables for SUPABASE_URL and SUPABASE_ANON_KEY. Write a migration script for Supabase PostgreSQL that creates tables for: 'households' (id, name, created_at), 'profiles' (id, household_id, role, name, avatar_url), 'events' (id, household_id, title, start_time, end_time, color, created_by), 'tasks' (id, household_id, title, completed, assigned_to), and 'budgets' (id, household_id, category, amount, date, user_id). Implement Row Level Security (RLS) policies on all tables so users can only access data belonging to their assigned household_id. Ensure TypeScript types are automatically generated from the Supabase schema.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Household Onboarding

   Integrate better-auth with email/password and magic links, allowing users to create a household or join an existing family circle via invite code.

   Configure better-auth in the Next.js application supporting email/password and magic link authentication. Create custom onboarding flow screens: one for creating a new household (which automatically provisions a household record and assigns the creator as 'parent' admin) and one for joining via an invite token. Implement middleware to protect dashboard routes and redirect unauthenticated users to the sign-in page. Build a user profile settings page where members can update their display name, avatar, and notification preferences.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Shared Family Calendar & Real-Time Sync

   Build a shared color-coded calendar interface with month/week/day views, leveraging Supabase real-time channels for instant multi-user synchronization.

   Build a responsive family calendar component in Next.js supporting month, week, and day grid views. Allow users to create, edit, and delete events with custom titles, start/end timestamps, category colors, and assigned family members. Integrate Supabase real-time subscription channels so that when any family member adds or modifies an event, all connected clients update instantly without requiring a page refresh. Include a modal for event details and conflict warnings if overlapping times occur for the same person.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Collaborative Shopping Lists & To-Dos

   Implement real-time interactive lists for groceries and chores with instant check-off states and category grouping.

   Create a collaborative shopping list and to-do list module. Build UI components for adding list items, categorizing them (e.g., Groceries, Hardware), and checking items off with a satisfying animation. Use Supabase real-time features to sync list state across devices instantly. Implement optimistic updates in the React frontend so check-off actions feel instantaneous, handling rollbacks gracefully if network requests fail. Add a feature to clear all completed items with a single tap.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Meal Planner & Grocery Integration

   Develop a weekly dinner grid with recipe storage and a one-click button to aggregate missing ingredients directly into the shopping list.

   Build a weekly meal planner module featuring a 7-day breakfast, lunch, and dinner grid. Create a recipe book sub-view where users can store recipe titles, ingredients lists, and instructions. Implement a 'Generate Shopping List' action button on meal cards that parses the recipe ingredient list and automatically inserts missing items into the collaborative shopping list created in Step 4, avoiding duplicate entries if items already exist.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Budget Tracking & Expense Management

   Add a shared household finance ledger to log expenses, categorize spending, and monitor shared savings goals.

   Create a household budget and expense tracking module. Build a transaction ledger table displaying expense amounts, categories (Groceries, Utilities, Entertainment), date, and the family member who added it. Include summary metric cards at the top showing total monthly spend and budget remaining per category. Implement a form to add new transactions with instant optimistic updates and Supabase real-time persistence.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Mobile App Shell & Geolocation Shell (Expo)

   Set up an Expo React Native companion app wrapper for mobile clients, incorporating basic location tracking states and local notifications.

   Initialize an Expo React Native project sharing the backend API endpoints from the Next.js app. Build mobile-optimized screens for the Shared Calendar, Shopping Lists, and Meal Planner using Expo Router. Implement background location permission handling using 'expo-location' and set up a basic background task polling mechanism to send coordinates to a Supabase 'locations' table. Display family members' last known positions on a React Native MapView component with custom avatars.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for FamilyWall