4.7 KiB
+++ categories = ["software"] tags = ["C#","MSSQL","blazor"] date = 2025-04-15T12:45:00-05:00 description = "" draft = false slug = "formulation-web-app-II" title = "🥣 Formulation - Nutrition Calculator" author = "nicholas" +++
View the git repository here
In a [previous post]({{< relref "posts/formulation-web-app-I">}}) I added multi-user support to a web app I built with Microsoft's Blazor framework in C#, which I named Formulation. In this post I review a fully-working version of the project.
{{< video src="videos/formulation-demo-3x.mp4" width="100%" autoplay=true loop=true
}}
Problem
The problem is in my previous approach to estimating nutrition, which was to prepare many units of a single type of food item with known nutrition, e.g. frozen burritos. I knew that if I ate one whole <food> I would have consumed <nutrition>. This works, but it is not flexible: I must eat the whole <food> item, and only eat <food> items, or else be pained to calculate things manually.
Solution - Weight-based recipes
The main idea of the app is to allow me to quickly calculate nutrition data. It is not enough that I should estimate using sloppy heuristics, or even calculate using mess-making volumetric measurements. I cannot do it anymore! I will not fill measuring spoons and cups, scoop out the contents, rinse, scoop again, always scooping, always leveling and scooping and scooping and converting. Accuracy relies on consistent scooping technique and density, both can be highly variable. Flour, for example, can vary from scoop to scoop by around 30%! This is an enormous margin and pure madness in a world where highly sensitive and accurate scales exist. I do not have to live like this anymore, and it has been a long time since I have. I will never go back. All I need is a scale, and to patiently convert volume-based recipes into weight-based recipes.
Example
Suppose I ate something like this:
- 3/5ths of a banana
- leftover taco meat
- some refried beans
- flour tortilla
- a dollop of sour cream
To understand what exactly I am about to eat, I simply:
- place item on the scale
- enter the weight
- tare, and
- repeat for each ingredient.
Done. The only real work is in the data entry, but over time I will have built out a personal database of custom food items and their nutrition and there will be little work left to do. No scooping, no converting!
Demo
I show and describe the app here.
Sign in / Sign up
This is where a user can enter the app. If there is an issue with the sign in or registration process, they will be shown in a little warning box.
{{< image src="images/sign-up-error.jpg" caption="Sign Up Validation Failed" >}}
Toast
This demonstrates a dismissible toast notification service that shows certain messages from the server.
{{< image src="images/toast.webp" caption="Toast Notification" >}}
Editor Area
This section lists all of the user's ingredients and formulations. Contains a search and filter. Any ingredient can be edited or removed here, and new ingredients can be added to formulations.
{{< image src="images/editor.jpg" caption="Editor Area" >}}
Ingredients and Formulations
Ingredients are the most basic unit of a formulation. An ingredient has nutrition information that is entered by the user, not calculated. A formulation is just a collection of ingredients and other formulations, each of which constitute a proportion of the formulation.
Ingredients
I can create a new ingredient and fill in the nutrition data.
{{< image src="images/edit-ingredient.jpg" caption="Edit Ingredient" >}}
Formulations
The nutrition is calculated based on the nutrition present in the sub-ingredients, and according to the sub-ingredient proportion. In this example, I have created a formulation for chocolate chip cookie dough
{{< image src="images/edit-formulation.jpg" caption="Edit Formulation" >}}
Kitchen Area
The kitchen area is where one can, for example, find out how much protein is in a preparation of food. For example, earlier I created a chocolate chip cookie dough formulation. Now I want to bake a cookie with 20 g of dough. I add the ingredient to the quantity adjustment area, and enter the amount 20. The results area will display the nutrition for whatever ingredients appear in the quantity adjustment area, according to the amount entered.
{{< image src="images/kitchen.jpg" caption="Kitchen area" >}}
That is pretty much all. As with any software project, there are endless things still to be improved, corrected, or added, but I accomplished what I wanted with this project so I am allowing myself to call it "finished".