FoodScout

[Mi-Br]

Purchasing food products without any knowing what ingredients it contains, nutrition and potentially harmfull substances is a common consumer behaviour. As a result we have seen increased number of Diabetes, Cancer, Heart deceases
FoodScout is on a mission to bring transparency and risk, so that consumer can make informed buy decision
Nutritionix API
Full Description

[Mi-Br]

Submitted / Description under review 🙏

[w3cj]

Looks good! Feel free to get started.

[w3cj]

How are things so far? Any updates to share?

[Mi-Br]

Update:
Had to change API since previous is not supported (some links dont work etc). Ended up choosing:
https://rapidapi.com/spoonacular/api/recipe-food-nutrition?endpoint=56072f1fe4b0d11d571f171e
** Search Grocery Priducts API (GET)
** Get Product Information API (GET)
** Get a Random Food Joke API (GET)

[Mi-Br]

Wireframe ready https://wireframe.cc/BgxHIK
not sure if it explains what I would like to achieve with UI , I basically want a single page with search bar, search results returned in a form of list, if user clicks on item , I then display detailed information, like list of badges (gluten free etc) as well as important nutrition information

[Mi-Br]

Initial design and CSS completed ( it sooo time consuming ! )
Planning to start fetching data from api later today

[w3cj]

Any updates to share?

[Mi-Br]

hi CJ,
Sure, search functionality implemented, now moving on to product view (detailed information about item)
Followed by "stretched" assignments (local storage etc.) . Not sure if we have deadline for this ? If we are pressed on time, i could revisit scope of work, otherwise I hope it will be finished by the end of this week

[Mi-Br]

Latest update:
finished with nutrition info. I am planning to release 1.0 version after a bit of refactoring and then move on to do some stretched assignments

[Mi-Br]

Hi CJ,
I was wondering if you can point me in the right direction.
I am stuck at getting product details. I am using fetch, and did well requesting search results and displaying them on the page. However, when trying to implement "get product details" functionality(separate API) - I keep getting HTTP response 200, type="cors" and no results ) I have tested the same with postman, jquery - it works, but not with fetch. any tips? (here is the snapshot of my code )

function getProductDetails(id) { fetch("https://spoonacular-recipe-food-nutrition-v1.p.rapidapi.com/food/products/428573/nutritionWidget", { "method": "GET", "headers": { "x-rapidapi-host": "spoonacular-recipe-food-nutrition-v1.p.rapidapi.com", "x-rapidapi-key": "c554c09a2dmsh41d2bc225d3ee89p10fb89jsn47a7e7210970", "accept": "text/html" } }) .then(response => { console.log(response); }) .catch(err => { console.log(err); }); }

[over-engineer]

Hey @Mi-Br,

fetch() returns a promise containing the response. This is just an HTTP response, not the actual HTML. To extract the HTML body content from the response, you can use the text() method

So, your code will look like this:

fetch('https://spoonacular-recipe-food-nutrition-v1.p.rapidapi.com/food/products/428573/nutritionWidget', {
  headers: {
    'x-rapidapi-host': 'spoonacular-recipe-food-nutrition-v1.p.rapidapi.com',
    'x-rapidapi-key': 'c554c09a2dmsh41d2bc225d3ee89p10fb89jsn47a7e7210970',
    accept: 'text/html',
  },
})
  .then((response) => response.text()) // <-- here
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

Hope this helps 😄

[Mi-Br]

thanks a lot, it helped.
I will try to deploy foodscout today/tomorrow

[Mi-Br]

I have finally deployed website to heroku using index.php trick
https://food-scout.herokuapp.com