Food Factor

A sleek, mobile-first nutrition tracking app designed to help users log their meals, monitor calories, and maintain awareness of macro balance (protein, fat, and carbs). Ideal for anyone aiming to gain, maintain, or lose weight, whether they’re bodybuilders, casual dieters, or just macro-curious folks.

Build a fully responsive mobile-first nutrition tracking app with a clean interface and user-friendly food logging experience.

Pages:

Welcome/Login

Multi-step onboarding (activity level, goal, current weight)

Dashboard with calorie ring + macro progress

Analytics page (expenditure and weight trend)

Nutrition breakdown (stacked bar chart)

Food log timeline (hourly entry list)

Food search/add flow (common + branded)

Supabase should be used to store user profiles, food logs, macro targets, and trends.

Fonts: Inter or Manrope.

Color: Light UI with accent colors (red = protein, yellow = fat, green = carbs, blue = calories).

Data should be dynamic and charting elements responsive.

Real-time calories consumed vs target

Protein, Fat, Carbs with color-coded progress bars

Add foods by hour

Emoji, name, macros, and portion shown clearly

Dynamic graphs: Weight trend + caloric expenditure

Weekly/monthly filters

Tabs: Scan, Search, Quick Add, Library

Results show macros and quantity picker

Stacked bar charts per day

Tooltip on hover for macro breakdown

User auth

Persistent food logs, macro targets, and historical data

Dynamic user-based onboarding and progress retention

Inspired by MacroFactor’s balance of utility and cleanliness

Kept the UI minimal with Manrope for readability and UI consistency

Used playful emoji as visual cues in food entries

Dashboard ring was customized to animate on update

Timeline UI mimics analog journaling - intuitive and scroll-friendly

Supabase errors: If data isn’t showing, make sure your food_logs and user_profiles tables are structured correctly - check column names (especially date, user_id, and macros)

Chart rendering: Use a lightweight charting library like Chart.js or Recharts for mobile compatibility

Slow search results: If querying a large food DB, implement throttling or debounce logic in your search bar

Responsive scaling: For iPhones with notch or small viewports, ensure charts and buttons don’t overflow - use vh-based padding/margin rules