Wow--I really clicked with this immediately--super intuitive. Also, holy crap is it fast--instant results.
Some initial reactions/suggestions:
- I want to be able to edit entries in a list in-line. When I looked at it on my Android phone, each word's link was separated which made me think I could click each element individually to change it in place vs. having to re-enter it on the right panel. Think of it like Google or Pinterest's search interface where you modify individual words in place vs. doing it somewhere separate. For modifying integers, you could even use a dropdown or scroll menu on mobile since numbers would likely be relatively low.
- When I have the input field selected, pause the animation. In fact, maybe make it stop looping once I've entered one or a couple things. It is distracting and I've shown I understand how to use the box. Instead, consider putting static text examples somewhere below--an input key if you will.
- You have an engaging hook--let me take the next step of engagement. Add user accounts and the ability to save lists as recipe's or shopping lists, share them, and list the most popular ones based on shares. Instant boost to k-factor.
- In the list below the bar graph, I'd love to see line-item nutritional stats (perhaps marked by corresponding graph series color) for contribution of total calories of that type. For example, I have a smoothie recipe with 1C almond milk in it. Without clicking on it, I should be able to see displayed both the absolute values as well as the percentage of total recipe calories, carbs, fat and protein the line item is adding.
- Let me make lists of lists, list of lists of lists, etc.--ie. menu planning. A list is a recipe, a list of lists is the menu, a list of lists of lists is a weekly meal plan that would be awesome to plug into Amazon Fresh or something of the sort (if it had an API). Let me buy n-deep lists with a click.
- Consider showing the source of the data for users to verify or investigate further. If I am substituting something for one of your entries though that you don't have, I should be able to enter my own custom items as well as their nutritional information. This obviously is easier to implement for individual users and their shared recipes vs. incorporating in to your master lookup data.
- The mobile interface is slick, but I'd love a native app down the line as well.
- Let me upload a photo(s)--particularly on mobile where I might have made something, want to snap a photo, toss together the recipe quickly, and share it out. Think Instagram for recipes.
Would love to know more details about the project.
1. What did you use for building the front/back ends?
2. How did you make it so blazing fast?
3. What's your data source?
4. What made you decide to launch this? Consider adding an "About" page.
Thank you! These are all great suggestions. I am probably just going to go down the line and add most of these. I want to stray away from user accounts because they take time and resources, but I'm not sure if that's the right call. I'm erring on the side of improving the core functionality before the user accounts. The list of lists is also a great idea, that should probably tie in with user accounts.
FYI you can enter custom foods (primitively) by typing e.g. 500, 20g, 30g, 37g. This definitely should be improved in the future though.
Pics, or some clip-art style stuff would be a good idea for giving more feedback on what is entered. The larger idea of pictures is good but I'm not going to pursue it right now.
Data source is USDA along with a bunch of other various sources that I scraped. I believe scraping is 100% legal here because nutrition labels are not proprietary.
I will add an about page, that is a good idea. Backend is Python/MySQL on DigitalOcean. DigitalOcean was a hassle (not DO itself, but just getting the server set up) but I have been learning a lot. It's fast because I spent a long time optimizing how queries were analyzed and the MySQL queries themselves.
For how fast this is: Websockets! I was playing around with it, watching the network traffic. You'll see you get 101'd (Switching Protocols) to spe.lt:8080. If you hit that URL, you'll get a default page that says:
AutobahnPython 0.10.4
I am not Web server, but a WebSocket Endpoint.
You can talk to me using the WebSocket protocol.
You can see a little bit more in main.js as well. As for the backend, it's looking like Python, considering the WS page. I am curious about 3 and 4 as well, and as the actual frameworks used for 1.
Very nice work to the person who made this.
Edit: I'd also love to know if this ever is open sourced. Understandable if not. Very cool tool.
Thank you! Websockets speed it up a little, about ~20-50 ms. I am a fan of open source, I would consider open sourcing part of the backend if I can turn it into a library that is useable.
SI unit prefix are supported; I amused myself by asking for "3 yottatons of bacon". Not numbers though -- I wasn't able to add a million quadrillion eggs to complete the recipe that would feed the entire Milky Way.
Having carbs/fat/protein/calories seems to be more focused on people avoiding getting too much of "bad" stuff, as opposed to ensuring they do get proper nutrition in terms of "good" stuff.
However, the interface would seem to get pretty cluttered if it was a more complete nutritional profile.
Yes, I want to include that. There are a couple problems — incomplete nutrition profiles for certain foods, and slightly different foods having very different micronutrients (vitamins and minerals). For example, while a homemade cheeseburger and a cheeseburger from McDonald's have very similar macronutrients, they may have completely different micronutrients.
That said, general guidelines can still be given. It's important to remember that, in general, the amount of calories consumed matters the most. Other information is important too, though.
A flyover details dialog via hover icon with a grid of micro thermobars colored accordingly would make sense, sorting would rock. Clicking the icon should pin the same info open into content to allow a quick comparison, but there proly should be a sep. comparison interface later on.
Worked for a few items I tested, but failed for "soylent 1.5". That gave me "1.5 pouches Soylent", but what I wanted was "1 pouch Soylent v1.5". But otherwise, I enjoy the simplicity and interface.
I currently use My Fitness Pal on my phone to track calories during bulking and cutting. For the most part, the app is great, especially its database, but it has several quirks that make using it more difficult than it has to be. Putting the Add Food button directly over the advertisements, for example... But more importantly, inputting certain food items can be tedious. For example, logging "204 grams of milk" is difficult, but spe.lt handled that gracefully.
I feel like spe.lt combined with My Fitness Pal's database and a speech-to-text interface would be splendid.
This could be the seed of something fantastic, IMHO.
I'm trying to gain some bulk, and was using the "leading" product (MFP), but stopped because their data is: absolutely filthy via redundant user-submitted info, oriented towards companies rather than simple fresh home-cooking, poor handling of units (should be agnostic with internal conversion), and has friction at every layer of the experience.
Even with basically no features, this is probably easier to adapt into something that I might use.
Part of the problem with calorie/nutrition tracking is that use-cases conflict. I guess this could either become more opinionated, have multiple opinionated structures built on top of it, or just stay lean.
Interested in seeing where this goes, would follow a dev blog.
Thanks! I am pondering how I want to take this, but I want it to stay pretty lean because I like it more and it's faster to develop. I'll consider a dev blog, probably just in the form of a more comprehensive about page.
Well, anything with an RSS feed would be great. I don't know about others, but it's my preferred way to keep up to date on software that I use/am interested in. I do have recurring "check on [url] tasks" but eh.
I assume the reason for this is because its cooked and its taking into account water content but it feels unintuitive. Also it then doesnt tell me specifically how much carbs/fat there is, just a percentage. If people are going to use this for quick checks for specific diets it won't be all that useful.
In fact it's probably worth just using the percentages for the colour bars and only having pure values in grams shown as numbers. You could add a toggle to show percentages so that people planning a days worth of food could have a percentage split for their macros.
Aside from this I love this idea and the way its presented and would definitely use it if it had enough information.
The percentage bar is % energy content. Maybe there is a way to make that more clear. Displaying things in terms of weight percentages is misleading because the body burns a set amount of calories, not a set amount of food.
So close to being amazing! Please make the length of the bar relative to the calories, right now they're all the same width. And maybe allow comparison between x and y. Say, 2 eggs vs 1 chicken breast.
Amazing! The important thing to have a breakdown for is dietary carbs though. Most vegetables work for keto diets due to the carbs being mostly dietary. From this that isn't completely clear however.
Not that it matters if it is added, I can see the rationale behind this. Generally when people are following a program, depending on the program and the cycle (bulking or cutting), there is a set amount of proteins one should consume (1.5g/lb of body weight, 1g/lb of body weight etc.) and the remaining calories are to be attained from carbs/fats in some ratio (which in some cases might not even be defined, but left to preference).
Ok, I wasn't sure if it should say calories or kilocalories so I tried to look up which is the right one. Then for my surprise this is widely misused and now it's generally accepted to use Calories (with capital C) when you actually mean kilocalories. In Hungary every nutrition listing is in "kcal" (AFAIK) so this is the first time I encountered with this.
Frustrating. I didn't even find a way to enter "1 pizza" (or "1 whole pizza" or "1 entire pizza" or "1 pizza pie", it keeps coming up with "1 serving of pizza" or "1 slice of pizza" - either of which are completely fluffy measurements that could mean anything from 1/12 to a whole pizza.
Does this use the USDA Nutrition Database? It is a useful source of nutrient data that I have used for many years on my http://cookingspace.com site (parden the plug).
I really like the user interface on spe.lt - nicely done!
This is really needed! I'm on a renal diet and I have to watch every number like protein, sodium, phosphorus, potassium, fat, etc. I struggle day by day cobbling things in google docs online because the tools online don't suffice.
I've been also exploring to see if I can teach myself web development skills to create my own app based on my needs. I see some good ideas I can learn from yours...
Congrats. I love when someone build a clean, simple product that it works fast, and do its job!! Maybe a lot of web developer should learn from such simples, right to the point, products!
Feedback from my diabetic neighbor: this is useless to him without gram values for all the macronutrients, because he needs to calculate his insulin dosages. Percentages aren't enough.
Specifying raw or cooked rice gets you the right answer. Given that it gives you the info to correct instantly, this isn't too bad. NLP is hard.
We had a similar idea, but for automatic handling of whole recipes that you can adjust to your dietary needs (http://www.tweakeats.com). I have to say I prefer the feedback for individual ingredients that spelt has though, given the ambiguity of a lot of ingredients (raw vs cooked, chopped ingredients measured before or after chopping, red peppers, etc.). Seeing quickly how is was interpreted is helpful.
Thanks, the trailing s is missing because it's trying to singularize "kaas" :)
The information is from USDA, and scraped from a bunch of other various sources. The info should be vastly correct, "correctness" is also a heuristic taken into account when returning results.
Thanks! I do plan on expanding it, not sure how yet.
Right now, you can create a list and each list will have a unique URL. If you want to save a list, you can save the URL.
Some initial reactions/suggestions:
- I want to be able to edit entries in a list in-line. When I looked at it on my Android phone, each word's link was separated which made me think I could click each element individually to change it in place vs. having to re-enter it on the right panel. Think of it like Google or Pinterest's search interface where you modify individual words in place vs. doing it somewhere separate. For modifying integers, you could even use a dropdown or scroll menu on mobile since numbers would likely be relatively low.
- When I have the input field selected, pause the animation. In fact, maybe make it stop looping once I've entered one or a couple things. It is distracting and I've shown I understand how to use the box. Instead, consider putting static text examples somewhere below--an input key if you will.
- You have an engaging hook--let me take the next step of engagement. Add user accounts and the ability to save lists as recipe's or shopping lists, share them, and list the most popular ones based on shares. Instant boost to k-factor.
- In the list below the bar graph, I'd love to see line-item nutritional stats (perhaps marked by corresponding graph series color) for contribution of total calories of that type. For example, I have a smoothie recipe with 1C almond milk in it. Without clicking on it, I should be able to see displayed both the absolute values as well as the percentage of total recipe calories, carbs, fat and protein the line item is adding.
- Let me make lists of lists, list of lists of lists, etc.--ie. menu planning. A list is a recipe, a list of lists is the menu, a list of lists of lists is a weekly meal plan that would be awesome to plug into Amazon Fresh or something of the sort (if it had an API). Let me buy n-deep lists with a click.
- Consider showing the source of the data for users to verify or investigate further. If I am substituting something for one of your entries though that you don't have, I should be able to enter my own custom items as well as their nutritional information. This obviously is easier to implement for individual users and their shared recipes vs. incorporating in to your master lookup data.
- The mobile interface is slick, but I'd love a native app down the line as well.
- Let me upload a photo(s)--particularly on mobile where I might have made something, want to snap a photo, toss together the recipe quickly, and share it out. Think Instagram for recipes.
Would love to know more details about the project.
1. What did you use for building the front/back ends?
2. How did you make it so blazing fast?
3. What's your data source?
4. What made you decide to launch this? Consider adding an "About" page.
Awesome stuff.