🍝 It’s 2025, Stop Guessing Pasta Portions!
🔗 Pasta Visual Estimator - Try It!
Here’s the camera-powered estimator I built in 6 hours.
🧩 The Problem and Solution
As a college student, the biggest challenge when cooking pasta is that the amount of pasta you cook always becomes a visual game.
“I’m hungry”, “Let’s add somemore”, “It looks too little”, and I keep adding and adding, only realising it looks closer to two portions after cooking it.
Now, it’s time to take the guesswork out of the equation.
Simply drag a spaghetti-length line across your real bowl to calibrate, match your pasta bundle on screen, and the app projects cooked volume instantly. You’ll know exactly how much you’re cooking, before even cooking it!
💡 Reflection
- When the input was first given to Claude, Claude wanted leave the task of measuring the size of bowl and pasta portion for the user, and for them to fill in. However, this was counter intuitive, and I had to come up with practical and executable solutions such as using reference points.
- I also initially wanted to utilise Apple’s AR Quick Look for measurements but that means we are leaving behind our dear Android users. Boohoo :(
- I still feel that measuring the pasta in the current workflow is not the best and flawless answer to this problem. Any possible workabouts?
⚙️ Building Bricks
- Vanilla JS + Canvas render the overlays in real time. No frameworks means faster loading on phones. Perfect user experience.
- MediaDevices API streams the camera feed while I translate pixels → inches → grams behind the scenes.
- A lightweight HTTPS dev server lets me test on mobile hardware while I tweak the UX.
- Hosting on Vercel, great for cost optimisation!
🚀 Why Share It
I love building tactile, camera-first experiences that make everyday decisions easier.
I’m exploring product engineering roles where browser-based simulation, computer vision, or data visualization are on the roadmap.
🤝 Want a demo or to jam on similar ideas? Let’s talk!