How to vibe codeCozi

Prerequisites

• Node.jsfree

  Required runtime for Next.js development and package management.

• GitHubfree

  Source code repository and deployment hook for Vercel.

• Expo Accountfree

  Required for building and testing the companion mobile app on iOS and Android.

AI coding tools

• Claude Code

  Best-in-class agent for scaffolding full-stack features, database schemas, and multi-file logic.

• Cursor

  Ideal for iterative UI work, component styling, and fine-tuning responsive calendar grid views.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js application with Tailwind CSS and set up Convex as the reactive database layer with tables for families, members, calendar events, lists, and recipes.

   Initialize a new Next.js project with TypeScript, Tailwind CSS, and Convex for backend state. Create the database schema in convex/schema.ts with tables for 'families' (id, name, createdAt), 'members' (id, familyId, name, color, avatarUrl), 'events' (id, familyId, title, startDate, endDate, assignedMemberIds, category, recurrenceRule), 'listItems' (id, familyId, title, category, completed, assignedTo), and 'recipes' (id, familyId, title, ingredients, instructions). Ensure all tables have proper indexes on familyId for efficient querying. Write initial seed helper functions for local testing.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication and Family Member Management

   Implement authentication using better-auth and build an onboarding flow where users create a family unit and invite or add family members with custom color assignments.

   Integrate better-auth into the Next.js app supporting email/password and session management linked to Convex user records. Build an onboarding wizard screen where a new user creates a family name and adds family members, assigning each member a unique color code (hex) and display name. Store these in the members table and protect all dashboard routes so unauthenticated users are redirected to sign-in. Ensure member color assignments cascade cleanly to UI badges throughout the app.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Shared Family Calendar View

   Build a responsive monthly and weekly calendar grid view that renders events color-coded by assigned family members with filtering and event creation modals.

   Create a calendar dashboard page featuring a responsive month and week grid view using Tailwind CSS. Implement event creation and editing modals that allow users to specify title, start/end timestamps, category, and multi-member assignments. Fetch events reactively from Convex so updates propagate instantly. Display events as colored pill badges corresponding to the assigned family member's color code, and add a sidebar filter to toggle visibility by individual family member.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Real-Time Shopping & To-Do Lists

   Develop shared household list modules for groceries and to-dos with real-time checking, item categorization, and instant cross-device synchronization.

   Build a shared lists module with tabs for 'Grocery' and 'Family To-Do'. Use Convex reactive queries to power real-time updates when items are added, checked off, or deleted by any family member. Include inline item addition, category grouping (e.g., Produce, Dairy), and assignment checkboxes. Ensure smooth optimistic UI updates so list toggling feels instantaneous across browser tabs and mobile views.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Recipe Box and Meal Planner

   Implement a recipe manager and a weekly meal planner grid that links recipes or custom text entries to specific calendar days.

   Create a recipe box feature allowing users to store recipes with title, ingredients list, and cooking instructions. Build a weekly meal planner view (Monday through Sunday) that displays scheduled dinners. Allow users to assign saved recipes or quick text notes to specific meal slots for any day of the week, saving selections back to the Convex database with reactive updates.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06AI Email Parsing and Automated Digests

   Set up an AI ingestion route using the OpenAI API to parse inbound text or forwarded email bodies into structured calendar events, alongside daily email digests via Resend.

   Implement an AI parsing utility using the OpenAI API endpoint that accepts raw unstructured text (e.g., a school permission slip or soccer practice email) and extracts JSON matching our event schema: title, startDate, endDate, and category. Provide an API route where users can paste email text and preview parsed events before saving them to the calendar. Additionally, configure a cron endpoint using Resend to send a daily morning agenda email summarizing the family's scheduled events for the day.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Mobile Companion App with Expo

   Configure an Expo React Native companion app connecting to the same Convex backend to provide mobile-first access to calendars, lists, and quick check-ins.

   Create an Expo React Native mobile app sharing the same Convex backend deployment URL. Implement authentication state sharing and build mobile-optimized screens for the shared calendar agenda view, shopping list item checking, and quick event entry. Ensure touch targets are optimized for mobile usage and push notifications are wired up for list updates and event reminders.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Cozi