IEBPROJECT CASE STUDY
29 / 37
CT 00:00:00 T+00:00
Two phone screens side by side showing the same calorie tracker day, one drawn with square fields and hairline bars, the other with rounded cards and circular rings

Self-hosted softwareDesign and buildDrawing 29 of 37

Plate

I was paying for a subscription just to have an app photograph my food and do the math, so I built my own and put it out for free. A version of it also runs privately on this site, and the two have drifted apart since.

Sheet 02 of 08/Why

Why I built it

Cal AI was charging me every month for a food database and some published formulas inside an app, so I built the same thing myself.

Sheet 03 of 08/The build

Five ways to log a meal

No matter how a meal gets logged, it turns into one entry that keeps its own copy of the numbers. So if the food database gets fixed months later, that fix can't change what I logged back then.

A scan screen prompting the user to photograph their meal
PL 11The photo scan screen. A vision model turns a picture of a meal into a list of ingredients, and you can edit the grams on any of them.
A manual food entry form with fields for name, serving size and calories
PL 12Manual entry needs no key, no network and no model. It's the path that has to keep working when all the smart features are switched off.
The scan screen in a light theme prompting the user to photograph their meal
PL 11The scan screen in light mode, with the same warning that scanning is the one path that needs a key.
A manual food entry form in a light theme with fields for name, calories and macros
PL 12Manual entry in light mode. It needs no key, no network and no model, and it looks the same in either theme.

Sheet 04 of 08/The fork

My fork and the public release

These screenshots are from before the August 2026 rewrite. Back then both versions came from one source tree, but they still looked completely different.

Calorie tracker home screen in a dark theme with square panels, 1,578 calories left, and protein, carbs and fat shown as flat bars
PL 02The home screen in my fork, with square fields, hairline meters, a mono tab bar and a PRIVATE link back out to the rest of the site.
The same calorie tracker home screen drawn with rounded cards, circular progress rings around food emoji, and a floating pill navigation bar
PL 03The public release's home screen, with the same numbers down to the calorie. It has rounded cards, circular macro rings and a floating tab bar with an add button.
The calorie tracker home screen in a light theme with square panels, 1,578 calories left, and flat macro bars
PL 02My fork in light mode. The square fields and hairline meters are drawn the same way, on a light background instead of black.
The same home screen in a light theme with rounded white cards and circular macro rings
PL 03The public release in light mode. The rounded cards look raised, and the macro rings keep their colours.
The same two phone screens side by side in a light theme, square fields on the left and rounded cards on the right
PL 01The same comparison in light mode. Both builds follow the system theme, and neither of them changes its layout when the theme switches.
A log food screen listing recently logged foods separated by hairline rules, with manual add and voice log buttons
PL 04Logging a meal in my fork. Recently logged foods sit in ruled rows, and manual entry and voice are equal options under the search field.
The same log food screen with each recently logged food in its own rounded card
PL 05The same screen in the public release. It has the same data in the same order, drawn differently.
The log food screen in a light theme, recently logged foods separated by hairline rules
PL 04The same log screen in light mode. The rows are separated by ruled lines and don't rely on shading, so they still work after the theme changes.
The log food screen in a light theme with each recent food in its own rounded card
PL 05The public release's log screen in light mode, where each recent food still has its own card.

Sheet 05 of 08/Weight

The weight feature I deleted

It reads my weight from the separate tracker on this site but never writes to it, so I only ever type my weight in one place.

A progress screen showing a seventeen day streak, twenty seven days logged, a progress photos prompt and a bar chart of daily average calories
PL 06My progress screen opens with the streak, the photo prompt and daily average calories. There's no weight anywhere on it.
The same progress screen leading with current weight, a start and goal figure, and a weight trend chart with a dashed goal line
PL 07The progress screen in the public release opens with current weight and a trend line toward the goal, because that build keeps track of weight itself and my fork doesn't.
The progress screen in a light theme showing a seventeen day streak, twenty seven days logged and a bar chart of daily average calories
PL 06My progress screen in light mode. It still opens with the streak and still has no weight figure.
The progress screen in a light theme leading with current weight and a weight trend chart
PL 07The public release's progress screen in light mode, starting with the weight it tracks itself.
A weight history screen listing weigh-ins by date with a log weight button
PL 09The weight history screen my fork deletes. The site already had a weight tracker, and when two apps both keep track of one number, their two histories start to disagree.
A weight history screen in a light theme listing weigh-ins by date with a log weight button
PL 09The weight history in light mode. My fork deletes this screen in both themes.
A progress photos screen showing today's date, a weight of 180.5 lbs labelled as read from the weight tracker, and empty front and side photo slots
PL 08Front and side progress photos. The weight comes from the separate tracker and gets added when the screen draws, so it's never copied onto the photo's row.
The progress photos screen in a light theme showing 180.5 lbs read from the weight tracker and empty front and side slots
PL 08Progress photos in light mode, with the same weight pulled in from the tracker.

Sheet 06 of 08/Inside the site

Running inside this site

It doesn't have a login of its own, so the only thing in front of it is the site's own sign-in gate.

An AI setup screen reading NOT SET UP with an empty field for an Anthropic API key and a save button
PL 10Photo scanning needs an API key, so the fork lets you set it from your phone, with no env file or SSH session needed.
The AI setup screen in a light theme reading NOT SET UP with an empty Anthropic API key field
PL 10The API key screen in light mode. It reads NOT SET UP until a key is saved.

Sheet 07 of 08/Limits

What it can't do

A photo of your meal only gets you a guess, so you can edit the grams before anything gets logged.

Sheet 08 of 08/Source

Inspect the work