How to vibe codeCronometer

Prerequisites

• Node.jsfree

  Runtime for modern full-stack web application development.

• GitHubfree

  Repository hosting and version control for AI coding agent workflows.

• Supabase Accountfree

  Hosted Postgres database with relational tables for foods, nutrients, and user logs.

AI coding tools

• Claude Code

  Terminal agent capable of scaffolding complex relational database schemas and executing multi-file refactors.

• Cursor

  AI code editor for iterative UI polish of complex nutrition charts and dashboard views.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application with TypeScript, Tailwind CSS, and Shadcn UI. Establish the relational database schema in Supabase to support users, food items, nutrients (spanning macros and micros), diary entries, and custom recipes.

   Initialize a new Next.js 16 project with Tailwind CSS, TypeScript, and App Router structure. Configure Supabase client bindings using environment variables. Create a comprehensive relational schema in SQL for a nutrition tracker: users, foods (with foreign keys or JSONB for 95 micro/macro nutrient values per 100g), serving_sizes, diary_entries (user_id, food_id, serving_size_multiplier, meal_category: breakfast/lunch/dinner/snack, date), and recipes. Provide TypeScript types matching this schema precisely and implement a robust database connection helper.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & User Profiles

   Implement authentication using better-auth configured with email/password and session handling tied to the Supabase database. Build onboarding screens to calculate basal metabolic rate (BMR) and daily nutrient targets.

   Integrate better-auth into the Next.js application, storing user credentials and profiles in the Supabase PostgreSQL database. Create clean sign-up and sign-in pages using Tailwind CSS and Shadcn UI components. Add an onboarding wizard that collects user biometrics (age, height, weight, activity level, gender) and calculates initial daily targets for calories, macros, and key vitamins, saving these targets to a user_settings table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Food Database Ingestion & Text Search

   Build a seed script and search interface to ingest a core set of nutritional data (simulating USDA nutrient profiles) and implement lightning-fast server-side search with debounce and filtering.

   Write a database seeding script that populates the foods and nutrient tables with representative structured nutritional profiles (including macros, vitamins A-K, and essential minerals). Implement a high-performance food search API route that accepts query strings, performs fuzzy matching on food names, and returns serving sizes. Build a responsive search modal on the frontend allowing users to search, filter, and select foods to add to their daily log.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Daily Diary & Nutrient Aggregation Engine

   Build the core daily diary view categorized by meals, and construct a backend aggregation engine that sums up all 95 nutrients consumed throughout the day against the user's targets.

   Construct the main daily diary page in Next.js featuring collapsible meal sections (Breakfast, Lunch, Dinner, Snacks). Implement client-side state and server actions to add, update, and delete food diary entries with dynamic multiplier scaling. Build a robust backend aggregation query or service function that calculates the total cumulative intake of calories, macronutrients, and micronutrients for a given date, comparing them against the user's customized targets to return percentage completion values.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Dashboard Charts & Nutrient Breakdown UI

   Create detailed visual dashboards displaying progress bars, nutrient meters, and charts for macros and micronutrients using a charting library.

   Build a comprehensive nutrition dashboard view using Tailwind CSS and interactive charts (e.g., Recharts or Lucide icons). Display daily macro progress rings, water tracking widgets, and a detailed micronutrient breakdown table grouped by vitamins and minerals with visual progress bars indicating adequacy against recommended daily allowances. Ensure the UI is fully responsive for mobile and desktop viewports.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Custom Recipes & Biometrics Tracking

   Implement custom recipe creation where users can group multiple food items and serving sizes, plus a biometric logging tab for weight and water intake.

   Add support for custom recipes and meals. Create a recipe builder page where users can search and add multiple ingredients, specify total yield servings, and automatically calculate the per-serving nutritional breakdown stored back into the database. Additionally, build a biometrics tab to log and chart daily body weight, water consumption, and simple health notes over time.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Polish, Error Handling, and Deployment

   Perform end-to-end testing, add error boundaries, handle loading skeletons, and deploy the application to Vercel connected to Supabase.

   Review the entire Next.js application codebase for type safety, error handling, and loading states. Add Sentry error tracking and clean loading skeletons for async data fetching on the diary and dashboard pages. Verify environment variable configurations for Vercel deployment and write a clear README.md documenting local setup and database migration steps.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Cronometer