Skip to content
An application using a MERN stack , Finding recipes that tells you how many ingredients are used and how many you are missing Using the Spoonacular API.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.netlify
assets/images
public
src
.gitignore
README.md
netlify.toml
package-lock.json
package.json

README.md

what2eat

CircleCI

Application details

  • A Recipe finder that allows you to see recipes based on the ingredients you have and lets you see how many you are missing for the particular recipe.
  • Navigating to the ** (Where to find page) will reveal a layout of a welcome page where you can make an account to get full features or continue on to the recipe finder itself for quick access.
  • On selecting a recipe you will get a soft view of the instructions and how to make the desired recipe with instructional overview.
  • There is a link at the bottom of the page leading to an in-depth overview of the recipe which will lead the user to a new page where a more in-depth view of the recipe is kept.
  • Created account users can keep track of saved recipes for quick access to get back to them , along with removing them if they are no longer wanted.

Where to find

You can visit what2eat here !

Instructions

  • The Sign up button at the top of the home page will lead you to a create an account form to enter your details.
  • After signing up, you can pick from some predetermined ingredients in the check boxes provided, Or you can create your own, making the application more versatile for production.
  • Upon searching, the screen will be populated with recipes that closely match your desired inputs, with recipe overviews that includes images of the desired outcome, also information including how many of your ingredients are used in the recipe and how many ingredients you are missing, with an option to go to the recipe overview.
  • At the recipe overview page , you will be greeted with a larger view of the recipe outcome picture along with a list of instructions and a save button if you want to keep it around for quick access.
  • Once you have saved a few recipes there is a separate page that keeps track of all the recipes you have saved in the MyRecipes link provide at the top of the page.
  • On the MyRecipes page you find a similar display to the search. Displaying all the recipes you have kept.

Coding styles

-React was used for the components to display the various forms of information

-React-Redux was used for the management of the state

Screenshots

  • Mobile screenshot on the right
  • On the right is the "search for" screen, where you can add and pick from options
  • The middle picture is an overview of what the search result will look like on a full sized screen

Contributions

Contributions to the application are accepted. If you have a design suggestion, feel free to change and make a pull request. I styled this app with the simplest of styles.

Built With

Authors

  • Dameon Mendoza - Initial work - dameon1

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

Thinkful Spoonacular

You can’t perform that action at this time.