Trackaholic, then and now

Serving size2 years, 1 habit

I used to track my food with a calculator and a notepad. In July 2024 I wrote nine lines of Python to do the sums for me. Two years later that script is Trackaholic, an installable app with accounts, AI meal logging and a redesign that shipped in October 2026. This page shows how it got here, one version at a time. Every app screen uses made-up demo data.

First line of code2024Jul 16
First online2026Jul 9
Commits751
Roadmap phases0 → 21

In 30 seconds

Trackaholic is a nutrition tracker. Describe a meal, say it out loud or snap a photo, and an AI estimate fills in the calories and macros, with weight trends, water, steps, supplements and a weekly review around it. I designed, planned and shipped it, growing it from a nine-line terminal script in 2024 into a live, installable web app with accounts and a phone layout.

How it started

Before 2024 → July 2024

Serving size: one notepad page.

Before there was any code, tracking meant a kitchen scale, a calculator and a notepad. I weighed the food, read the label, worked out weight divided by serving size times calories, and wrote the answer down. At the end of the day I added up the page.

It worked, but every meal meant the same sums again, and a notepad can't tell you anything about last week. I was learning Python, so on 16 July 2024 I wrote a script that did the one sum I kept repeating. Ten days later it could add up a meal with several ingredients and save it under a date.

I used it every day that summer. The logs from those weeks are still in the repository.

159 meals logged over 28 days 15 July to 11 August 2024, through the first terminal version

Every version since has been the same idea with more of what I'd learned by then: a menu, then a web page, then a real app with accounts, AI estimates and a phone layout.

Illustration of the notepad routine, not a scan of a real page.
# macros calculator.py, 16 July 2024, commit 8c275f4
weight = float(input("Enter the weight in grams: "))
serving_size = float(input("Enter the serving size: "))
calories = float(input("Enter the calories per serving: "))
protein = float(input("Enter the amount of protein per serving: "))

total_calories = weight/serving_size*calories
total_protein = weight/serving_size*protein

print("Calories: ", total_calories, "\n Protein: ", total_protein)
The whole first version. The same sum as the notepad, done for me.

Two years in commits

Commits per month, Jul 2024 to Oct 2026

Most of these bars are tiny. Then summer happened.

The first two years came in short bursts: a week in July 2024, a day in April 2025, then the Streamlit version through 2025. That work stayed on my laptop and was uploaded in a single commit in March 2026, so it shows up in that month's bar. The months before July 2026 were research and planning, which leave no commits. Summer 2026 is when most of the work happened: 723 of the 751 commits landed between July and October.

Show the numbers as a table
MonthCommits

Before and after

Drag the line. Try not to wince at July.

Drag across to compare. Scroll inside the frame to see each full page.

Every checkpoint

Eight versions, one habit.

Summer 2026, in six planning cycles

210 pull requests

Plan, ship, audit, repeat.

From July on I worked in planned phases. I'd write a roadmap, ship one phase at a time with its tests and a release note, then audit the whole app and plan again. Each cycle below ended in a review that shaped the next one.

Early 2026 – Jul 31Cycle 1

The rebuild and going live

  • ·Researched and planned from early 2026, then rebuilt from scratch: a FastAPI backend and a React app
  • ·AI meal estimates from a photo or a description
  • ·Accounts, with every user's data kept apart and tested for it
  • ·Installable on a phone home screen
  • ·Online on 9 July, then a first audit: security fixes and CI
  • ·Day navigation, voice notes and weigh-ins

Going live is where the work starts. The first audit found more than I expected, and a regional AI outage taught me to write a proper post-mortem.

Aug 2 – Aug 21Roadmap 1

Phases 0 to 8

  • 0Fixes, and up to four photos per estimate
  • 1Password reset, built then; email went live in October
  • 2An admin page for usage
  • 3Saved meals you can log again in one tap
  • 3bBarcode scanning, examined and parked
  • 4Body profile, and goals that follow your weight
  • 5Daily burn measured from intake and weight change
  • 6–8Water, steps and supplements

Decide what a phase will not do before starting it. Parking barcode scanning was as useful as shipping anything else.

Aug 22 – Aug 26Roadmap 2

An audit, then phases 9 to 14

  • ·A full audit and a fresh look at competing apps
  • 9Hardening, strict TypeScript and daily backups
  • 10A food library you can see and correct
  • 11Calorie banking across days
  • 12How far you move the AI's numbers
  • 13Share a meal as a code
  • 14Portfolio polish

Other apps move fast. A feature is only an edge until someone else ships it, so the plan has to be checked against the market, not only my own list.

Aug 26 – Aug 29Roadmap 2, amended

Phases 15 to 21, and the README

  • 15A phone tab bar, design tokens and accessibility
  • 16The biggest files split up, and a test that proves nothing changed
  • 17Settings as five pages, and a quick-log grid
  • 18Shared buttons, fields and cards
  • 19A nudge when a weigh-in is due
  • 20AI estimates that use your saved foods
  • 21A weekly review
  • ·A README rewritten with fresh screenshots

Refactor with proof. A page-by-page comparison that comes back empty is how I know a clean-up changed nothing a user can see.

Sep 2 – Sep 28The queue

Small things people notice

  • ·Save an ingredient from an AI estimate
  • ·A wake-up progress bar while the free server starts
  • ·Progress you can see during an AI estimate
  • ·An accessibility pass against WCAG AA
  • ·Goal weight, and chart ranges from 7 days to all time
  • ·Library sorting, per-100 g and duplicate finding
  • ·Copy a recent meal, and a calmer first screen

