Building a Nutritional Tracker: Part 1 - Data Model Design

Part 1: Data Model Design — Nutrition Tracker

Motivation: Why build a Nutritional Tracker?

The first step to acquiring healthy habits is self-awareness. The idea behind this tracker is to keep a record of the family’s food intake to encourage better decisions. It also represents an ideal technical challenge to apply modern React and frontend best practices.

1. Project Setup

Creating the project with Vite is straightforward and fast:

npm create vite@latest nutritional-tracker -- --template react-ts

2. Defining the Data Model: Theory and Practice

2.1. Entity Formula

Each “consumption event” records:

Below is an explanation of each variable.

2.2. Visual Model Schema

erDiagram
  USER ||--o{ REGISTER : "creates"
  USER {
    string userId PK
    string userName
  }
  REGISTER {
    string id PK
    string userId FK
    string userName
    string food
    number amount
    enum unit
    date date
    time time
    enum mealType
    enum sweetener
    string notes
    timestamp createdAt
  }

3. Flexible Unit System

4. Sweetener Field: Ternary Logic

Instead of a boolean, we use:

This allows for more detailed tracking (sugar-free days, sweetener consumption, etc.).

5. Required vs Optional Fields

All fields except notes and sweetener are required for solid analysis.

6. Temporal Fields: Why date and createdAt?

• date and time: domain data (when it was consumed).
• createdAt: technical metadata (when it was recorded in the system).

$T*{\text{real}} \neq T*{\text{record}}$

7. What’s next?

• Testing environment setup with Vitest + Testing Library.
• Robust validation with Zod.
• LocalStorage wrapper with tolerant parsing and error handling.

Series Navigation

• Part 2: Testing Environment Setup →

Additional Resources

• Vite Documentation
• React with TypeScript
• Mermaid.js for diagrams