NutriTrack — How I Built a Full-Stack Nutrition Tracker with React, Supabase & Real Food Data

Source: Dev.to

Introduction

I’m a self‑taught developer from Brazil, still learning and building things I actually want to use. After studying web development for a while, I decided it was time to create something more useful than a simple to‑do list.

If you’ve ever tried to track your nutrition seriously, you know the pain: popular apps like MyFitnessPal hide essential features behind a paywall or rely on databases focused on American/European products, leaving Brazilian foods missing or inaccurate.

NutriTrack is a nutrition control system designed around how Brazilians actually eat and shop—yet flexible enough to work anywhere in the world.

Core Features

Personal Food Bank

Before you can log anything, you build your personal food bank—a list of all the foods you regularly eat. Think of it as a digital pantry catalog.

Open Food Facts Integration

Instead of manually typing nutritional tables, you search a product name and the app queries the Open Food Facts API, a crowdsourced database with over 3 million products worldwide, including a strong Brazilian catalog.

Daily Logging

• Pick a food from your food bank.
• Select the meal type.
• Enter the quantity (grams or any unit you set).
• The app instantly calculates calories, protein, carbs, and fat.

Real‑Time Totals

At the top of the page you see daily totals in real time: total calories, total protein, and a progress bar showing how far you are from your personal goal.

Example: Goal = 2,500 kcal, consumed = 1,800 kcal → bar shows 72 %.

Meal Planning (14‑Day Grid)

A scheduling page displays a two‑week grid where you can build complete meal plans for future days.

Custom Nutrition Targets

You set your own targets (e.g., calories, protein) instead of relying on default values. The daily plan page shows progress as a percentage of those targets, helping you think proportionally (e.g., “I’m at 60 % of calories but only 35 % of protein”).

Nearby Stores Feature

Using the browser’s GPS, OpenStreetMap data, and the Overpass API, the app finds supermarkets and pharmacies near your location—completely free, no API key needed.

Technology Choices

Supabase (Primary Backend)

Supabase was chosen over Firebase because it uses real PostgreSQL, offering proper relational tables, SQL queries, and Row‑Level Security (RLS). The generous free tier and excellent developer dashboard made it a clear winner.

Database Access Layer (db.js)

A single source of truth for all database interactions. Even though the frontend filters by user_id, the real security lives in the database through RLS policies.

-- Example RLS policy (PostgreSQL)
create policy "user_can_access_own_data"
  on logs
  for all
  using (user_id = auth.uid());

Snapshot Values in Logs

When you log “150 g of chicken breast” on a Tuesday, the app saves the nutritional values as they were at that moment (snap_calories, snap_protein, snap_carbs, snap_fat). These snapshots are stored directly in the log row, preserving historical accuracy.

OAuth Flow

Supabase (and most OAuth providers) link accounts by email. If your Google and GitHub accounts share the same email, they map to the same user_id, ensuring you don’t lose access when switching login providers. The implementation uses the PKCE flow, avoiding the older Implicit flow.

Nearby Stores Implementation

• Data source: OpenStreetMap via the Overpass API (crowdsourced, broad but occasionally inaccurate).
• Normalization issue: city names arrived in various capitalizations ('City Two', 'city two', etc.). Without normalization, the city filter displayed duplicate entries. This was resolved by standardizing the strings before rendering.

Open Source

NutriTrack is fully open source under the MIT license. The repository includes:

• Full SQL schema for the Supabase database.
• A .env.example file with required environment variables.
• Step‑by‑step setup instructions in the README.

Live demo: