Foodyx

Foodyx gives you a breakdown of calories and nutrients, compare serving sizes, and discover how the food you eat supports your goals.

Screenshot

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Reactjs (Hooks like states and effects)
• API (https://developer.edamam.com/edamam-recipe-api)

How To Use Foodyx

• Click on any 'Get started' button when the page loads.

• Enter your choice of meal into the search box.

• Then watch edamam API generate options of that meal with their calories.

To Run this program on your device

• Open your terminal
• Locate this project
• Run 'npm init' to get the 'node module' folder
• Run 'npm start' to run the program on your local browser.

What I Learnt on the project

I learnt to use axios to get data from an api and it is way easier than useEffect.

      .get(
        `https://api.edamam.com/search?q=${search}&app_id=${APP_ID}&app_key=${APP_KEY}`
      )
      .then((res) => {
        setData(res.data.hits);
      });

Designer

• Twitter - @AdahJonathan
• Behance Profile - @Jonathan Adah

Developer

• Twitter - @_henryi
• LinkedIn - Henry Agu