DEV Community

forkcount
forkcount

Posted on

I'm 13 and I built a free calorie tracker. It's live, and here's everything that broke.

#showdev #webdev #javascript #firebase

Every calorie app I tried wanted my email and a card before it showed me anything. So I built one that doesn't.

I don't write code by hand. I describe what I want to Google AI Studio and it writes it. Then I test it on my phone, find what's broken, describe the fix. That's the loop. Two weeks of it.

The app is called ForkCount. forkcount.github.io

What it does

It asks your height, weight, age, gender, and activity level. Then it works out your BMR (Mifflin-St Jeor), your TDEE, and a calorie target that keeps you above your BMR floor. If you try to set a target below that line, it shows you the numbers and explains why.

The rest is a food diary, water tracker, weight log, exercise log, weekly meal plan generator, and a community feed. You type "200g chicken and 150g rice" and it parses the food. No card. No trial. No paywall. No email — just a username and password.

Stack

  • React + Vite + TypeScript
  • Firebase Firestore
  • Firebase Auth
  • GitHub Pages, deployed from the docs/ folder
  • No backend. All logic is client-side.

The bug that cost me the most time

Firestore rejects any document that contains an undefined value anywhere inside it. Not null — undefined. And when it fails, it doesn't tell you which field. It just says:

Function setDoc() called with invalid data. Unsupported field value: undefined
Enter fullscreen mode Exit fullscreen mode

If you're saving a nested object with 40 fields, you're searching for a needle in a haystack. I spent days on this. Fix one field, redeploy, same error for a different one.

The fix was a recursive cleaner, routed through every Firestore write:

function cleanForFirestore(obj) {
  if (Array.isArray(obj)) return obj.map(cleanForFirestore);
  if (obj instanceof Date) return obj;
  if (obj && typeof obj === 'object') {
    const out = {};
    for (const k in obj) {
      if (obj[k] !== undefined) out[k] = cleanForFirestore(obj[k]);
    }
    return out;
  }
  return obj;
}
Enter fullscreen mode Exit fullscreen mode

Then I wrapped setDoc, updateDoc, and addDoc in a helper that cleans every write. One import change, and no write in the app can send undefined to Firestore again.

The second bug: GitHub Pages was serving my source files

The site broke with this:

Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "application/octet-stream"
Enter fullscreen mode Exit fullscreen mode

I stared at the code for two days. The problem was in GitHub Pages settings. It was serving my repo root — which has /src/main.tsx — instead of my built dist/ folder. The fix was to copy dist/ into a docs/ folder, point Pages at /docs, and stop letting it serve source.

The error was the browser refusing to run a TypeScript file as JavaScript. Once I knew that, it made sense.

What I'd like feedback on

  • Does the onboarding flow make sense the first time you see it?
  • Is the calorie calculation right? Mifflin-St Jeor for BMR, activity multiplier for TDEE, 300–500 deficit, floor at BMR.
  • Does it break on your phone?

I'm 13 and I built this by directing AI Studio, not by writing code by hand. If something looks like a beginner mistake, it probably is. Tell me and I'll fix it.

forkcount.github.io

Top comments (0)