Remix

Make your own version of Macro Meadow

Edit the prompt below and generate a customized version in seconds.

Original by Athanasios Sotiroglou

Describe your app

Create a responsive SPA (single-page application) for a calorie tracking diary.

Tech stack:
- React
- TypeScript
- Tailwind CSS
- Use modern UI components (tables, forms, modals)
- Clean, minimal design

GENERAL REQUIREMENTS:
- Style should be simple
- Fully responsive (mobile + desktop)
- Use component-based structure
- Use mock API functions (no real backend needed but add services.ts so I can add real calls later with ease)
- Use state management (React hooks)
- Use routing (multiple pages)
- Focus on clean UX

----------------------------------

PAGE 1: HOME (Diary View)

Display a table of daily food entries.

Name of entity is DailyEntry.

Each entry contains:
- Food name
- Grams
- Calories
- Protein (g)
- Carbs (g)
- Fat (g)

Features:
- Show totals at the bottom:
  - Total calories
  - Total protein
  - Total carbs
  - Total fat

- Each row has:
  - Edit button (only edits grams)
  - Delete button (removes entry)

- Editing:
  - Opens inline input or modal
  - Updates grams and recalculates values

- Calendar/date selector:
  - User can change date
  - Table updates based on selected date

- Navigation buttons:
  - "Add Food" → goes to Add Food page
  - "Search Food" → goes to Search page

----------------------------------

PAGE 2: ADD FOOD (Food Database)

Form with inputs:
- Food name
- Calories (per 100g)
- Protein (per 100g)
- Carbs (per 100g)
- Fat (per 100g)

Features:
- Submit button:
  - Adds food to internal database
  - Redirects to Home page

- Validation:
  - All fields required
  - Numeric fields must be positive

----------------------------------

PAGE 3: SEARCH FOOD

Features:
- Search input + button
- Filters food database by name

Results:
- List of matching foods (clickable)

When user clicks a food:
- Show a table with:
  - Calories per 100g
  - Protein per 100g
  - Carbs per 100g
  - Fat per 100g

Below that:
- Input: grams
- Button: "Add Entry"

When clicked:
- Adds entry to selected date in diary
- Calculates:
  - Calories based on grams
  - Protein, carbs, fat based on grams
- Redirects to Home page

----------------------------------

DATA STRUCTURE:

Food:
- id
- name
- calories_per_100g
- protein_per_100g
- carbs_per_100g
- fat_per_100g

Entry:
- id
- food_id
- daily_entry_id
- grams

DailyEntry:
- id
- entry_date
- entries[]: Entry

----------------------------------

UX DETAILS:

- Use modals or inline editing for updates
- Use clear buttons and labels
- Use loading/empty states
- Highlight totals visually
- Clean spacing and modern UI

----------------------------------

EXTRA (if possible):
- Persist data in localStorage
- Smooth transitions

DO NOT BUILD BACKEND

Free to use. No credit card required.