Measure before fixing. The slow start-up took four wrong guesses before the data pointed at the real cause.

Mid-Sep – Oct 21The overhaul

A redesign, done in steps

  • ·Two weeks of research, and an audit with 24 findings
  • 0aFewer tabs: Today, Progress and You
  • 0bA new look, picked from a clickable prototype
  • RA new name: Trackaholic
  • ·An evaluation to choose the next AI model
  • ·Five national food tables, searchable as you type
  • 1Foundation: new type, colours and navigation
  • 2Logging, Today, Progress and the first run, rebuilt
  • 3aSettings became one You page
  • 3b–4Every look in light and dark, fewer words, then a polish pass
  • 5Shipped to everyone on 17 October
  • ·Then its own address, password reset by email, a privacy page and Sign in with Google

Prototype first. Clicking through a look decides it faster than any mock-up I could describe. The full story is below ↓

The redesign, before any code

Mid-September to early October 2026

Three weeks for a name, one for a whole new look.

About 2 weeksMid-Sep – 28 Sep

Finding what was wrong

Before designing anything, I spent about two weeks working out what was wrong. I went through every screen, asked people what they disliked about it, and wrote it all down. My conclusion was blunt: "In its current state I cannot onboard the app." So it would be a complete redesign, not a clean-up. The audit ended with 24 findings, led by six tabs, one card style for everything, a log page that opened on the manual form, and a stock slate-and-green look.

About 1 weekLate Sep – 3 Oct

Designing the redesign

Case study coming

I started with the layout. Three of the six tabs weren't really places: logging is an action, the weekly review is something you read once a week, and Weight mixed a daily weigh-in with a long-term trend. I placed every feature by how often I actually use it, tried four layouts as clickable wireframes, and chose three tabs, Today, Progress and You, with Log in the middle.

Then the look. Most trackers look alike, with white cards, rings and a healthy green, and mine did too. I compared four directions on the same screen, couldn't choose from still images, and picked the winner from a clickable trial: Fields, styled like a training computer's data page. The nutrition-label idea became an optional style.

A. Data fields, chosen
B. Nutrition label, now optional
C. Soft and friendly
D. The category standard

The four directions as I compared them on 3 October, the same Today screen in each look.

About 3 weeks13 Sep – 2 Oct

Finding a name

"Macros Calculator" had become outdated. The app now does far more than count macros: AI meal estimates, weight trends, water, steps, supplements and a weekly review. The old name didn't do it justice. Finding a new one took about three weeks:

  1. Names about tracking and fitness. Almost all were taken.
  2. Two words combined. None of them felt right.
  3. Words from other languages, each with an obvious meaning, a hidden one, or both. Native speakers didn't like my shortlist.
  4. Names that just sound nice, without a meaning. I decided against that route.
  5. Talking it over with my brother, I dropped the rule that a name had to be completely unused, as long as nothing popular or related had it. Then "Trackaholic" came to me. It fit, because tracking is what the app is about now: meals, weight, water, steps and supplements, not only macros.

I bought the domain the same day, and the app took the name on 6 October. The "-aholic" could read as compulsive, so the tone stays playful.

RunningSince 5 Oct

Choosing the AI model

Results pending

The Gemini model the app relies on is being phased out, so I want to choose its replacement on evidence, not on a release note. I'm testing four newer models on the same reference meals, whose real values I know. The runs happen every day on a small home server, and I wrote down how the results would be scored before any came in. The write-up, with what I found, follows when the runs finish.

Under the hood

Stack and practice

The boring parts, done properly.

Backend
PythonFastAPISQLAlchemyAlembicPostgreSQL (Neon)
Frontend
ReactTypeScript (strict)ViteTailwind CSSshadcn/ui + RadixMotionRecharts
AI and data
Gemini APIModel fallbackFive national food tables
App and ops
Installable PWARenderVercelGitHub ActionsPlaywright
  • 1,500backend tests, including checks that one account can never see another's data
  • CIbackend tests and lint, plus frontend type checks, tests, lint and build, on every pull request
  • 0violations in an automated WCAG AA accessibility scan of every screen
  • 210merged pull requests, shipped one planned phase at a time, with audits between cycles
  • Dailyan automated off-site backup of my account's data
  • Measureddecisions taken from data: the server's cold start, AI wait times, photo sizes

Engineering notes

Where it's going

After the redesign

The tracking continues.

Training, next to nutrition

A workout tracker that's easy to pick up: log sets, reps and weights, and see your progressive overload over time. It lives in the same app, with today's workout beside today's meals and strength trends in Progress next to weight and food. It's the biggest addition planned after the redesign.

A front door

A landing page that opens instantly and a demo account full of data, so anyone can look around before signing up. Then real users beyond me, and later the app stores.

Fast from the first tap

No minute-long wake-up on the first visit, and screens that feel instant on a mid-range phone.

AI I can stand behind

Meal estimates close enough to trust, with the accuracy measured rather than assumed.

Good at the food I eat

South Asian and Gulf home cooking: salan, roti, khubz. The big national tables barely cover it, which makes it the place to be best.

It started as a sum I was tired of doing by hand. Each version since holds a little more of what I learned that year.

Built by Mohammad Abdullah.

github.com/Abdulla1x · linkedin.com/in/abdulla1x